@aics/vole-core 3.12.4

package/es/VolumeMaker.js

@@ -0,0 +1,101 @@
+/**
+ * Basic utility functions to create sample volume data
+ * @class
+ */
+export default class VolumeMaker {
+  /**
+   * Rasterize a signed distance function into a volume of vx * vy * vz dimensions. This is a binary filling operation.
+   * @param {number} vx
+   * @param {number} vy
+   * @param {number} vz
+   * @param {function} sdFunc A function f(x,y,z) that returns a distance. f < 0 will be the interior of the volume, and f>=0 will be outside.
+   */
+  static createVolume(vx, vy, vz, sdFunc) {
+    const data = new Uint8Array(vx * vy * vz).fill(0);
+    const cx = vx / 2;
+    const cy = vy / 2;
+    const cz = vz / 2;
+    let offset, px, py, pz;
+    for (let i = 0; i < vz; ++i) {
+      for (let j = 0; j < vy; ++j) {
+        for (let k = 0; k < vx; ++k) {
+          offset = i * (vx * vy) + j * vx + k;
+          px = k - cx;
+          py = j - cy;
+          pz = i - cz;
+          if (sdFunc(px, py, pz) < 0) {
+            data[offset] = 255;
+          } else {
+            data[offset] = 0;
+          }
+        }
+      }
+    }
+    return data;
+  }
+
+  /**
+   * Create a volume filled with a sphere in the center
+   * @param {number} vx
+   * @param {number} vy
+   * @param {number} vz
+   * @param {number} radius
+   */
+  static createSphere(vx, vy, vz, radius) {
+    return VolumeMaker.createVolume(vx, vy, vz, (px, py, pz) => {
+      return Math.sqrt(px * px + py * py + pz * pz) - radius;
+    });
+  }
+
+  /**
+   * Create a volume with a cylinder centered inside.
+   * @param {number} vx
+   * @param {number} vy
+   * @param {number} vz
+   * @param {number} hx width of cap (?)
+   * @param {number} hy depth of cap (?)
+   */
+  static createCylinder(vx, vy, vz, hx, hy) {
+    let dx, dy, mdx, mdy;
+    return VolumeMaker.createVolume(vx, vy, vz, (px, py, pz) => {
+      dx = Math.abs(Math.sqrt(px * px + pz * pz)) - hx;
+      dy = Math.abs(py) - hy;
+      mdx = Math.max(dx, 0.0);
+      mdy = Math.max(dy, 0.0);
+      return Math.min(Math.max(dx, dy), 0.0) + Math.sqrt(mdx * mdx + mdy * mdy);
+    });
+  }
+
+  /**
+   * Create a volume with a torus centered inside
+   * @param {number} vx
+   * @param {number} vy
+   * @param {number} vz
+   * @param {number} tx inner radius
+   * @param {number} ty outer radius
+   */
+  static createTorus(vx, vy, vz, tx, ty) {
+    let qx, qy;
+    return VolumeMaker.createVolume(vx, vy, vz, (px, py, pz) => {
+      qx = Math.sqrt(px * px + pz * pz) - tx;
+      qy = py;
+      return Math.sqrt(qx * qx + qy * qy) - ty;
+    });
+  }
+
+  /**
+   * Create a volume with a cone centered inside.  cx, cy must be a 2d normalized pair...?
+   * @param {number} vx
+   * @param {number} vy
+   * @param {number} vz
+   * @param {number} cx base radius
+   * @param {number} cy height
+   */
+  static createCone(vx, vy, vz, cx, cy) {
+    let q;
+    return VolumeMaker.createVolume(vx, vy, vz, (px, py, pz) => {
+      q = Math.sqrt(px * px + py * py);
+      return cx * q + cy * pz;
+    });
+  }
+}

package/es/VolumeRenderImpl.js

@@ -0,0 +1 @@
+export {};

package/es/VolumeRenderSettings.js

