fix(links): diff mode better, but still WIP

- More or less working, assuming you have separate csvFile and csvBase
datasets.

- Colors still ignore color palettes

- Still need to handle case where you have a column of differences instead
  of two datasets with similar columns to be compared.

src/components/viz-configurator/Colors.vue

@@ -186,7 +186,7 @@ export default class VueComponent extends Vue {
   }
 
   private datasetChoices(): string[] {
-    return this.datasetLabels
+    return this.datasetLabels.filter(label => label !== 'csvBase')
   }
 
   private columnsInDataset(datasetId: string): string[] {

src/components/viz-configurator/VizConfigurator.vue

@@ -153,12 +153,13 @@ export default class VueComponent extends Vue {
       description: this.vizDetails.description,
       network: this.vizDetails.network || this.vizDetails.geojsonFile,
       projection: this.vizDetails.projection,
+      showDifferences: this.vizDetails.showDifferences,
       sampleRate: this.vizDetails.sampleRate,
       datasets: { ...this.vizDetails.datasets },
       display: { ...this.vizDetails.display },
     } as any
 
-    // remove blank values
+    // remove blank and false values
     for (const prop of Object.keys(config)) if (!config[prop]) delete config[prop]
     if (config.display.color) {
       delete config.display.color?.colorRamp?.style

src/components/viz-configurator/Widths.vue

@@ -114,7 +114,7 @@ export default class VueComponent extends Vue {
   }
 
   private get datasetChoices(): string[] {
-    return this.datasetLabels
+    return this.datasetLabels.filter(label => label !== 'csvBase')
   }
 
   private numericColumnsInDataset(datasetId: string): string[] {

src/plugins/links-gl/LinkLayer.tsx

@@ -63,7 +63,7 @@ export default function Component({
     : scaleThreshold().range(colorsAsRGB).domain(domain)
 
   // this assumes that zero means hide the link. This may not be generic enough
-  const colorPaleGrey = dark ? [80, 80, 80, 96] : [212, 212, 212, 96]
+  const colorPaleGrey = dark ? [80, 80, 80, 96] : [212, 212, 212]
   const colorInvisible = [0, 0, 0, 0]
 
   // register setViewState in global view updater
@@ -96,7 +96,7 @@ export default function Component({
 
     // comparison?
     if (showDiffs) {
-      const baseValue = base.dataTable[base.activeColumn].values[objectInfo.index]
+      const baseValue = base.dataTable[base.activeColumn].values[csvRow]
       const diff = value - baseValue
 
       if (diff === 0) return colorPaleGrey // setColorBasedOnValue(0.5)
@@ -111,8 +111,6 @@ export default function Component({
   }
 
   // --- LINE WIDTHS -----------------------------------------------
-  // --> 2 pixels if no line width at all
-  // --> Scaled up to 50 pixels, scaled vs. maxWidth
   const getLineWidth = (
     feature: any,
     objectInfo: { index: number; data: any; target: number[] }
@@ -123,7 +121,7 @@ export default function Component({
     const value = widthValues.values[csvRow]
 
     if (showDiffs) {
-      const baseValue = base.dataTable[base.activeColumn].values[objectInfo.index]
+      const baseValue = base.dataTable[base.activeColumn].values[csvRow]
       const diff = Math.abs(value - baseValue)
       return diff / scaleWidth
     } else {
@@ -141,61 +139,62 @@ export default function Component({
     globalStore.commit('setMapCamera', view)
   }
 
-  function getTooltip({ object, index }: { object: any; index: number }) {
+  function precise(x: number) {
+    return x.toPrecision(5)
+  }
+
+  function buildTooltipHtml(column: DataTableColumn, index: number) {
     try {
-      // tooltip colors------------
-      let html = (() => {
-        if (!activeColumn) return ''
+      if (!column) return null
 
-        let value = buildColumn.values[index]
+      let value = column.values[index]
+      let baseValue = base ? base.dataTable[column.name].values[index] : null
 
-        if (isCategorical) {
-          if (value === undefined) return ''
-          return `<b>${activeColumn}</b><p>${value}</p>`
-        }
+      if (isCategorical) {
+        if (!Number.isFinite(value)) return null
+        return `<b>${column.name}</b><p>${value}</p>`
+      }
 
-        let baseValue = 0
-        let diff = undefined
+      let html = null
 
-        if (showDiffs) {
-          const baseValue = base.dataTable[base.activeColumn].values[index]
-          diff = value - baseValue
-        } else {
-          if (value === undefined) return ''
-        }
+      if (Number.isFinite(value)) html = `<b>${column.name}</b><p>Value: ${precise(value)}</p>`
 
-        const roundValue = Math.round(value * 10000.0) / 10000.0
-        const roundDiff = diff ? Math.round(diff * 10000.0) / 10000.0 : diff
-        const baseElement = baseValue ? `<p>+/- Base: ${roundDiff}</p>` : ''
+      let diff = value - baseValue
+      if (Number.isFinite(baseValue)) {
+        html += `<p>Base: ${precise(baseValue)}</p>`
+        html += `<p>+/- Base: ${precise(diff)}</p>`
+      }
 
-        return `<b>${activeColumn}</b>
-                <p>${roundValue}</p>
-                ${baseElement}`
-      })()
+      return html
+    } catch (e) {
+      return null
+    }
+  }
 
-      // tooltip widths------------
-      html += (() => {
-        let widthValue = '' as any
-        let widthColumnName = ''
+  function getTooltip({ object, index }: { object: any; index: number }) {
+    // tooltip will show values for color settings and for width settings.
+    // if there is base data, it will also show values and diff vs. base for both color and width.
 
-        const value = widthValues.values[index]
-        if (value == undefined) return ''
+    try {
+      // tooltip color valuess------------
+      const csvRow = numCsvRows ? csvRowFromLinkRow[index] : index
+      let tooltip = buildTooltipHtml(buildColumn, csvRow)
 
-        if (widthValues !== buildColumn) {
-          widthValue = Math.round(widthValues.values[index] * 10000.0) / 10000.0
-          widthColumnName = widths.activeColumn || 'N/A'
-        }
-        return `<b>${widthColumnName}</b>
-                <p>${widthValue}</p>`
-      })()
+      // tooltip widths------------
+      if (widthValues && widthValues.name !== buildColumn.name) {
+        const csvRow = widthRowLookup.length ? widthRowLookup[index] : index
+        const widthTip = buildTooltipHtml(widthValues, csvRow)
+        if (widthTip) tooltip = tooltip ? tooltip + widthTip : widthTip
+      }
 
-      if (!html) return null
+      if (!tooltip) return null
 
       return {
-        html,
+        html: tooltip,
         style: { color: dark ? '#ccc' : '#223', backgroundColor: dark ? '#2a3c4f' : 'white' },
       }
     } catch (e) {
+      console.warn(e)
       return null
     }
   }

src/plugins/links-gl/LinkVolumes.vue

@@ -13,7 +13,7 @@
         :widths="csvWidth"
         :dark="isDarkMode"
         :scaleWidth="scaleWidth"
-        :showDiffs="showDiffs"
+        :showDiffs="vizDetails.showDifferences"
         :viewId="linkLayerId"
     )
 
@@ -45,17 +45,17 @@
             :vizDetails="vizDetails"
             :csvData="csvWidth"
             :scaleWidth="scaleWidth"
-            :showDiffs="showDiffs"
+            :showDiffs="vizDetails.showDifferences"
             @colors="clickedColorRamp"
             @column="handleNewDataColumn"
             @slider="handleNewDataColumn"
           )
 
         //- DIFF checkbox
-        .panel-item.diff-section(v-if="csvBase.dataTable._LINK_OFFSET_")
-          toggle-button.toggle(:width="40" :value="showDiffs" :labels="false"
+        .panel-item.diff-section(v-if="vizDetails.datasets.csvBase")
+          toggle-button.toggle(:width="40" :value="vizDetails.showDifferences" :sync="true" :labels="false"
             :color="{checked: '#4b7cc4', unchecked: '#222'}"
-            @change="showDiffs = !showDiffs")
+            @change="toggleShowDiffs")
           p: b {{ $t('showDiffs') }}
 
         //- FilterPanel.filter-panel(v-if="vizDetails.useSlider"
@@ -153,6 +153,7 @@ class MyPlugin extends Vue {
     csvBase: '',
     datasets: {} as { [id: string]: string },
     useSlider: false,
+    showDifferences: false,
     shpFile: '',
     dbfFile: '',
     network: '',
@@ -174,7 +175,6 @@ class MyPlugin extends Vue {
   private linkLayerId = Math.random()
 
   private scaleWidth = 0
-  private showDiffs = false
   private showTimeRange = false
 
   private geojsonData = {
@@ -250,6 +250,7 @@ class MyPlugin extends Vue {
     const filename = this.myState.yamlConfig
 
     const emptyState = {
+      showDifferences: false,
       datasets: {} as any,
       display: { color: {} as any, width: {} as any },
     }
@@ -342,6 +343,10 @@ class MyPlugin extends Vue {
     return this.csvData.activeColumn || 'Loading...'
   }
 
+  private toggleShowDiffs() {
+    this.vizDetails.showDifferences = !this.vizDetails.showDifferences
+  }
+
   private clickedColorRamp(color: string) {
     // this.selectedColorRamp = color
   }
@@ -665,29 +670,27 @@ class MyPlugin extends Vue {
   private handleDatasetisLoaded(datasetId: string) {
     const datasetKeys = Object.keys(this.datasets)
 
-    // first dataset
-    if (datasetKeys.length === 1) {
+    if (datasetId === 'csvBase' || datasetId === 'base') {
+      // is base dataset:
+      this.csvBase = {
+        dataTable: this.datasets[datasetId],
+        csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId],
+        activeColumn: '',
+      }
+      // this.vizDetails.showDifferences = true
+    } else if (this.csvData.activeColumn === '') {
+      // is first non-base dataset:
       // set a default view, if user didn't pass anything in
       if (!this.vizDetails.display.color && !this.vizDetails.display.width) {
         const firstColumnName = Object.values(this.datasets[datasetId])[0].name
         this.csvData = {
           dataTable: this.datasets[datasetId],
-          activeColumn: firstColumnName,
           csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId],
+          activeColumn: firstColumnName,
         }
       }
     }
 
-    // base dataset
-    if (datasetId === 'csvBase' || datasetId === 'base') {
-      this.csvBase = {
-        dataTable: this.datasets[datasetId],
-        activeColumn: '',
-        csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId],
-      }
-      this.showDiffs = true
-    }
-
     // last dataset
     if (datasetKeys.length === Object.keys(this.vizDetails.datasets).length) {
       this.isDataLoaded = true