• fix: increase width to encompass new wider tree
• feat: update clades to 2021-12-21
• feat: add py script to auto generate clade.json from clades_hierarchy.tsv
• feat: add clade creation github action
• fix: upgrade pip, use correct script path
• feat: update clades.svg to 2021-12-21

doesn't this pin require manual updates of the code whenever we add a new clade? @corneliusroemer

https://github.com/nextstrain/ncov-clades-schema/blob/master/src/generate_clades_json.py#L10

• fix: increase width to encompass new wider tree
• feat: update clades to 2021-12-21
• feat: add py script to auto generate clade.json from clades_hierarchy.tsv
• feat: add clade creation github action

• fix: increase width to encompass new wider tree
• feat: update clades to 2021-12-21
• feat: add py script to auto generate clade.json from clades_hierarchy.tsv

This aims to reimplement rendering logic of the schema without using D3.js, such that we have more control on the schema layout.

• [x] remove d3.js DOM functions, use React instead
• [x] convert clades.json to a new format that can support clades
• [ ] reimplement graph construction (calculate node and edge positions), without using d3.js hierarchy functions: in particular allowing multiple parents (to show recombination relationships), and perhaps arbitrary graphs in general
• [ ] render various attributes of nodes and edges (to be discussed) - using text, tooltips, graphics, color, animation etc
• [ ] size nodes according to some metric (e.g. total number of observed sequences)
• [ ] render the graph into an SVG file, for static usage
• [ ] package the interactive React components into an NPM package, to be used in React apps where we currently use the static SVG (Nextclade, CoVariants, perhaps on Nextstrain.org somewhere as well)
• [ ] CI: automatically release SVGs to GitHub Releases
• [ ] CI: automatically release NPM package

Description of proposed changes

This PR does several things:

• it simplifies the code and removes many dependencies; much of this is not needed if the desired output is only a static SVG file
• it enables headless creation of SVGs, without needing a browser (Issue #1 )
• it determines bounds automatically (Issue #8), without the need to manually adjust size parameters when the tree grows

Related issue(s)

This addresses Issues #1 and #8.

Testing

Pull the code, install the dependencies, and run node src/createCladesSchema.js.

This will generate an SVG like:

Opening the file in a web browser, and using the developer tools to set the SVG's width to a fixed value (e.g. 500px), and border to solid shows that it looks centered:

I haven't tested this in Docker

Right now the width of the graphic has to be set manually.

It would be great if the width was determined automatically.

Even if that's not possible, the graph should be centered. Right now it seems to be left aligned:

Attempts to resolve #1

These are my messy attempts to render the d3 schema into svg without running it in the browsers, i.e. under Node.js.

Neither JSDOM nor SVGDOM worked due to some of the SVG-related DOM functions used in D3 not being implemented in these environments.

Perhaps someone else could give it a try?

We may automate generation of SVG on clade.json updates, such that the changes automatically propagate to all projects using the schema.

This will require the code to run in Node.js.

There are also more hacky ways to automate it in a browser environment, like using puppeteer or Cypress.