fix: Manual color breakpoints sometimes not honored

simwrapper · Apr 24, 2024 · 9e07d4f · 9e07d4f
1 parent 4d1595a
commit 9e07d4f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/viz-configurator/FillColors.vue b/src/components/viz-configurator/FillColors.vue
@@ -103,6 +103,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { debounce } from 'debounce'
 
 import globalStore from '@/store'
 import { VizLayerConfiguration, DataTable, DataType } from '@/Globals'
@@ -166,6 +167,7 @@ export default defineComponent({
       diffRelative: false,
       diffUISelection: '',
       diffChoices: [] as any[],
+      emitColorSpecification: {} as any,
       flip: false,
       isCurrentlyDiffMode: false,
       join: '',
@@ -177,6 +179,8 @@ export default defineComponent({
     }
   },
   mounted() {
+    this.emitColorSpecification = debounce(this.emitColorSpecificationDebounced, 150)
+
     this.selectedSingleColor = this.simpleColors[0]
     this.selectedColor = this.colorChoices[0]
     this.datasetLabels = Object.keys(this.vizConfiguration.datasets)
@@ -312,7 +316,7 @@ export default defineComponent({
       this.isCurrentlyDiffMode = !!this.diffUISelection
     },
 
-    emitColorSpecification() {
+    emitColorSpecificationDebounced() {
       // no fill
       if (!this.dataColumn) return
 
@@ -360,7 +364,7 @@ export default defineComponent({
         fill.colorRamp.breakpoints = this.vizConfiguration.display?.fill?.colorRamp?.breakpoints
       }
 
-      setTimeout(() => this.$emit('update', { fill }), 50)
+      this.$emit('update', { fill })
     },
 
     clickedSingleColor(swatch: string) {
@@ -374,7 +378,7 @@ export default defineComponent({
 
       // the viewer is on main thread so lets make
       // sure user gets some visual feedback
-      setTimeout(() => this.$emit('update', { fill }), 25)
+      this.$emit('update', { fill })
     },
 
     columnsInDataset(datasetId: string): string[] {

diff --git a/src/components/viz-configurator/LineColors.vue b/src/components/viz-configurator/LineColors.vue
@@ -102,6 +102,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { debounce } from 'debounce'
 
 import globalStore from '@/store'
 import { VizLayerConfiguration, DataTable, DataType } from '@/Globals'
@@ -166,6 +167,7 @@ export default defineComponent({
       diffRelative: false,
       diffUISelection: '',
       diffChoices: [] as any[],
+      emitColorSpecification: {} as any,
       flip: false,
       isCurrentlyDiffMode: false,
       join: '',
@@ -177,6 +179,8 @@ export default defineComponent({
     }
   },
   mounted() {
+    this.emitColorSpecification = debounce(this.emitColorSpecificationDebounced, 150)
+
     this.selectedSingleColor = this.simpleColors[0]
     this.selectedColor = this.colorChoices[0]
     this.datasetLabels = Object.keys(this.vizConfiguration.datasets)
@@ -312,7 +316,7 @@ export default defineComponent({
       this.isCurrentlyDiffMode = !!this.diffUISelection
     },
 
-    emitColorSpecification() {
+    emitColorSpecificationDebounced() {
       // no data
       if (!this.dataColumn) return
 
@@ -361,7 +365,7 @@ export default defineComponent({
           this.vizConfiguration.display?.lineColor?.colorRamp?.breakpoints
       }
 
-      setTimeout(() => this.$emit('update', { lineColor }), 50)
+      this.$emit('update', { lineColor })
     },
 
     clickedSingleColor(swatch: string) {
@@ -375,7 +379,7 @@ export default defineComponent({
 
       // the viewer is on main thread so lets make
       // sure user gets some visual feedback
-      setTimeout(() => this.$emit('update', { lineColor }), 50)
+      this.$emit('update', { lineColor })
     },
 
     columnsInDataset(datasetId: string): string[] {

diff --git a/src/plugins/shape-file/ShapeFile.vue b/src/plugins/shape-file/ShapeFile.vue
@@ -1042,8 +1042,6 @@ const MyComponent = defineComponent({
       const dataset2 = this.datasets[key2]
       const relative = !!color.relative
 
-      // console.log('999 DIFF', relative, key1, key2, dataset1, dataset2)
-
       if (dataset1 && dataset2) {
         // generate the lookup columns we need
         this.setupJoin({ datasetId: key1, dataTable: dataset1, dataJoinColumn: lookupColumn })
@@ -1084,6 +1082,7 @@ const MyComponent = defineComponent({
           style: color.colorRamp?.style || 0,
           reverse: color.colorRamp?.reverse || false,
           steps: color.colorRamp?.steps || 9,
+          breakpoints: color.colorRamp?.breakpoints,
         }
 
         // Calculate colors for each feature
@@ -1282,6 +1281,7 @@ const MyComponent = defineComponent({
         style: color.colorRamp?.style || 0,
         reverse: color.colorRamp?.reverse || false,
         steps: color.colorRamp?.steps || 9,
+        breakpoints: color.colorRamp?.breakpoints || undefined,
       }
 
       // Calculate colors for each feature