chore: install scalebar plugin

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-a694292f
+        tag: sha-d7cb0a9b
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/configuration/eslint/.eslintignore

@@ -0,0 +1 @@
+../../src/components/Graph/openseadragon-scalebar.js

client/configuration/eslint/eslint.js

@@ -121,6 +121,26 @@ module.exports = {
         "@typescript-eslint/no-var-requires": "off",
       },
     },
+    {
+      files: ["src/components/Graph/openseadragon-scalebar.js"],
+      rules: {
+        "func-names": "off",
+        "@typescript-eslint/no-redeclare": "off",
+        "global-require": "off",
+        "no-var": "off",
+        "vars-on-top": "off",
+        "block-scoped-var": "off",
+        "@typescript-eslint/no-this-alias": "off",
+        "consistent-return": "off",
+        "no-restricted-properties": [
+          "off",
+          {
+            object: "Math",
+            property: "pow",
+          },
+        ],
+      },
+    },
   ],
 };
 /* eslint-enable @blueprintjs/classes-constants -- we don't import blueprint here  */

client/src/components/Graph/Graph.tsx

@@ -8,6 +8,7 @@ import memoize from "memoize-one";
 import Async, { AsyncProps } from "react-async";
 import { Button, Icon } from "@blueprintjs/core";
 import Openseadragon, { Viewer } from "openseadragon";
+import "./openseadragon-scalebar";
 import { throttle } from "lodash";
 import { IconNames } from "@blueprintjs/icons";
 import _camera, { Camera } from "util/camera";
@@ -1187,6 +1188,17 @@ class Graph extends React.Component<GraphProps, GraphState> {
       opacity: imageOpacity / 100,
     });
 
+    this.openseadragon.scalebar({
+      type: Openseadragon.ScalebarType.MICROSCOPY,
+      pixelsPerMeter: 1000000, // this needs to be adjusted based on the image
+      minWidth: "75px",
+      location: Openseadragon.ScalebarLocation.BOTTOM_LEFT,
+      color: "white",
+      fontColor: "black",
+      backgroundColor: "rgba(255, 255, 255, 0.5)",
+      barThickness: 3,
+    });
+
     /**
      * (thuang): Remove the openseadragon element when the image fails to load,
      * likely because the image is not found in the S3 bucket.