/
Graphical Selector Spike Findings

Graphical Selector Spike Findings

Owned by Peter Derias (Unlicensed)
Last updated: Jul 07, 2022 by Gabriel Ting (Unlicensed)

Choice of library

So, there were a few choices to choose from:

  1. React-flow-renderer

    1. this has the benefit of having straight react components, so its less buggy

    2. However, this requires positions to be known in advance, which i wanted to avoid at all costs (this has to be hard coded)

  2. antv

    1. natural option since its also a dependancy of antd

    2. this has lots of cool features built in

    3. no need to hard-code pos

    4. the main issue is code ugliness - bashing this non-react library into react requires a hairy mess of code.

    5. Its main maintainers are not english speakers - this is not a problem intrinsically, but their english documentation isnt great because of this.

  3. https://github.com/plotly/react-cytoscapejs

    1. didnt particularly like it from the onset since the last push was a year old

    2. avoided it since there didnt seem to be the features i wanted

  4. https://d3js.org/

    1. JS library, no React support - will need to manipulate DOM as well

    2. Very customisable but steep learning curve API is MASSIVE af - very verbose in making data vis

    3. Lots of different representation options

      1. Graphical selector: https://observablehq.com/@d3/force-directed-graph

      2. Prereq tree: https://observablehq.com/@d3/collapsible-tree

    4. Most popular and maintained

  5. https://airbnb.io/visx/gallery

    1. Built for React - React components with props

    2. Low-level standalone packages so less dependencies

    3. Not many features and will have to build on top of the components

    4. Relatively new and maintained by Airbnb so support should be g

    5. Tree looks g but network seems like not too much built-in functionality

      1. Graphical selector:

        1. https://airbnb.io/visx/network

        2. https://airbnb.io/visx/dendrograms

      2. Prereq tree:

        1. https://airbnb.io/visx/linktypes

        2. https://codesandbox.io/s/n3w687vmqj?file=/elbow/index.js

 

Let an FE person have a look and see if i made the right decisions, and feel free to mess with this. The initial FE code https://github.com/csesoc/Circles/pull/493 is by no means complex or even good. Feel free to dump in favour of something else.

Where to next

There are quite a few features that should be built upon here including:

  1. giving more data to the user as they traverse

  2. allowing selection of courses from the graphical selector

  3. options of hiding courses (basic CS has like 90 nodes already, which is hard to fit on a screen)

There is also a more fundamental issue - i havent played around with antv enough to know if the features are good enough to make good enough graphs dynamically. The auto-generated ones at the moment are correct, but not good. This should be looked more into.