@@ -0,0 +1,203 @@
+import { Euler, Vector2, Vector3 } from "three";
+/**
+ * Marks groups of related settings that may have changed.
+ */
+export let SettingsFlags = /*#__PURE__*/function (SettingsFlags) {
+  SettingsFlags[SettingsFlags["TRANSFORM"] = 1] = "TRANSFORM";
+  SettingsFlags[SettingsFlags["CAMERA"] = 2] = "CAMERA";
+  SettingsFlags[SettingsFlags["BOUNDING_BOX"] = 4] = "BOUNDING_BOX";
+  SettingsFlags[SettingsFlags["ROI"] = 8] = "ROI";
+  SettingsFlags[SettingsFlags["MASK_ALPHA"] = 16] = "MASK_ALPHA";
+  SettingsFlags[SettingsFlags["MATERIAL"] = 32] = "MATERIAL";
+  SettingsFlags[SettingsFlags["SAMPLING"] = 64] = "SAMPLING";
+  SettingsFlags[SettingsFlags["VIEW"] = 128] = "VIEW";
+  SettingsFlags[SettingsFlags["MASK_DATA"] = 256] = "MASK_DATA";
+  SettingsFlags[SettingsFlags["ALL"] = 1023] = "ALL";
+  return SettingsFlags;
+}({});
+export let Axis = /*#__PURE__*/function (Axis) {
+  Axis["X"] = "x";
+  Axis["Y"] = "y";
+  Axis["Z"] = "z";
+  Axis["XYZ"] = "";
+  Axis["NONE"] = "";
+  return Axis;
+}({});
+
+/**
+ * Holds shared settings for configuring `VolumeRenderImpl` instances.
+ */
+export class VolumeRenderSettings {
+  // TRANSFORM
+
+  // TODO made redundant by `scale`?
+
+  // VIEW
+
+  // CAMERA
+
+  // MASK
+
+  // MATERIAL
+
+  // ROI
+
+  // BOUNDING_BOX
+
+  // SAMPLING
+
+  /**
+   * Creates a new VolumeRenderSettings object with default fields.
+   * @param volume Optional volume data parameter used to initialize size-dependent settings.
+   */
+  constructor(volume) {
+    this.translation = new Vector3(0, 0, 0);
+    this.rotation = new Euler();
+    this.scale = new Vector3(1, 1, 1);
+    this.isOrtho = false;
+    this.viewAxis = Axis.NONE;
+    this.orthoScale = 1.0;
+    this.flipAxes = new Vector3(1, 1, 1);
+    this.maskChannelIndex = -1;
+    this.maskAlpha = 1.0;
+    this.gammaMin = 0.0;
+    this.gammaLevel = 1.0;
+    this.gammaMax = 1.0;
+    this.density = 0;
+    this.brightness = 0;
+    this.showBoundingBox = false;
+    this.bounds = {
+      bmin: new Vector3(-0.5, -0.5, -0.5),
+      bmax: new Vector3(0.5, 0.5, 0.5)
+    };
+    this.boundingBoxColor = [1.0, 1.0, 0.0];
+    this.primaryRayStepSize = 1.0;
+    this.secondaryRayStepSize = 1.0;
+    this.useInterpolation = true;
+    this.visible = true;
+    this.maxProjectMode = false;
+    // volume-dependent properties
+    if (volume) {
+      this.zSlice = Math.floor(volume.imageInfo.subregionSize.z / 2);
+      this.diffuse = new Array(volume.imageInfo.numChannels).fill([255, 255, 255]);
+      this.specular = new Array(volume.imageInfo.numChannels).fill([0, 0, 0]);
+      this.emissive = new Array(volume.imageInfo.numChannels).fill([0, 0, 0]);
+      this.glossiness = new Array(volume.imageInfo.numChannels).fill(0);
+    } else {
+      this.zSlice = 0;
+      this.diffuse = [[255, 255, 255]];
+      this.specular = [[0, 0, 0]];
+      this.emissive = [[0, 0, 0]];
+      this.glossiness = [0];
+    }
+    this.pixelSamplingRate = 0.75;
+    this.resolution = new Vector2(1, 1);
+  }
+  resizeWithVolume(volume) {
+    this.zSlice = Math.floor(volume.imageInfo.subregionSize.z / 2);
+    this.diffuse = new Array(volume.imageInfo.numChannels).fill([255, 255, 255]);
+    this.specular = new Array(volume.imageInfo.numChannels).fill([0, 0, 0]);
+    this.emissive = new Array(volume.imageInfo.numChannels).fill([0, 0, 0]);
+    this.glossiness = new Array(volume.imageInfo.numChannels).fill(0);
+  }
+
+  /**
+   * Recursively compares two arrays.
+   * Non-array elements are compared using strict equality comparison.
+   */
+  static compareArray(a1, a2) {
+    if (a1.length !== a2.length) {
+      return false;
+    }
+    for (let i = 0; i < a1.length; i++) {
+      const elem1 = a1[i];
+      const elem2 = a2[i];
+      if (elem1 instanceof Array && elem2 instanceof Array) {
+        if (!this.compareArray(elem1, elem2)) {
+          return false;
+        }
+      } else if (elem1 !== elem2) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Compares two VolumeRenderSettings objects.
+   * @returns true if both objects have identical settings.
+   */
+  isEqual(o2) {
+    for (const key of Object.keys(this)) {
+      const v1 = this[key];
+      const v2 = o2[key];
+      if (v1 instanceof Array) {
+        if (!VolumeRenderSettings.compareArray(v1, v2)) {
+          return false;
+        }
+      } else if (v1 && v1.bmin !== undefined) {
+        // Bounds object
+        const bounds1 = v1;
+        const bounds2 = v2;
+        if (!bounds1.bmin.equals(bounds2.bmin) || !bounds1.bmax.equals(bounds2.bmax)) {
+          return false;
+        }
+      } else if (v1 instanceof Vector3 || v1 instanceof Vector2 || v1 instanceof Euler) {
+        if (!v1.equals(v2)) {
+          return false;
+        }
+      } else {
+        // number, boolean, string
+        if (v1 !== v2) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Recursively creates and returns a deep copy of an array.
+   * Note: assumes values in the array are either primitives (numbers) or arrays of primitives.
+   */
+  static deepCopyArray(a) {
+    const b = new Array(a.length);
+    for (let i = 0; i < a.length; i++) {
+      const val = a[i];
+      if (val instanceof Array) {
+        b[i] = this.deepCopyArray(val);
+      } else {
+        b[i] = val;
+      }
+    }
+    return b;
+  }
+
+  /**
+   * Creates a deep copy of this VolumeRenderSettings object.
+   * @param src The object to create a clone of.
+   * @returns a new VolumeRenderSettings object with identical fields that do not
+   * share references with the original settings object.
+   */
+  clone() {
+    const dst = new VolumeRenderSettings(); // initialize with empty volume
+    for (const key of Object.keys(this)) {
+      const val = this[key];
+      if (val instanceof Array) {
+        dst[key] = VolumeRenderSettings.deepCopyArray(val);
+      } else if (key === "bounds") {
+        // must use key string here because Bounds is a type alias and not a class
+        dst.bounds.bmax = this.bounds.bmax.clone();
+        dst.bounds.bmin = this.bounds.bmin.clone();
+      } else if (val instanceof Vector3 || val instanceof Vector2 || val instanceof Euler) {
+        dst[key] = val.clone();
+      } else if (val instanceof String) {
+        dst[key] = "" + val;
+      } else {
+        // boolean, number, other primitives
+        dst[key] = val;
+      }
+    }
+    return dst;
+  }
+}

package/es/constants/basicShaders.js

@@ -0,0 +1,29 @@
+// "basic" shaders which perform simple functions and appear multiple times in the codebase.
+// These are the only shaders defined outside a dedicated GLSL file to make extra sure they appear
+// only once in the built package.
+
+/** Passthrough vertex shader for rendering to a buffer with a fullscreen quad */
+export const renderToBufferVertShader = `
+precision highp float;
+precision highp int;
+out vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}
+`;
+
+/** Basic fragment shader that samples its output directly from a texture */
+export const copyImageFragShader = `
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+
+in vec2 vUv;
+uniform sampler2D image;
+
+void main() {
+  gl_FragColor = texture2D(image, vUv);
+}
+`;

package/es/constants/colors.js

@@ -0,0 +1,59 @@
+export const defaultColors = [[255, 0, 255], [255, 255, 255], [0, 255, 255]];
+// 0 <= (h, s, v) <= 1
+// returns 0 <= (r, g, b) <= 255 rounded to nearest integer
+// you can also pass in just one arg as an object of {h, s, v} props.
+function HSVtoRGB(h, s, v) {
+  let r, g, b;
+  let hh = 0;
+  if (arguments.length === 1) {
+    const hsv = h;
+    s = hsv.s, v = hsv.v, hh = hsv.h;
+  } else {
+    hh = h;
+  }
+  const i = Math.floor(hh * 6);
+  const f = hh * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0:
+      r = v, g = t, b = p;
+      break;
+    case 1:
+      r = q, g = v, b = p;
+      break;
+    case 2:
+      r = p, g = v, b = t;
+      break;
+    case 3:
+      r = p, g = q, b = v;
+      break;
+    case 4:
+      r = t, g = p, b = v;
+      break;
+    case 5:
+      r = v, g = p, b = q;
+      break;
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+// 1993 Park-Miller LCG
+function LCG(s) {
+  return function () {
+    s = Math.imul(48271, s) | 0 % 2147483647;
+    return (s & 2147483647) / 2147483648;
+  };
+}
+// Use it like so:
+const myrand = LCG(123);
+
+// if index exceeds defaultColors start choosing random ones
+// returns [r,g,b] 0-255 range
+export const getColorByChannelIndex = index => {
+  if (!defaultColors[index]) {
+    defaultColors[index] = HSVtoRGB(myrand(), myrand() * 0.5 + 0.5, myrand() * 0.5 + 0.5);
+  }
+  return defaultColors[index];
+};

package/es/constants/denoiseShader.js

@@ -0,0 +1,43 @@
+import { Vector2 } from "three";
+/* babel-plugin-inline-import './shaders/pathtrace_denoise.frag' */
+const denoiseFragmentShader = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\n\nuniform float gInvExposure;\nuniform int gDenoiseWindowRadius;\nuniform float gDenoiseNoise;\nuniform float gDenoiseInvWindowArea;\nuniform float gDenoiseWeightThreshold;\nuniform float gDenoiseLerpThreshold;\nuniform float gDenoiseLerpC;\nuniform vec2 gDenoisePixelSize;\n\nuniform sampler2D tTexture0;\nin vec2 vUv;\n\n// Used to convert from XYZ to linear RGB space\nconst mat3 XYZ_2_RGB = (mat3(\n 3.2404542, -1.5371385, -0.4985314,\n -0.9692660,  1.8760108,  0.0415560,\n  0.0556434, -0.2040259,  1.0572252\n));\n\nvec3 XYZtoRGB(vec3 xyz) {\n  return xyz * XYZ_2_RGB;\n}\n\nvoid main()\n{\n  vec4 pixelColor = texture(tTexture0, vUv);\n  // TODO TONE MAP!!!!!!\n  pixelColor.rgb = XYZtoRGB(pixelColor.rgb);\n\n  pixelColor.rgb = 1.0-exp(-pixelColor.rgb*gInvExposure);\n  pixelColor = clamp(pixelColor, 0.0, 1.0);\n\n  /////////////////////\n  /////////////////////\n  /////////////////////\n  /////////////////////\n  //// DENOISING FILTER\n  /////////////////////\n  // see https://developer.download.nvidia.com/compute/cuda/1.1-Beta/x86_website/projects/imageDenoising/doc/imageDenoising.pdf\n  /////////////////////\n  vec4 clr00 = pixelColor;\n\n  float fCount = 0.0;\n  float SumWeights = 0.0;\n  vec3 clr = vec3(0.0, 0.0, 0.0);\n\n  vec2 uvsample = vUv;\n  vec3 rgbsample;\n  for (int i = -gDenoiseWindowRadius; i <= gDenoiseWindowRadius; i++) {\n    for (int j = -gDenoiseWindowRadius; j <= gDenoiseWindowRadius; j++) {\n\n      // boundary checking?\n      vec3 clrIJ = texture(tTexture0, vUv + vec2(float(i)/gDenoisePixelSize.x, float(j)/gDenoisePixelSize.y)).rgb;\n      //vec3 clrIJ = texelFetch(tTexture0, ivec2(gl_FragCoord.xy) + ivec2(i,j), 0).rgb;\n\n      rgbsample = XYZtoRGB(clrIJ);\n      // tone map!\n      rgbsample = 1.0 - exp(-rgbsample * gInvExposure);\n      rgbsample = clamp(rgbsample, 0.0, 1.0);\n\n      clrIJ = rgbsample;\n\n      float distanceIJ = (clr00.x-clrIJ.x)*(clr00.x-clrIJ.x) + (clr00.y-clrIJ.y)*(clr00.y-clrIJ.y) + (clr00.z-clrIJ.z)*(clr00.z-clrIJ.z);\n\n      // gDenoiseNoise = 1/h^2\n      //\n      float weightIJ = exp(-(distanceIJ * gDenoiseNoise + float(i * i + j * j) * gDenoiseInvWindowArea));\n\n      clr += (clrIJ * weightIJ);\n\n      SumWeights += weightIJ;\n\n      fCount += (weightIJ > gDenoiseWeightThreshold) ? gDenoiseInvWindowArea : 0.0;\n    }\n  }\n\n  SumWeights = 1.0 / SumWeights;\n\n  clr.rgb *= SumWeights;\n\n  float LerpQ = (fCount > gDenoiseLerpThreshold) ? gDenoiseLerpC : 1.0f - gDenoiseLerpC;\n\n  clr.rgb = mix(clr.rgb, clr00.rgb, LerpQ);\n  clr.rgb = clamp(clr.rgb, 0.0, 1.0);\n\n  pc_fragColor = vec4(clr.rgb, clr00.a);\n}\n";
+export const denoiseFragmentShaderSrc = denoiseFragmentShader;
+const DENOISE_WINDOW_RADIUS = 3;
+export const denoiseShaderUniforms = () => ({
+  gInvExposure: {
+    type: "f",
+    value: 1.0 / (1.0 - 0.75)
+  },
+  gDenoiseWindowRadius: {
+    type: "i",
+    value: DENOISE_WINDOW_RADIUS
+  },
+  gDenoiseNoise: {
+    type: "f",
+    value: 0.05
+  },
+  gDenoiseInvWindowArea: {
+    type: "f",
+    value: 1.0 / ((2.0 * DENOISE_WINDOW_RADIUS + 1.0) * (2.0 * DENOISE_WINDOW_RADIUS + 1.0))
+  },
+  gDenoiseWeightThreshold: {
+    type: "f",
+    value: 0.1
+  },
+  gDenoiseLerpThreshold: {
+    type: "f",
+    value: 0.0
+  },
+  gDenoiseLerpC: {
+    type: "f",
+    value: 0.01
+  },
+  gDenoisePixelSize: {
+    type: "v2",
+    value: new Vector2(1, 1)
+  },
+  tTexture0: {
+    type: "t",
+    value: null
+  }
+});

package/es/constants/lights.js

@@ -0,0 +1,42 @@
+import { MathUtils } from "three";
+const spotlightSettings = Object.freeze({
+  angle: 36 * MathUtils.DEG2RAD,
+  castShadow: false,
+  color: 0xffffff,
+  intensity: 0.4,
+  position: {
+    x: -4,
+    y: 3.5,
+    z: 7
+  }
+});
+const ambientLightSettings = Object.freeze({
+  color: 0xffffff,
+  intensity: 0.6
+});
+const reflectedLightSettings = Object.freeze({
+  castShadow: false,
+  color: 0xff88aa,
+  intensity: 0.2,
+  position: {
+    x: 1,
+    y: -5,
+    z: 0
+  }
+});
+const fillLightSettings = Object.freeze({
+  castShadow: false,
+  color: 0xe8d1a9,
+  intensity: 0.15,
+  position: {
+    x: 2.5,
+    y: 0.2,
+    z: 1.5
+  }
+});
+export default {
+  spotlightSettings,
+  ambientLightSettings,
+  reflectedLightSettings,
+  fillLightSettings
+};

package/es/constants/materials.js

@@ -0,0 +1,85 @@
+import { Color, UniformsUtils, ShaderMaterial } from "three";
+export const fresnelShaderSettings = {
+  bias: 0.4,
+  power: 2.0,
+  scale: 1.0
+};
+export const defaultMaterialSettings = {
+  shininess: 1000,
+  specularColor: 0x010101
+};
+export const transparentMaterialSettings = {
+  shininess: 1000,
+  specularColor: 0x010101,
+  transparency: {
+    bias: -0.2,
+    power: 2.0,
+    scale: 1.0
+  }
+};
+const shaderLibrary = {
+  fresnel: {
+    uniforms: {
+      bias: {
+        value: 0.4
+      },
+      power: {
+        value: 2.0
+      },
+      scale: {
+        value: 1.0
+      },
+      uBaseColor: {
+        value: new Color(0xffffff)
+      }
+    },
+    vertexShader: `varying vec3 vNormal;
+            varying vec3 vI;
+
+            void main() {
+
+                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+                vNormal = normalize( normalMatrix * normal );
+
+                vec4 I = modelViewMatrix * vec4(position, 1.0);
+                vI = normalize(mvPosition.xyz);
+
+                gl_Position = projectionMatrix * mvPosition;
+
+            }`,
+    fragmentShader: `uniform float bias;
+            uniform float power;
+            uniform float scale;
+            uniform vec3 uBaseColor;
+
+            varying vec3 vNormal;
+
+            varying vec3 vI;
+
+            void main() {
+                float edge = 1.0 - max( dot( normalize( vNormal ), normalize( -vI ) ), 0.0);
+                edge = max(0.0, min(1.0, -bias + scale * pow((0.0 + edge), power)));
+
+                float threshold = 0.1;
+                if ( edge < threshold ) {
+                    discard;
+                }
+                gl_FragColor = vec4( uBaseColor, edge );
+                return;
+            }`
+  }
+};
+export function createShaderMaterial(id) {
+  const shader = shaderLibrary[id];
+  const u = UniformsUtils.clone(shader.uniforms);
+  const vs = shader.vertexShader;
+  const fs = shader.fragmentShader;
+  const material = new ShaderMaterial({
+    fragmentShader: fs,
+    uniforms: u,
+    vertexShader: vs
+  });
+  return material;
+}

package/es/constants/pathtraceOutputShader.js

@@ -0,0 +1,13 @@
+/* babel-plugin-inline-import './shaders/pathtrace_output.frag' */
+const pathtraceOutputFragmentShader = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\n\nuniform float gInvExposure;\nuniform sampler2D tTexture0;\nin vec2 vUv;\n\n// Used to convert from XYZ to linear RGB space\nconst mat3 XYZ_2_RGB = (mat3(\n  3.2404542, -1.5371385, -0.4985314,\n -0.9692660,  1.8760108,  0.0415560,\n  0.0556434, -0.2040259,  1.0572252\n));\n\nvec3 XYZtoRGB(vec3 xyz) {\n  return xyz * XYZ_2_RGB;\n}\n\nvoid main() {\n  vec4 pixelColor = texture(tTexture0, vUv);\n\n  pixelColor.rgb = XYZtoRGB(pixelColor.rgb);\n\n  // pixelColor.rgb = pow(pixelColor.rgb, vec3(1.0/2.2));\n  pixelColor.rgb = 1.0-exp(-pixelColor.rgb*gInvExposure);\n  pixelColor = clamp(pixelColor, 0.0, 1.0);\n\n  pc_fragColor = pixelColor; // sqrt(pixelColor);\n  // out_FragColor = pow(pixelColor, vec4(1.0/2.2));\n}\n";
+export const pathtraceOutputFragmentShaderSrc = pathtraceOutputFragmentShader;
+export const pathtraceOutputShaderUniforms = () => ({
+  gInvExposure: {
+    type: "f",
+    value: 1.0 / (1.0 - 0.75)
+  },
+  tTexture0: {
+    type: "t",
+    value: null
+  }
+});

package/es/constants/scaleBarSVG.js

@@ -0,0 +1,21 @@
+const scaleBarSVG = `
+<svg enable-background="new 0 0 150 75.3" viewBox="0 0 150 75.3" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 76)" gradientUnits="userSpaceOnUse" x1=".3035"
+    x2="149.6965" y1="19.59" y2="19.59">
+    <stop offset="0" stop-color="currentColor" stop-opacity="0" />
+    <stop offset=".16" stop-color="currentColor" />
+    <stop offset=".84" stop-color="currentColor" />
+    <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+  </linearGradient>
+  <g fill="none">
+    <path d="m.5 39.1 149 34.6" stroke="url(#a)" stroke-miterlimit="10" stroke-width="4" />
+    <path d="m101.5 73.6 11-8.5" stroke="currentColor" stroke-miterlimit="10" stroke-width="4" />
+    <path d="m25.1 55.7 11-8.5" stroke="currentColor" stroke-miterlimit="10" stroke-width="4" />
+    <path
+      d="m36.2 40c0-12 5.3-12.4 10.5-14.2 5-1.7 17.3 1.9 22.6 1.7s8-5 8.4-11.8c-.4 6.9 3.4 13.8 10 16.3 8 3 17.9 2.7 23.2 7.3 7 6 3.3 12.2 1.6 19.1"
+      stroke="white" stroke-dasharray="2 4" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
+  </g>
+</svg>
+`;
+export default scaleBarSVG;

package/es/constants/time.js

@@ -0,0 +1,34 @@
+export let TimeUnit = /*#__PURE__*/function (TimeUnit) {
+  TimeUnit[TimeUnit["MILLISECOND"] = 0] = "MILLISECOND";
+  TimeUnit[TimeUnit["SECOND"] = 1] = "SECOND";
+  TimeUnit[TimeUnit["MINUTE"] = 2] = "MINUTE";
+  TimeUnit[TimeUnit["HOUR"] = 3] = "HOUR";
+  TimeUnit[TimeUnit["DAY"] = 4] = "DAY";
+  return TimeUnit;
+}({});
+const recognizedTimeUnits = {
+  [TimeUnit.MILLISECOND]: new Set(["ms", "millisecond", "milliseconds"]),
+  [TimeUnit.SECOND]: new Set(["s", "sec", "second", "seconds"]),
+  [TimeUnit.MINUTE]: new Set(["m", "min", "minute", "minutes"]),
+  [TimeUnit.HOUR]: new Set(["h", "hr", "hour", "hours"]),
+  [TimeUnit.DAY]: new Set(["d", "day", "days"])
+};
+
+/**
+ * Parses an OME-compatible time unit into a TimeUnit enum.
+ * @param unit string unit
+ * @returns
+ * - `TimeUnit.MILLISECOND` if unit is "ms", "millisecond", or "milliseconds"
+ * - `TimeUnit.SECOND` if unit is "s", "sec", "second", or "seconds"
+ * - `TimeUnit.MINUTE` if unit is "m", "min", "minute", or "minutes"
+ * - `TimeUnit.HOUR` if unit is "h", "hr", "hour", or "hours"
+ * - `TimeUnit.DAY` if unit is "d", "day", or "days"
+ * - `undefined` if unit is not recognized
+ */
+export function parseTimeUnit(unit) {
+  for (const [timeUnit, recognizedUnits] of Object.entries(recognizedTimeUnits)) {
+    if (recognizedUnits.has(unit)) {
+      return timeUnit;
+    }
+  }
+}