Scale Bar

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - OMETiffLoader for reading ome-tiff files directly
+- Add scale bar (only for OMEXML for now)
 
 ### Changed
 

README.md

@@ -5,13 +5,6 @@ over the hood and WebGL under the hood. To learn more about the "theory" behind
 this, look at [this](image_rendering_docs/IMAGE_RENDERING.md). To really make this sing, you need to
 use an http2 server in production (s3 is passable, though).
 
-### Using this in your project
-
-In the interest of keeping this app as lightweight and extensible as possible,
-there are no dependencies except for peer dependencies, which you will need to specify in your project.
-The reason for this is primarily to support export external DeckGL setups so that
-you might combine our layer with your own.
-
 ### Build
 
 To build the component alone via `webpack` use `npm run-script build-component`.

demo/src/constants.js

@@ -1,5 +1,5 @@
 export const MAX_CHANNELS = 6;
-export const DEFAULT_VIEW_STATE = { zoom: -5.5, target: [30000, 10000, 0] };
+export const DEFAULT_VIEW_STATE = { zoom: -6, target: [25000, 10000, 0] };
 export const DEFAULT_OVERVIEW = {
   margin: 25,
   scale: 0.15,

documentation.yml

@@ -19,6 +19,7 @@ toc:
 - name: Layers
 - VivViewerLayer
 - StaticImageLayer
+- ScaleBarLayer
 - name: Loaders
 - ZarrLoader
 - OMETiffLoader

package.json

@@ -100,14 +100,14 @@
     "@deck.gl/layers": "^8.1.0",
     "@deck.gl/mesh-layers": "^8.1.0",
     "@deck.gl/react": "^8.1.0",
-    "geotiff": "git+https://github.com/ilan-gold/geotiff.js.git#master",
     "@loaders.gl/core": "^2.0.2",
     "@loaders.gl/loader-utils": "^2.0.2",
     "@luma.gl/constants": "^8.1.0",
     "@luma.gl/core": "^8.1.0",
     "@luma.gl/shadertools": "^8.1.0",
     "@mapbox/vector-tile": "^1.3.1",
     "fast-xml-parser": "^3.16.0",
+    "geotiff": "git+https://github.com/ilan-gold/geotiff.js.git#master",
     "math.gl": "^3.1.3",
     "nebula.gl": "^0.17.1",
     "pbf": "^3.2.1",

src/index.js

@@ -1,4 +1,4 @@
-import { VivViewerLayer, StaticImageLayer } from './layers';
+import { VivViewerLayer, StaticImageLayer, ScaleBarLayer } from './layers';
 import { VivViewer, PictureInPictureViewer, SideBySideViewer } from './viewers';
 import { VivView, OverviewView, DetailView, SideBySideView } from './views';
 import {
@@ -9,6 +9,7 @@ import {
 } from './loaders';
 
 export {
+  ScaleBarLayer,
   VivViewerLayer,
   VivViewer,
   VivView,

src/layers/ScaleBarLayer.js

@@ -0,0 +1,147 @@
+import { CompositeLayer, COORDINATE_SYSTEM } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+import { range } from './utils';
+import { makeBoundingBox } from '../views/utils';
+
+function getPosition(boundingBox, position) {
+  const viewLength = boundingBox[2][0] - boundingBox[0][0];
+  switch (position) {
+    case 'bottom-right': {
+      const yCoord =
+        boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * 0.085;
+      const xLeftCoord = boundingBox[2][0] - viewLength * 0.085;
+      return [yCoord, xLeftCoord];
+    }
+    case 'top-right': {
+      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * 0.085;
+      const xLeftCoord = boundingBox[2][0] - viewLength * 0.085;
+      return [yCoord, xLeftCoord];
+    }
+    case 'top-left': {
+      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * 0.085;
+      const xLeftCoord = viewLength * 0.085;
+      return [yCoord, xLeftCoord];
+    }
+    case 'bottom-left': {
+      const yCoord =
+        boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * 0.085;
+      const xLeftCoord = viewLength * 0.085;
+      return [yCoord, xLeftCoord];
+    }
+    default: {
+      throw new Error(`Position ${position} not found`);
+    }
+  }
+}
+
+const defaultProps = {
+  pickable: false,
+  viewState: {
+    type: 'object',
+    value: { zoom: 0, target: [0, 0, 0] },
+    compare: true
+  },
+  PhysicalSizeXUnit: { type: 'string', value: '', compare: true },
+  PhysicalSizeX: { type: 'number', value: 1, compare: true },
+  position: { type: 'string', value: 'bottom-right', compare: true }
+};
+
+/**
+ * This layer creates a scale bar using three LineLayers and a TextLayer.
+ * Looks like: |--------| made up of three LineLayers (left tick, right tick, center length bar) and a bottom TextLayer
+ * @param {Object} props
+ * @param {String} props.PhysicalSizeXUnit Physical unit size per pixel at full resolution.
+ * @param {Number} props.PhysicalSizeX Physical size of a pixel.
+ * @param {Array} props.boundingBox Boudning box of the view in which this should render.
+ * @param {id} props.id Id from the parent layer.
+ * @param {ViewState} props.viewState The current viewState for the desired view.  We cannot internally use this.context.viewport because it is one frame behind:
+ * https://github.com/visgl/deck.gl/issues/4504
+ */
+export default class ScaleBarLayer extends CompositeLayer {
+  renderLayers() {
+    const {
+      id,
+      PhysicalSizeXUnit,
+      PhysicalSizeX,
+      position,
+      viewState
+    } = this.props;
+    const boundingBox = makeBoundingBox(viewState);
+    const { zoom } = viewState;
+    const viewLength = boundingBox[2][0] - boundingBox[0][0];
+    const barLength = viewLength * 0.05;
+    // This is a good heuristic for stopping the bar tick marks from getting too small
+    // and/or the text squishing up into the bar.
+    const barHeight = Math.max(
+      2 ** (-zoom + 1.5),
+      (boundingBox[2][1] - boundingBox[0][1]) * 0.007
+    );
+    const numUnits = barLength * PhysicalSizeX;
+    const [yCoord, xLeftCoord] = getPosition(boundingBox, position);
+    const lengthBar = new LineLayer({
+      id: `scale-bar-length-${id}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: [
+        [
+          [xLeftCoord, yCoord],
+          [xLeftCoord + barLength, yCoord]
+        ]
+      ],
+      getSourcePosition: d => d[0],
+      getTargetPosition: d => d[1],
+      getWidth: 2,
+      getColor: [220, 220, 220]
+    });
+    const tickBoundsLeft = new LineLayer({
+      id: `scale-bar-height-left-${id}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: [
+        [
+          [xLeftCoord, yCoord - barHeight],
+          [xLeftCoord, yCoord + barHeight]
+        ]
+      ],
+      getSourcePosition: d => d[0],
+      getTargetPosition: d => d[1],
+      getWidth: 2,
+      getColor: [220, 220, 220]
+    });
+    const tickBoundsRight = new LineLayer({
+      id: `scale-bar-height-right-${id}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: [
+        [
+          [xLeftCoord + barLength, yCoord - barHeight],
+          [xLeftCoord + barLength, yCoord + barHeight]
+        ]
+      ],
+      getSourcePosition: d => d[0],
+      getTargetPosition: d => d[1],
+      getWidth: 2,
+      getColor: [220, 220, 220]
+    });
+    const textLayer = new TextLayer({
+      id: `units-label-layer-${id}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: [
+        {
+          text: String(numUnits).slice(0, 5) + PhysicalSizeXUnit,
+          position: [xLeftCoord + barLength * 0.5, yCoord + barHeight * 4]
+        }
+      ],
+      getColor: [220, 220, 220, 255],
+      getSize: 11,
+      sizeUnits: 'meters',
+      sizeScale: 2 ** -zoom,
+      characterSet: [
+        ...PhysicalSizeXUnit.split(''),
+        ...range(10).map(i => String(i)),
+        '.'
+      ]
+    });
+    return [lengthBar, tickBoundsLeft, tickBoundsRight, textLayer];
+  }
+}
+
+ScaleBarLayer.layerName = 'ScaleBarLayer';
+ScaleBarLayer.defaultProps = defaultProps;

src/layers/index.js

@@ -1,3 +1,4 @@
 export { default as VivViewerLayer } from './VivViewerLayer';
 export { default as StaticImageLayer } from './StaticImageLayer';
 export { default as OverviewLayer } from './OverviewLayer';
+export { default as ScaleBarLayer } from './ScaleBarLayer';

src/loaders/OMETiffLoader.js

@@ -75,6 +75,10 @@ export default class OMETiffLoader {
     this.type = 'ome-tiff';
     // get first image's description, which contains OMEXML
     this.omexml = new OMEXML(omexmlString);
+    this.PhysicalSizeX = this.omexml.PhysicalSizeX;
+    this.PhysicalSizeXUnit = this.omexml.PhysicalSizeXUnit;
+    this.PhysicalSizeY = this.omexml.PhysicalSizeY;
+    this.PhysicalSizeYUnit = this.omexml.PhysicalSizeYUnit;
     this.offsets = offsets || [];
     this.channelNames = this.omexml.getChannelNames();
     this.width = this.omexml.SizeX;

src/loaders/omeXML.js

@@ -21,8 +21,17 @@ export default class OMEXML {
     this.SizeY = Number.parseInt(Pixels['@_SizeY']);
     this.DimensionOrder = Pixels['@_DimensionOrder'];
     this.Type = Pixels['@_Type'];
-    this.PhysicalSizeYUnit = Pixels['@_PhysicalSizeYUnit'];
-    this.PhysicalSizeXUnit = Pixels['@_PhysicalSizeXUnit'];
+    const PhysicalSizeYUnit = Pixels['@_PhysicalSizeYUnit'];
+    // This µ character is not well handled - I got odd behavior but this solves it.
+    this.PhysicalSizeYUnit =
+      PhysicalSizeYUnit && PhysicalSizeYUnit.includes('µm')
+        ? 'µm'
+        : this.PhysicalSizeXUnit;
+    const PhysicalSizeXUnit = Pixels['@_PhysicalSizeXUnit'];
+    this.PhysicalSizeXUnit =
+      PhysicalSizeXUnit && PhysicalSizeXUnit.includes('µm')
+        ? 'µm'
+        : this.PhysicalSizeXUnit;
     this.PhysicalSizeY = Pixels['@_PhysicalSizeY'];
     this.PhysicalSizeX = Pixels['@_PhysicalSizeX'];
   }

src/views/DetailView.js

@@ -1,14 +1,15 @@
-import { VivViewerLayer, StaticImageLayer } from '../layers';
+import { VivViewerLayer, StaticImageLayer, ScaleBarLayer } from '../layers';
 import VivView from './VivView';
 import { getVivId } from './utils';
 
 /**
  * This class generates a VivViewerLayer and a view for use in the VivViewer as a detailed view.
  * */
 export default class DetailView extends VivView {
-  getLayers({ props }) {
+  getLayers({ props, viewStates }) {
     const { loader } = props;
     const { id } = this;
+    const thisViewState = viewStates[id];
     const layer = loader.isPyramid
       ? new VivViewerLayer(props, {
           id: `${loader.type}${getVivId(id)}`,
@@ -18,6 +19,17 @@ export default class DetailView extends VivView {
           id: `${loader.type}${getVivId(id)}`,
           viewportId: id
         });
-    return [layer];
+    const { PhysicalSizeXUnit, PhysicalSizeX } = loader;
+    const scaleBarLayer =
+      PhysicalSizeXUnit && PhysicalSizeX
+        ? new ScaleBarLayer({
+            id: getVivId(id),
+            loader,
+            PhysicalSizeXUnit,
+            PhysicalSizeX,
+            viewState: thisViewState
+          })
+        : null;
+    return [layer, scaleBarLayer];
   }
 }

src/views/SideBySideView.js

@@ -1,10 +1,9 @@
 import { PolygonLayer } from '@deck.gl/layers';
 import { COORDINATE_SYSTEM } from '@deck.gl/core';
 
-import { VivViewerLayer, StaticImageLayer } from '../layers';
+import { VivViewerLayer, StaticImageLayer, ScaleBarLayer } from '../layers';
 import VivView from './VivView';
 import { getVivId, makeBoundingBox } from './utils';
-
 /**
  * This class generates a VivViewerLayer and a view for use in the SideBySideViewer.
  * It is linked with its other views as controlled by `linkedIds`, `zoomLock`, and `panLock` parameters.
@@ -119,6 +118,17 @@ export default class SideBySideView extends VivView {
       getLineColor: viewportOutlineColor,
       getLineWidth: viewportOutlineWidth * 2 ** -thisViewState.zoom
     });
-    return [detailLayer, border];
+    const { PhysicalSizeXUnit, PhysicalSizeX } = loader;
+    const scaleBarLayer =
+      PhysicalSizeXUnit && PhysicalSizeX
+        ? new ScaleBarLayer({
+            id: getVivId(id),
+            loader,
+            PhysicalSizeXUnit,
+            PhysicalSizeX,
+            viewState: thisViewState
+          })
+        : null;
+    return [detailLayer, border, scaleBarLayer];
   }
 }

tests/layers_views/layers/ScaleBarLayer.spec.js

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies, no-unused-expressions */
+import test from 'tape-catch';
+import { generateLayerTests, testLayer } from '@deck.gl/test-utils';
+import { OrthographicView } from '@deck.gl/core';
+import ScaleBarLayer from '../../../src/layers/ScaleBarLayer';
+
+test('ScaleBarLayer', t => {
+  const view = new OrthographicView({
+    id: 'ortho',
+    controller: true,
+    height: 4,
+    width: 4,
+    target: [2, 2, 0],
+    zoom: 0
+  });
+  const testCases = generateLayerTests({
+    Layer: ScaleBarLayer,
+    assert: t.ok,
+    sampleProps: {
+      viewState: { target: [2, 2, 0], zoom: 0, width: 4, height: 4 },
+      PhysicalSizeXUnit: 'cm',
+      PhysicalSizeX: 1,
+      position: 'bottom-left'
+    },
+    onBeforeUpdate: ({ testCase }) => t.comment(testCase.title)
+  });
+  testLayer({
+    Layer: ScaleBarLayer,
+    testCases,
+    onError: t.notOkimport,
+    viewport: view.makeViewport({
+      height: 4,
+      width: 4,
+      viewState: { target: [2, 2, 0], zoom: 0, width: 4, height: 4 }
+    })
+  });
+  t.end();
+});

tests/layers_views/layers/index.js

@@ -1,4 +1,5 @@
 require('./StaticImageLayer.spec');
 require('./XRLayer.spec');
 require('./VivViewerLayerBase.spec');
+require('./ScaleBarLayer.spec');
 require('./utils.spec');

tests/layers_views/views/DetailView.spec.js

@@ -2,7 +2,7 @@
 import test from 'tape-catch';
 import { DetailView } from '../../../src/views';
 import { generateViewTests, defaultArguments } from './VivView.spec';
-import { VivViewerLayer } from '../../../src/layers';
+import { VivViewerLayer, ScaleBarLayer } from '../../../src/layers';
 
 const id = 'detail';
 const detailViewArguments = { ...defaultArguments };
@@ -14,11 +14,25 @@ generateViewTests(DetailView, detailViewArguments);
 test(`DetailView layer type and props check`, t => {
   const view = new DetailView(detailViewArguments);
   const loader = { type: 'loads', isPyramid: true };
-  const layers = view.getLayers({ props: { loader } });
+  const layers = view.getLayers({
+    props: {
+      loader: { ...loader, PhysicalSizeXUnit: 'cm', PhysicalSizeX: 0.5 }
+    },
+    viewStates: {
+      detail: {
+        target: [0, 0, 0],
+        zoom: 0
+      }
+    }
+  });
   t.ok(
     layers[0] instanceof VivViewerLayer,
     'DetailView layer should be VivViewerLayer.'
   );
+  t.ok(
+    layers[1] instanceof ScaleBarLayer,
+    'DetailView layer should be VivViewerLayer.'
+  );
   t.equal(
     layers[0].props.viewportId,
     view.id,