Merge pull request #216 from wearepal/load-datasets-NaN-values

Loading datasets in a different extent/zoom, handling of NaN in visualisations.
wearepal · Nov 29, 2023 · b0f2e27 · b0f2e27
2 parents dd5c4f8 + b448b61
commit b0f2e27
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/app/javascript/projects/modelling/components/dataset_component.ts b/app/javascript/projects/modelling/components/dataset_component.ts
@@ -6,6 +6,7 @@ import { BaseComponent } from "./base_component"
 import { SelectControl } from "../controls/select"
 import { CompiledDatasetRecord, getDataset } from "../../saved_dataset"
 import { Extent } from "ol/extent"
+import { createXYZ } from "ol/tilegrid"
 
 async function fetchDataset(datasetId: number, teamId: number) {
     return new Promise<{ error: { message: string }; out: { model: BooleanTileGrid | NumericTileGrid | CategoricalTileGrid } }>((resolve) => {
@@ -27,8 +28,6 @@ export class PrecompiledModelComponent extends BaseComponent {
         super("Load Dataset")
         this.category = "Inputs"
         this.modelSource = getDatasets
-
-        //TODO: Use these.
         this.projectExtent = projectExtent
         this.projectZoom = projectZoom
     }
@@ -90,7 +89,31 @@ export class PrecompiledModelComponent extends BaseComponent {
                 if (response.error) {
                     editorNode.meta.errorMessage = response.error.message;
                 } else {
-                    outputs['out'] = editorNode.meta.output = response.out;
+                    const model = response.out;
+
+                    const tileGrid = createXYZ()
+                    const outputTileRange = tileGrid.getTileRangeForExtentAndZ(this.projectExtent, this.projectZoom)
+
+                    if (model instanceof BooleanTileGrid) {
+                        const out = outputs['out'] = editorNode.meta.output = new BooleanTileGrid(this.projectZoom, outputTileRange.minX, outputTileRange.minY, outputTileRange.getWidth(), outputTileRange.getHeight())
+                        out.iterate((x, y, v) => {
+                            let val = model.get(x, y, this.projectZoom) ? model.get(x, y, this.projectZoom) as boolean : false
+                            out.set(x, y, val)
+                        })
+                    } else if (model instanceof CategoricalTileGrid) {
+                        const out = outputs['out'] = editorNode.meta.output = new CategoricalTileGrid(this.projectZoom, outputTileRange.minX, outputTileRange.minY, outputTileRange.getWidth(), outputTileRange.getHeight(), undefined, model.labels)
+                        out.iterate((x, y, v) => {
+                            let val = model.get(x, y, this.projectZoom) ? model.get(x, y, this.projectZoom) as number : 255
+                            out.set(x, y, val)                        
+                        })
+                    } else if (model instanceof NumericTileGrid) {
+                        const out = outputs['out'] = editorNode.meta.output = new NumericTileGrid(this.projectZoom, outputTileRange.minX, outputTileRange.minY, outputTileRange.getWidth(), outputTileRange.getHeight(), NaN)
+                        out.iterate((x, y, v) => {
+                            let val = model.get(x, y, this.projectZoom) ? model.get(x, y, this.projectZoom) as number : NaN
+                            out.set(x, y, val)
+                        })
+                    }
+
                 }
             } catch (error) {
                 editorNode.meta.errorMessage = error.message;

diff --git a/app/javascript/projects/modelling/components/digital_model_component.ts b/app/javascript/projects/modelling/components/digital_model_component.ts
@@ -102,7 +102,7 @@ export class DigitalModelComponent extends BaseComponent {
                     let x = (outputTileRange.minX + i % image.getWidth())
                     let y = (outputTileRange.minY + Math.floor(i / image.getWidth()))
 
-                    out.set(x, y, (rasters[0][i]) === -32767 ? 0 : (rasters[0][i]))
+                    out.set(x, y, (rasters[0][i]) === -32767 ? NaN : (rasters[0][i]))
 
                 }
 

diff --git a/app/javascript/projects/modelling/controls/preview.tsx b/app/javascript/projects/modelling/controls/preview.tsx
@@ -29,8 +29,8 @@ const Preview = ({ getTileGrid }: PreviewProps) => {
 
       for (let x = 0; x < tileGrid.width; ++x) {
         for (let y = 0; y < tileGrid.height; ++y) {
-          const val = tileGrid.get(tileGrid.x + x, tileGrid.y + y)
-          ctx.fillStyle = isFinite(val) ? `rgba(255, 255, 255, ${(val - min) / (max - min)})` : '#FF0000'
+          let val = tileGrid.get(tileGrid.x + x, tileGrid.y + y)
+          ctx.fillStyle = isFinite(val) ? `rgba(255, 255, 255, ${(val - min) / (max - min)})` : 'rgba(255, 255, 255, 0)'
           ctx.fillRect(x, y, 1, 1)
         }
       }

diff --git a/app/javascript/projects/modelling/tile_grid.ts b/app/javascript/projects/modelling/tile_grid.ts
@@ -203,7 +203,7 @@ export class NumericTileGrid extends TileGrid {
   name: string | undefined
   private minMax: [number, number] | null
 
-  constructor(zoom: number, x: number, y: number, width: number, height: number, initialValue: number | Float32Array = 0) {
+  constructor(zoom: number, x: number, y: number, width: number, height: number, initialValue: number | Float32Array = NaN) {
     super(zoom, x, y, width, height)
     if (initialValue instanceof Float32Array) {
       this.data = initialValue

diff --git a/app/javascript/projects/reify_layer/model_output.ts b/app/javascript/projects/reify_layer/model_output.ts
@@ -40,6 +40,10 @@ class ModelOutputSource extends DataTileSource {
               }
             } else {
 
+
+              // for visualization purposes, we want to show NaN as 0, which will be transparent
+              if(isNaN(val)) val = 0 
+
               if (bounds) {
                 if (val > max) val = max
                 if (val < min) val = min