fix(ColorBy): Set color range based on LUT

Coloring by data array range doesn't work with vtkjs ParaView exports, since those files can specify a LUT to be used for all enclosed datasets. Instead, color by the LUT data range.
Kitware · Oct 16, 2020 · bd21948 · bd21948
1 parent 697e3d6
commit bd21948
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git a/src/components/controls/ColorBy/script.js b/src/components/controls/ColorBy/script.js
@@ -68,7 +68,6 @@ export default {
       available: '',
       colorBy: 'solid',
       arrays: [SOLID_COLOR],
-      arrayName: '',
       piecewiseFunction: null,
       solidColor: '#ffffff',
       lutImage: '',
@@ -77,10 +76,10 @@ export default {
       presetMenu: false,
       shift: 0, // simple transfer function shift
       dataRange: [0, 0],
-      origDataRange: [0, 0],
       interpolateScalarsBeforeMapping: true,
       colorToSlices: false,
       opacityToSlices: false,
+      originalLUTRanges: {}, // arrayname -> dataRange
     };
   },
   computed: {
@@ -121,6 +120,9 @@ export default {
       }
       return [0, 0];
     },
+    origDataRange() {
+      return this.originalLUTRanges[this.colorByName] ?? [];
+    },
   },
   watch: {
     interpolateScalarsBeforeMapping(value) {
@@ -131,22 +133,20 @@ export default {
         const myReps = this.$proxyManager
           .getRepresentations()
           .filter((r) => r.getInput() === this.source);
-        for (let i = 0; i < myReps.length; i++) {
-          myReps[i].setColorBy(this.colorByName, this.colorByLocation);
-
-          // why are we updating dataRange and interpolateScalarsBeforeMapping here?
-          const dataArray = myReps[i].getDataArray();
-          // solid coloring doesn't have a valid data array
-          if (dataArray) {
-            const dataRange = dataArray.getRange();
-            this.dataRange = dataRange; // We want to keep the current range
-            this.origDataRange = [...dataRange]; // copy
-          }
-          // Update interpolateScalarsBeforeMapping
-          this.interpolateScalarsBeforeMapping = myReps[
-            i
-          ].getInterpolateScalarsBeforeMapping();
+        myReps.forEach((rep) =>
+          rep.setColorBy(this.colorByName, this.colorByLocation)
+        );
+
+        if (this.colorByName) {
+          const lutProxy = this.$proxyManager.getLookupTable(this.colorByName);
+          this.setDataRange(lutProxy.getDataRange());
         }
+
+        this.interpolateScalarsBeforeMapping = myReps.reduce(
+          (flag, rep) => flag || rep.getInterpolateScalarsBeforeMapping(),
+          false
+        );
+
         this.$proxyManager.renderAllViews();
         this.setPreset();
       }
@@ -176,9 +176,6 @@ export default {
       }
     },
     dataRange() {
-      for (let i = 0; i < 2; i++) {
-        this.dataRange[i] = Number(this.dataRange[i] || 0);
-      }
       this.applyColorMap();
     },
   },
@@ -195,9 +192,6 @@ export default {
   },
   beforeDestroy() {
     document.removeEventListener('keyup', this.onEsc);
-    // while (this.subscriptions.length) {
-    //   this.subscriptions.pop().unsubscribe();
-    // }
   },
   methods: {
     updateRepProperty(fieldName, ...args) {
@@ -287,13 +281,13 @@ export default {
       );
     },
     setPreset() {
-      if (this.arrayName) {
-        const lutProxy = this.$proxyManager.getLookupTable(this.arrayName);
+      if (this.colorByName) {
+        const lutProxy = this.$proxyManager.getLookupTable(this.colorByName);
         this.presetName = lutProxy.getPresetName();
         // hasPresetOpacity is derived from presetName
         if (this.hasPresetOpacity) {
           const pwfProxy = this.$proxyManager.getPiecewiseFunction(
-            this.arrayName
+            this.colorByName
           );
           // compute shift based on saved pwfProxy data range
           const pwfRange = pwfProxy.getDataRange();
@@ -328,8 +322,6 @@ export default {
         const rep = repGeometry || repVolume;
         const colorByValue = rep.getColorBy();
 
-        this.arrayName = colorByValue[0];
-
         // only get name and location of colorBy array
         if (colorByValue.length) {
           this.colorBy = colorByValue.slice(0, 2).join('--:|:--');
@@ -348,10 +340,6 @@ export default {
           );
         }
 
-        if (rep.getDataArray()) {
-          this.origDataRange = rep.getDataArray().getRange();
-        }
-
         if (this.available === 'geometry') {
           this.solidColor = vtkMath.floatRGB2HexCode(repGeometry.getColor());
         }
@@ -369,23 +357,27 @@ export default {
       this.setPreset();
 
       // set data range
-      if (this.arrayName) {
-        const lutProxy = this.$proxyManager.getLookupTable(this.arrayName);
-        this.dataRange = lutProxy.getDataRange();
+      if (this.colorByName) {
+        const lutProxy = this.$proxyManager.getLookupTable(this.colorByName);
+        this.saveOriginalRange({
+          arrayName: this.colorByName,
+          dataRange: lutProxy.getDataRange(),
+        });
+        this.setDataRange(lutProxy.getDataRange());
       }
     },
-    setRange(index, value) {
+    setDataRangeIndex(index, value) {
       const v = Number.parseFloat(value);
       if (!Number.isNaN(v)) {
         const newRange = [...this.dataRange];
         newRange[index] = value;
         if (newRange[0] < newRange[1]) {
-          this.dataRange = newRange;
+          this.setDataRange(newRange);
         }
       }
     },
     resetDataRange() {
-      this.dataRange = this.origDataRange.slice();
+      this.setDataRange(this.origDataRange);
       this.$proxyManager.renderAllViews();
     },
     applyColorToSlices(color) {
@@ -413,5 +405,8 @@ export default {
 
       this.$proxyManager.renderAllViews();
     },
+    setDataRange(dataRange) {
+      this.dataRange = [Number(dataRange[0]) || 0, Number(dataRange[1]) || 0];
+    },
   },
 };
diff --git a/src/components/controls/ColorBy/template.html b/src/components/controls/ColorBy/template.html
@@ -65,7 +65,7 @@
               :class="$style.negativeTopSpacing"
               hide-details
               :value="dataRange[0]"
-              @input="setRange(0, $event)"
+              @input="setDataRangeIndex(0, $event)"
             />
           </v-flex>
           <v-flex
@@ -106,7 +106,7 @@
               reverse
               hide-details
               :value="dataRange[1]"
-              @input="setRange(1, $event)"
+              @input="setDataRangeIndex(1, $event)"
             />
           </v-flex>
         </template>