feat: convert clades.json tree into a graph

Here I  add a script to "flatten" the object hierarchy in `clades.json` into 2 lists: `nodes` and `edges` that represent the same hierarchy in a different way.

Every node now has an `id` (an arbitrary string). Every edge is directional and refers to its `source` and `target` noes by the node `id`. This representation will allow us to build arbitrary directed graphs instead of just trees (in particular, to allow showing recombinant relationships between clades)

I also split the composite Nextstrain name strings into the clade, lineages, who variant and other components. This should allows a richer display.

package.json

@@ -15,6 +15,7 @@
     "d3-flextree": "2.1.2",
     "d3-hierarchy": "3.1.2",
     "file-saver": "2.0.5",
+    "lodash": "4.17.21",
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -25,13 +26,16 @@
   "devDependencies": {
     "@types/d3": "7.1.0",
     "@types/file-saver": "2.0.4",
+    "@types/fs-extra": "9.0.13",
+    "@types/lodash": "4.14.187",
     "@types/node": "17.0.0",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.25",
     "eslint": "8.4.1",
     "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "8.3.0",
+    "fs-extra": "10.1.0",
     "prettier": "2.5.1",
     "ts-node": "10.4.0",
     "typescript": "4.5.4"

src/clades.json

@@ -1,22 +1,18 @@
 {
   "color": "#C8C8C8",
   "name": "19A (B)",
-  "lineages": ["B"],
   "children": [
     {
       "color": "#B8B8B8",
-      "name": "20A",
-      "lineages": ["B.1"],
+      "name": "20A (B.1)",
       "children": [
-        {
+      {
           "color": "#B0B0B0",
-          "name": "20B",
-          "lineages": ["B.1.1"],
+          "name": "20B (B.1.1)",
           "children": [
             {
               "color": "#D3B23F",
-              "name": "21M (Omicron)",
-              "lineages": ["B.1.1.529"],
+              "name": "21M (Omicron, B.1.1.529)",
               "children": [
                 {
                   "color": "#C5B945",
@@ -29,11 +25,10 @@
                     {
                       "color": "#E59638",
                       "name": "22B (Omicron, BA.5)",
-                      "children": [
+                      "children":[
                         {
                           "color": "#DF4628",
-                          "name": "22E (Omicron)",
-                          "lineages": ["BQ.1"]
+                          "name": "22E (Omicron, BQ.1)"
                         }
                       ]
                     },
@@ -141,8 +136,7 @@
     },
     {
       "color": "#C0C0C0",
-      "name": "19B",
-      "lineages": ["A"]
+      "name": "19B (A)"
     }
   ]
 }