Nice Display of Fixture Type Details

[Firionus]

Show full info for GDTFs in Fixture Type Tab in Patch, such as a nice display for DMX modes, full metadata, etc. See sketches in #1

Tracking ToDo:

• [x] Nice of DMX Mode Channels
  • [x] Multi-Column Layout
• [x] Full Metadata
  • [x] Description
  • [x] Fixture Type ID
  • [x] LongName/ShortName
  • [x] RefFT
  • [x] Current and previous Revisions with Text, Date and UserID
• [x] Check Sketches in #1
• [x] Graph of Channel Function Dependencies (only show the ones involved in dependencies - overview of all is on main page)
  • Ideally: ModeMaster points from slave to master, but there is a bar next to the parent that shows the ModeMaster range. Each node is rectangular. There is a label on each edge that shows the ModeMaster range numerically.

Dropped:

• Warnings during GDTF initialization (would require significant refactor on server)

Notes on Node/Edge Graph Visualization Libraries:

• https://github.com/wbkd/react-flow, 8k stars, default node types restricted to input/output/transform, more for interactive flow graphs than what we are trying to do
• https://github.com/konvajs/react-konva, 4k stars, Low-level wrapper around HTML Canvas, more for implementing graphical primitives
• https://github.com/uber/react-digraph, 2k stars, interactive directed graph in React on top of D3.js
• https://github.com/dunnock/react-sigma, 200 stars, binding around Sigma.js for data visualization of big graphs
• https://github.com/strathausen/dracula, 800 stars, basic graph drawing, lacking documentation, unclear whether it fits our scope
• https://github.com/crubier/react-graph-vis, 700 stars, looks promising, wraps vis.js
• https://github.com/vasturiano/react-force-graph, 900 stars, for layouting very complex graphs with this "bouncy" graph structure you can drag around
• https://d3js.org/, 100k stars, flexible and low-level
  • https://github.com/erikbrinkman/d3-dag
  • https://github.com/d3/d3-force
• https://github.com/tgdwyer/WebCola
• https://github.com/cytoscape/cytoscape.js, 8k stars, general graph algorithm and visualization library, promising

[Firionus]

This should also include warnings in the GDTF that were raised during construction of the GdtfWrapper

Related: #36

[Firionus]

Should include a graph with all channel functions and their dependencies

[Firionus]

closed by #63