fix: Sankey ordering should be based on data input, not inconsistent

- Fixes simwrapper#114

package.json

@@ -36,7 +36,7 @@
     "d3-array": "^3.1.1",
     "d3-hexbin": "^0.2.2",
     "d3-request": "^1.0.6",
-    "d3-sankey-diagram": "^0.7.3",
+    "d3-sankey-diagram": "^0.8.0",
     "d3-scale": "^3.2.2",
     "d3-scale-chromatic": "^1.5.0",
     "d3-selection": "^1.4.1",

src/plugins/sankey/SankeyDiagram.vue

@@ -37,7 +37,6 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import globalStore from '@/store'
 import { FileSystemConfig, VisualizationPlugin } from '@/Globals'
 import HTTPFileSystem from '@/js/HTTPFileSystem'
-import { Context } from 'react'
 
 interface SankeyYaml {
   csv: string
@@ -211,22 +210,30 @@ class MyComponent extends Vue {
     }
 
     // build js object
-    const answer: {
-      nodes: { id: any; title: string }[]
-      links: { source: any; target: any; value: number }[]
-    } = { nodes: [], links: [] }
+    const fromOrder = [] as number[]
+    const toOrder = [] as number[]
+
+    const answer = {
+      nodes: [] as { id: any; title: string }[],
+      links: [] as { source: any; target: any; value: number }[],
+      // alignTypes: true,
+      ordering: [[fromOrder], [toOrder]],
+    }
 
     const fromLookup: any = {}
     const toLookup: any = {}
 
-    fromNodes.forEach((value: string, i: number) => {
-      answer.nodes.push({ id: i, title: value })
-      fromLookup[value] = i
+    fromNodes.forEach((title: string, i: number) => {
+      answer.nodes.push({ id: i, title })
+      fromLookup[title] = i
+      fromOrder.push(i)
     })
 
-    toNodes.forEach((value: string, i: number) => {
-      answer.nodes.push({ id: i + fromNodes.length, title: value })
-      toLookup[value] = i + fromNodes.length
+    toNodes.forEach((title: string, i: number) => {
+      const offset = i + fromNodes.length
+      answer.nodes.push({ id: offset, title })
+      toLookup[title] = offset
+      toOrder.push(offset)
     })
 
     for (const link of links) {
@@ -267,8 +274,8 @@ class MyComponent extends Vue {
 
   private doD3() {
     const data = this.jsonChart
-    data.alignTypes = true
-    data.alignLinkTypes = true
+    // data.alignTypes = true
+    // data.alignLinkTypes = true
 
     // figure out dimensions, depending on if we are in a dashboard or not
     let box = document.querySelector(`#${this.cleanConfigId}`) as Element
@@ -279,6 +286,7 @@ class MyComponent extends Vue {
 
     const layout = sankey()
       .nodeWidth(8)
+      .ordering(data.ordering)
       .extent([
         [labelWidth, 0],
         [width - labelWidth, height],