Schema viz with interactive tangled tree

[anngvu]

This issue tracks the schema viz adoption. We give a FAIR tryout of the updated tangled tree (D3.js-based) viz¹, with HTAN example here.

• 🧐 @anngvu inspect the relevant html+css+js assets to import into a schema-viz subdir in repo and adapt/debug/test as needed.
• ⚡ @brynnz22 run through schematic command line to provide the relevant data files and move the files to the correct location. Details:
  • There are several viz-related CLI options. Confirmed that the commands to use, from the root of the repo, are:
    • schematic viz -c config.yml tangled_tree_layers -ft component to get a JSON file. Rename this to just nf-research-tools.json.
    • schematic viz -c config.yml attributes to get a csv file. Rename this to just nf-research-tools-attributes.csv.

visualization
└── nf-research-tools.jsonld
    ├── merged_csv
    │   └── nf-research-tools.jsonldattributes_data.vis_data.csv
    ├── tangled_tree_json
    │   └── nf-research-tools.jsonld_component_tangled_tree.json
    └── text_csv

• Move data files to live with the code under the schema-viz/data directory, so we have something that looks like this:

schema-viz
├── data
│   ├── nf-research-tools-attributes.csv
│   └── nf-research-tools.json
├── index.html
├── js
│   ├── chart.js
│   ├── collapsibleTangleTree.js
│   ├── DrawTable.js
│   ├── PrepareRender.js
│   └── utils.js
└── style.css

• In schema-viz as working directory, preview with python3 -m http.server ².
• 🤔 Future enhancement: write a script that consolidates these steps to make the viz data files, rename them, move them to the correct location, and clean up all the byproduct intermediates *schema.json files. (e.g. called update_viz_data.py or update_viz_data.sh)
• 🤖 @anngvu set up GitHub pages publishing to publish from schema-viz subdir, see docs.
  • 🤔 Future enhancement: update CI workflow to automate viz data updates using update_viz_data.py³.
• @brynnz22 submit the pull request and have @allaway review.

Extra Notes

1. The interactive figure can be included very easily in any static HTML site as seen with example. If using Confluence app for docs, use an iframe. However, using D3.js in React-based sites needs extra work (see this article).
2. Alternatively, somewhat better for development is using nodejs http-server and specify no caching: http-server -c-1.
3. Per Mialy, making sure that visualization doesn't break with model updates is a nice informal enforcement to ensure directed acyclic graph (DAG) -- which is not something formally checked via schematic yet.

[anngvu]

@brynnz22 Checkout branch https://github.com/nf-osi/nf-research-tools-schema/tree/feat/schema-viz-dev and try second step. Can cover any questions tomorrow.