graup

I was recently having fun with Reactflow myself. It took a bit of time to figure out custom nodes and edges. I found that ELK 'layered' (with some tweaking of settings) produces very nice layouts, but of course, we can't use its edge routing in real time if we want to allow users to move nodes around. Thanks for pointing me to @tisoap/react-flow-smart-edge ! I also came up with a similar `wasManuallyMoved` logic. https://github.com/3rd/tsdiagram/blob/66b186e85bf176e47128d0...

Reactflow's docs have a decent example for using ELK but I wish it went into a bit more detail regarding these choices.

For tweaking ELK settings, this online editor is also super valuable: https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?c...

One of the earlier implementations is this one, albeit not maintained anymore: https://github.com/NodeGuy/channel I think I prefer its more concise API, e.g. for select (https://github.com/NodeGuy/channel/blob/main/API.md#examples). ts-chan's API looks a bit too verbose to my taste.

Here's an example from ts-chan:

  import {recv, Chan, Select} from 'ts-chan';

  const ch1 = new Chan<number>();
  const ch2 = new Chan<string>();

  void sendsToCh1ThenEventuallyClosesIt();
  void sendsToCh2();

  const select = new Select([recv(ch1), recv(ch2)]);
  for (let running = true; running;) {
    const i = await select.wait();
    switch (i) {
    case 0: {
      const v = select.recv(select.cases[i]);
      if (v.done) {
        running = false;
        break;
      }
      console.log(`rounded value: ${Math.round(v.value)}`);
      break;
    }
    case 1: {
      const v = select.recv(select.cases[i]);
      if (v.done) {
        throw new Error('ch2 unexpectedly closed');
      }
      console.log(`uppercase string value: ${v.value.toUpperCase()}`);
      break;
    }
    default:
      throw new Error('unreachable');
    }
  }

  import { receive, Channel, select } from 'ts-chan';

  const ch1 = new Channel<number>();
  const ch2 = new Channel<string>();

  void sendsToCh1ThenEventuallyClosesIt();
  void sendsToCh2();

  for (let running = true; running;) {
   switch(await select([receive(ch1), receive(ch2)])) {
      case ch1: {
        if (ch1.done) {
          running = false;
          break;
        }
        console.log(`rounded value: ${Math.round(ch1.value)}`);
      }
      case ch2: {
        if (ch1.done) {
          throw new Error('ch2 unexpectedly closed');
        }
        console.log(`uppercase string value: ${ch2.value.toUpperCase()}`);
        break;
      }
    }
  }

Maybe get more into HCI research? It's basically computer science + psychology. I actually used self-determination theory for a research project back when I was doing my CS master: https://dl.acm.org/doi/10.1145/3274329

HCI research also extends nicely into UX research. You could look for UX Researcher roles, but that'd be non-engineering. That's why I like "UX Engineer" as a title for people like us.