wip - compare mode

public/zones/zones.yaml

@@ -12,7 +12,7 @@
 SF-2454:
   url: /zones/dist15.geojson.gz
   lookup: TAZ
-  sizes: 981,2454,2475,3717
+  sizes: 981,2454,2475,3681,3717
 
 MTC-1454:
   url: /zones/mtc1454.geojson.gz

src/plugins/matrix/ComparisonSelector.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+.comparison-selector
+  b-dropdown(aria-role="list" @change="$emit('change', $event)")
+      template(#trigger="{active}")
+        b-button.is-small(
+          :icon-right="active ? 'menu-up' : 'menu-down'"
+        ) Compare
+
+      b-dropdown-item(aria-role="listitem" :value="matrix"
+        v-for="matrix in comparators" :key="`${matrix.root}/${matrix.subfolder}/${matrix.filename}`"
+      )
+        .media
+          i.fa.fa-layer-group
+          .media-content
+            //- i.fa.fa-times(style="float: right")
+            h3.diffFile {{ matrix.filename }}
+            small {{ `${matrix.root}/${matrix.subfolder}` }}
+
+      b-dropdown-item(:value="false" aria-role="listitem" custom)
+        hr.divider
+
+      b-dropdown-item(aria-role="listitem" @click="addToComparators")
+        i.fa.fa-exchange-alt
+        span &nbsp;&nbsp;&nbsp;Set this file as a base for comparisons
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { ComparisonMatrix } from './MatrixViewer.vue'
+
+const MyComponent = defineComponent({
+  name: 'GeographySelector',
+  components: {},
+  props: {
+    comparators: { type: Array as PropType<ComparisonMatrix[]> },
+  },
+  data() {
+    return {
+      active: false,
+      filename: '',
+      filenameShapes: '',
+      colormap: 'Viridis',
+    }
+  },
+  mounted() {},
+  computed: {},
+  watch: {
+    filenameShapes() {
+      this.$emit('shapes', this.filenameShapes)
+    },
+  },
+  methods: {
+    addToComparators() {
+      this.$emit('addBase')
+    },
+  },
+})
+
+export default MyComponent
+</script>
+
+<style scoped lang="scss">
+@import '~/bulma/css/bulma.min.css';
+@import '~/buefy/dist/buefy.css';
+@import '@/styles.scss';
+
+$bgBeige: #636a67;
+$bgLightGreen: #d2e4c9;
+$bgLightCyan: #effaf6;
+$bgDarkerCyan: #def3ec;
+
+.comparison-selector {
+  margin-top: 1px;
+  display: flex;
+  flex-direction: row;
+}
+
+.fa-layer-group {
+  padding: 8px 8px 8px 0;
+}
+
+.diffFile {
+  margin-bottom: -4px;
+}
+
+.divider {
+  padding: 0;
+  margin: 0;
+}
+
+.dropdown-item {
+  padding-inline-end: 1rem !important;
+}
+</style>

src/plugins/matrix/ConfigPanel.vue

@@ -7,15 +7,14 @@
   //- which view
   .flex-row
     b-field.which-data
-      b-button.button.is-small(:type="isMap ? 'is-warning' : 'is-gray is-outlined'"
+      b-button.button.is-small(:type="!isMap ? 'is-info' : 'is-outlined is-info'"
+                      @click="$emit('setMap',false)")
+        i.fa.fa-border-none
+        span  Data
+      b-button.button.is-small(:type="isMap ? 'is-info' : 'is-info is-outlined'"
                       @click="$emit('setMap',true)")
         i.fa.fa-map
         span  Map
-      b-button.button.is-small(:type="!isMap ? 'is-warning' : 'is-gray is-outlined'"
-                      @click="$emit('setMap',false)")
-        i.fa.fa-ruler-combined
-        span  Data
-
 
     b-field.which-data(v-if="isMap")
       b-button.button.is-small(
@@ -26,16 +25,19 @@
         span  Row
 
       b-button.button.is-small(
-        :type="!mapConfig.isRowWise ? 'is-link' : 'is-gray is-outlined'"
+        :type="!mapConfig.isRowWise ? 'is-link' : 'is-link is-outlined'"
         @click="$emit('changeRowWise', false)"
       )
         i.fa.fa-bars(style="rotate: 90deg;")
         span  Col
 
-  //- .flex-column
-  //-   //- Shapefile selector
-  //-   b-input.binput(disabled placeholder="zones.geojson" v-model="filenameShapes")
-
+  //- Diff mode selector
+  .flex-column(v-if="isMap")
+    ComparisonSelector(
+      :comparators="comparators"
+      @addBase="$emit('addBase')"
+      @change="$emit('compare', $event)"
+    )
 
   //- Map configuration
   .flex-row.map-config(v-if="isMap")
@@ -65,16 +67,18 @@ import ColorMapSelector from '@/components/ColorMapSelector/ColorMapSelector'
 import { ColorMap } from '@/components/ColorMapSelector/models'
 import ScaleSelector from '@/components/ScaleSelector/ScaleSelector'
 import { ScaleType } from '@/components/ScaleSelector/ScaleOption'
+import ComparisonSelector from './ComparisonSelector.vue'
 
 export type ColorScaleType = Exclude<ScaleType, 'gamma'>
 
-import { MapConfig } from './MatrixViewer.vue'
+import { ComparisonMatrix, MapConfig } from './MatrixViewer.vue'
 
 const MyComponent = defineComponent({
   name: 'MatrixViewer',
-  components: { ScaleSelector, ColorMapSelector },
+  components: { ComparisonSelector, ScaleSelector, ColorMapSelector },
   props: {
     isMap: Boolean,
+    comparators: { type: Array as PropType<ComparisonMatrix[]> },
     mapConfig: { type: Object as PropType<MapConfig> },
   },
   data() {
@@ -87,12 +91,9 @@ const MyComponent = defineComponent({
       COLOR_SCALE_TYPES,
     }
   },
-  async mounted() {},
+  mounted() {},
   computed: {},
   watch: {
-    'globalState.isDarkMode'() {
-      // this.embedChart()
-    },
     filenameShapes() {
       this.$emit('shapes', this.filenameShapes)
     },

src/plugins/matrix/H5MapViewer.vue

@@ -83,6 +83,7 @@ const MyComponent = defineComponent({
   props: {
     fileApi: { type: Object as PropType<HTTPFileSystem> },
     buffer: { type: ArrayBuffer, required: true },
+    diffBuffer: { type: ArrayBuffer, required: false },
     subfolder: String,
     config: String,
     thumbnail: Boolean,
@@ -103,6 +104,7 @@ const MyComponent = defineComponent({
       features: [] as any,
       h5wasm: null as null | Promise<any>,
       h5zoneFile: null as null | H5WasmFile,
+      h5diffFile: null as null | H5WasmFile,
       h5file: null as any,
       isMapReady: false,
       layerId: Math.floor(1e12 * Math.random()),
@@ -153,6 +155,15 @@ const MyComponent = defineComponent({
       )
     },
 
+    async diffBuffer() {
+      console.log('DIFFBUFFGERER')
+      if (this.diffBuffer) {
+        this.h5diffFile = await this.initFile(this.diffBuffer)
+      } else {
+        this.h5diffFile = null
+      }
+    },
+
     'globalState.isDarkMode'() {
       // this.embedChart()
     },
@@ -335,17 +346,37 @@ const MyComponent = defineComponent({
       //TODO FIX THIS
       let offset = this.activeZone - 1
 
-      let values = [] as number[]
-      if (data) {
-        values = (
-          this.mapConfig.isRowWise
-            ? data.slice([[offset, offset + 1], []])
-            : data.slice([[], [offset, offset + 1]])
-        ) as number[]
+      try {
+        let values = [] as number[]
+        if (data) {
+          values = (
+            this.mapConfig.isRowWise
+              ? data.slice([[offset, offset + 1], []])
+              : data.slice([[], [offset, offset + 1]])
+          ) as number[]
+        }
+
+        // DIFF MODE
+        if (this.h5diffFile) {
+          let diffData = this.h5diffFile.get(key) as Dataset
+          let baseValues = [] as number[]
+          if (diffData) {
+            baseValues = (
+              this.mapConfig.isRowWise
+                ? diffData.slice([[offset, offset + 1], []])
+                : diffData.slice([[], [offset, offset + 1]])
+            ) as number[]
+          }
+          // do the diff
+          values = values.map((v, i) => v - baseValues[i])
+        }
+
+        this.dataArray = values
+        this.setColorsForArray()
+        this.setPrettyValuesForArray()
+      } catch (e) {
+        console.warn('Offset not found in HDF5 file:', offset)
       }
-      this.dataArray = values
-      this.setColorsForArray()
-      this.setPrettyValuesForArray()
     },
 
     setPrettyValuesForArray() {
@@ -428,7 +459,7 @@ const MyComponent = defineComponent({
       // which column has the TAZ ID
       this.zoneID = zoneSystem.lookup
 
-      return this.loadBoundaries(zoneSystem.url)
+      await this.loadBoundaries(zoneSystem.url)
     },
 
     async loadBoundaries(url: string) {

src/plugins/matrix/MatrixViewer.vue

@@ -3,11 +3,14 @@
   config-panel(
     :isMap="isMap"
     :mapConfig="mapConfig"
+    :comparators="comparators"
     @setMap="isMap=$event"
     @shapes="filenameShapes=$event"
     @changeColor="changeColor"
     @changeScale="mapConfig.scale=$event"
     @changeRowWise="mapConfig.isRowWise=$event"
+    @addBase="addBase"
+    @compare="compareToBase"
   )
 
   .main-area(
@@ -27,6 +30,7 @@
       :fileApi="fileApi"
       :subfolder="subfolder"
       :buffer="h5buffer"
+      :diffBuffer="h5DiffBuffer"
       :filenameH5="filename"
       :filenameShapes="filenameShapes"
       :shapes="shapes"
@@ -61,6 +65,12 @@ import ConfigPanel from './ConfigPanel.vue'
 import { ColorMap } from '@/components/ColorMapSelector/models'
 import { ScaleType } from '@/components/ScaleSelector/ScaleOption'
 
+export interface ComparisonMatrix {
+  root: string
+  subfolder: string
+  filename: string
+}
+
 export interface MapConfig {
   scale: ScaleType
   colormap: ColorMap
@@ -96,6 +106,7 @@ const MyComponent = defineComponent({
     return {
       title: '',
       description: '',
+      comparators: [] as ComparisonMatrix[],
       isDragging: false,
       isMap: true,
       h5wasm: null as null | Promise<any>,
@@ -105,6 +116,7 @@ const MyComponent = defineComponent({
       filenameShapes: '',
       shapes: null as null | any[],
       h5buffer: null as null | ArrayBuffer,
+      h5DiffBuffer: null as null | ArrayBuffer,
       useConfig: '',
       vizDetails: { title: '', description: '' },
       statusText: 'Loading...',
@@ -124,6 +136,8 @@ const MyComponent = defineComponent({
   async mounted() {
     await this.setupAvailableZoneSystems()
 
+    this.comparators = this.setupComparisons()
+
     this.debounceDragEnd = debounce(this.dragEnd, 500)
 
     this.useConfig = this.config || this.yamlConfig || '' // use whichever one was sent to us
@@ -210,6 +224,49 @@ const MyComponent = defineComponent({
       // padding: this.isMultipanel ? `6px ${rightPadding} 6px 6px` : '0px 0px',
     },
 
+    setupComparisons() {
+      const comparisons = localStorage.getItem('h5mapComparators')
+      if (!comparisons) return []
+
+      return JSON.parse(comparisons)
+    },
+
+    addBase() {
+      this.comparators = [
+        {
+          root: this.root,
+          subfolder: this.subfolder,
+          filename: this.filename,
+        },
+      ]
+      localStorage.setItem('h5mapComparators', JSON.stringify(this.comparators))
+    },
+
+    async compareToBase(base: ComparisonMatrix) {
+      console.log('COMPARE', base)
+
+      try {
+        const path = `${base.subfolder}/${base.filename}`
+        this.statusText = `Loading: ${base.filename}...`
+
+        const fileSystem: FileSystemConfig = this.$store.state.svnProjects.find(
+          (a: FileSystemConfig) => a.slug === base.root
+        )
+        const baseFileApi = new HTTPFileSystem(fileSystem, globalStore)
+
+        const blob = await baseFileApi.getFileBlob(path)
+        const buffer = await blob?.arrayBuffer()
+
+        this.h5DiffBuffer = buffer
+        this.statusText = ''
+        console.log({ h5DiffBuffer: this.h5DiffBuffer })
+      } catch (e) {
+        console.error('' + e)
+        this.h5DiffBuffer = null
+      }
+      this.statusText = ''
+    },
+
     async onDrop(event: any) {
       event.preventDefault()
       this.isDragging = false