bugfixes galore

wearepal · Dec 6, 2023 · 29e7ba7 · 29e7ba7
1 parent d7e9995
commit 29e7ba7
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 23 deletions.
diff --git a/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx b/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx
@@ -21,7 +21,7 @@ export const GenerateHistogram = ({ chartData }: HistogramProps) => {
 
     const xScale = d3
         .scaleLinear()
-        .domain([min, max + 10])
+        .domain([min, max])
         .range([0, boundsWidth])
 
     const yScale = d3

diff --git a/app/javascript/projects/analysis_panel_tools/subsection.ts b/app/javascript/projects/analysis_panel_tools/subsection.ts
@@ -4,7 +4,7 @@ import { createXYZ } from "ol/tilegrid"
 import { getArea } from "ol/sphere"
 import { fromExtent } from "ol/geom/Polygon"
 import { getColorStops } from "../reify_layer/model_output"
-import { median } from "mathjs"
+import { mean, median } from "mathjs"
 
 type Color = [number, number, number, number]
 
@@ -92,9 +92,10 @@ export function extentToChartData(colors: Color[] | undefined, model: BooleanTil
             const bins = histogram_bins
             const min = mapEntries[0][0]
             const max = mapEntries[mapEntries.length - 1][0]
-            const mediann = median(mapEntries.map((x) => x[0]))
+            const _median = median(mapEntries.map((x) => x[0]))
             const range = max - min
             const step = range / bins
+            const _mean = mean(mapEntries.map((x) => x[0]))
             counts = new Map()
             const fillMap = fillType ? getColorStops((fillType == "greyscale" ? "greys" : (fillType === "heatmap" ? "jet" : fillType)), 40).reverse() : undefined
             const [ds_min, ds_max] = [model.getStats().min, model.getStats().max]
@@ -121,9 +122,9 @@ export function extentToChartData(colors: Color[] | undefined, model: BooleanTil
                 sum,
                 min,
                 max,
-                median: mediann,
+                median: _median,
                 range,
-                mean: min + (range / 2),
+                mean: _mean,
                 mode: mapEntries.reduce((max, current) => {
                     return current[1] > max[1] ? current : max
                 }, mapEntries[0])[0],

diff --git a/app/javascript/projects/modelling/tile_grid.ts b/app/javascript/projects/modelling/tile_grid.ts
@@ -2,6 +2,7 @@ import { mean, mode } from "mathjs"
 import { Extent } from "ol/extent"
 import { createXYZ } from "ol/tilegrid"
 import { registerSerializer } from "threads"
+import { getMedianCellSize } from "./components/cell_area_component"
 
 function validateZoom(zoom: number) {
   if (!(
@@ -37,6 +38,8 @@ export interface tileGridStats {
   max: number
   type: "BooleanTileGrid" | "NumericTileGrid" | "CategoricalTileGrid" | undefined
   labels?: Array<any>
+  zoom: number
+  area: number
 }
 
 export interface TileGridJSON {
@@ -197,7 +200,9 @@ export class BooleanTileGrid extends TileGrid {
     return {
       min: 0,
       max: 1,
-      type: "BooleanTileGrid"
+      type: "BooleanTileGrid",
+      zoom: this.zoom,
+      area: getMedianCellSize(this)
     }
   }
 
@@ -291,7 +296,9 @@ export class NumericTileGrid extends TileGrid {
     return {
       min: min,
       max: max,
-      type: "NumericTileGrid"
+      type: "NumericTileGrid",
+      zoom: this.zoom,
+      area: getMedianCellSize(this)
     }
   }
 
@@ -410,7 +417,9 @@ export class CategoricalTileGrid extends TileGrid {
       min,
       max,
       type: "CategoricalTileGrid",
-      labels: Array.from(this.labels, ([name, value]) => ({ name, value }))//this.labels
+      labels: Array.from(this.labels, ([name, value]) => ({ name, value })),//this.labels
+      zoom: this.zoom,
+      area: getMedianCellSize(this)
     }
   }
 

diff --git a/app/javascript/projects/project_editor.tsx b/app/javascript/projects/project_editor.tsx
@@ -181,7 +181,7 @@ export function ProjectEditor({ projectId, projectSource, backButtonPath, dbMode
                 getLayerData={(layer: ModelOutputLayer | DatasetLayer) => {
                   const cache = layer.type === "ModelOutputLayer" ? modelOutputCache : datasetOutputCache
                   const id = layer.type === "ModelOutputLayer" ? layer.nodeId : layer.id
-                  return cache[id] ? cache[id].getStats() : { min: 0, max: 0, type: undefined }
+                  return cache[id] ? cache[id].getStats() : { min: 0, max: 0, type: undefined, zoom: 0, area: 0 }
                 }}
                 setSelectedLayer={setSelectedLayer}
                 selectedLayer={selectedLayer}

diff --git a/app/javascript/projects/sidebar.tsx b/app/javascript/projects/sidebar.tsx
@@ -194,14 +194,27 @@ function ModelOutputLayerSettings({ layer, mutate, layerType }: ModelOutputLayer
   }
 }
 
+export function ZoomData({zoom, area}) {
+  const resolutionPerPixel = Math.round(Math.sqrt(area))
+  return (
+    <>
+      <div className="pl-3 pb-2">
+        Zoom level: {zoom} <br />
+        Area per cell: ~{Math.round(area)}m² <br />
+        Resolution per cell: ~{resolutionPerPixel}m
+      </div>
+    </>
+  )
+}
+
 interface ModelOutputLayerLegendProps {
   layer: ModelOutputLayer | DatasetLayer
   getLayerData: (layer: DatasetLayer | ModelOutputLayer) => tileGridStats
   mutateColors: (color: [number, number, number, number][]) => void
   updateBounds: (overrideBounds: boolean, bounds: [min: number, max: number]) => void
 }
 
-export function Legend({ colors, minValue, maxValue, type, labels, mutateColors, updateBounds, overrideBounds, bounds }) {
+export function Legend({ colors, minValue, maxValue, type, labels, mutateColors, updateBounds, overrideBounds, bounds, zoom, area }) {
 
   if (type === undefined) {
     // if layer is still loading stats will be unavailable.
@@ -212,19 +225,22 @@ export function Legend({ colors, minValue, maxValue, type, labels, mutateColors,
     const data = [{ color: colors[0], label: "False" }, { color: colors[colors.length - 1], label: "True" }]
 
     return (
-      <div className="color-bar-container-cat">
-        <div className="color-bar-legend-cat">
-          {data.map(({ color, label }) => (
-            <div key={label} className="color-bar-label">
-              <div
-                style={{ backgroundColor: `rgb(${color.join(",")})` }}
-                className="color-bar-color-cat"
-              />
-              <div className="color-bar-label-text">{label}</div>
-            </div>
-          ))}
+      <>
+        <div className="color-bar-container-cat">
+          <div className="color-bar-legend-cat">
+            {data.map(({ color, label }) => (
+              <div key={label} className="color-bar-label">
+                <div
+                  style={{ backgroundColor: `rgb(${color.join(",")})` }}
+                  className="color-bar-color-cat"
+                />
+                <div className="color-bar-label-text">{label}</div>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
+        <ZoomData zoom={zoom} area={area} />
+      </>
     )
 
   } else if (type === "CategoricalTileGrid") {
@@ -274,6 +290,7 @@ export function Legend({ colors, minValue, maxValue, type, labels, mutateColors,
       }
 
       return (
+        <>
         <div className="color-bar-container-cat">
           <div className="color-bar-legend-cat">
             <div className='color-bar-label'>
@@ -303,6 +320,8 @@ export function Legend({ colors, minValue, maxValue, type, labels, mutateColors,
             ))}
           </div>
         </div>
+        <ZoomData zoom={zoom} area={area} />
+        </>
       )
 
     } else {
@@ -344,6 +363,7 @@ export function Legend({ colors, minValue, maxValue, type, labels, mutateColors,
     }
 
     return (
+      <>
       <div className="color-bar-container">
         <div className="color-bar">
           {colors.map((color) => (
@@ -400,6 +420,8 @@ export function Legend({ colors, minValue, maxValue, type, labels, mutateColors,
           </div>
         )}
       </div>
+      <ZoomData zoom={zoom} area={area} />
+      </>
     )
   }
 
@@ -413,7 +435,7 @@ function ModelOutputLayerLegend({ layer, getLayerData, mutateColors, updateBound
 
   return (
     <div>
-      <Legend colors={colors} minValue={stats.min} maxValue={stats.max} type={stats.type} labels={stats.labels} mutateColors={mutateColors} updateBounds={updateBounds} overrideBounds={layer.overrideBounds} bounds={layer.bounds} />
+      <Legend colors={colors} minValue={stats.min} maxValue={stats.max} type={stats.type} labels={stats.labels} mutateColors={mutateColors} updateBounds={updateBounds} overrideBounds={layer.overrideBounds} bounds={layer.bounds} zoom={stats.zoom} area={stats.area} />
     </div>
   )
 }