Merge branch 'master' into fb-lsdv-5560/zoom-hotkeys

# Conflicts:
#	tests/functional/package.json
#	tests/functional/yarn.lock

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.194.0/containers/javascript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 18
+ARG VARIANT="18-bullseye"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.194.0/containers/javascript-node
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 18
+		"args": {
+			"VARIANT": "18-bullseye"
+		}
+	},
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"visualstudioexptteam.vscodeintellicode",
+		"mrmlnc.vscode-scss",
+		"firefox-devtools.vscode-firefox-debug",
+		"ms-vscode-remote.vscode-remote-extensionpack"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.github/workflows/build_bundle.yml

@@ -59,6 +59,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      - name: "[DEBUG] Print installed npm packages"
+        run: |
+          npm list --depth=1 || true
+
       - name: Build distribution package
         timeout-minutes: 10
         run: yarn run build:module

.github/workflows/e2e_tests.yml

@@ -82,6 +82,10 @@ jobs:
           cd e2e
           yarn install --frozen-lockfile
 
+      - name: "[DEBUG] Print installed npm packages"
+        run: |
+          npm list --depth=1 || true
+
       - name: Run e2e test suite
         timeout-minutes: 40
         env:

.github/workflows/eslint.yml

@@ -52,6 +52,10 @@ jobs:
           set -euo pipefail
           yarn install --frozen-lockfile
 
+      - name: "[DEBUG] Print installed npm packages"
+        run: |
+          npm list --depth=1 || true
+
       - name: Run ESLint
         uses: tj-actions/eslint-changed-files@v21
         with:

.github/workflows/fun_tests.yml

@@ -98,6 +98,10 @@ jobs:
           cd ./tests/functional
           yarn install --frozen-lockfile
 
+      - name: "[DEBUG] Print installed npm packages"
+        run: |
+          npm list --depth=1 || true
+
       - name: Run Cypress test suite
         timeout-minutes: 40
         env:

.github/workflows/unit_tests.yml

@@ -47,8 +47,15 @@ jobs:
           restore-keys: |
             yarn-${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-
 
+      - name: Install dependencies for unit tests
+        run: yarn install --frozen-lockfile
+
+      - name: "[DEBUG] Print installed npm packages"
+        run: |
+          npm list --depth=1 || true
+
       - name: Run unit tests
-        run: yarn install --frozen-lockfile && yarn test:coverage
+        run: yarn test:coverage
 
       # - name: Upload coverage to Codecov
       #   uses: codecov/[email protected]

src/components/BottomBar/Controls.js

@@ -48,10 +48,15 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
 
     if (isInProgress) return;
     setIsInProgress(true);
+
+    const selected = store.annotationStore?.selected;
+
     if(addedCommentThisSession){
+      selected?.submissionInProgress();
       callback();
     } else if((currentComment ?? '').trim()) {
       e.preventDefault();
+      selected?.submissionInProgress();
       await commentFormSubmit();
       callback();
     } else {
@@ -74,7 +79,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
           if(store.hasInterface('comments:reject') ?? true) {
             buttonHandler(e, () => store.rejectAnnotation({}), 'Please enter a comment before rejecting');
           } else {
-            console.log('rejecting');
+            const selected = store.annotationStore?.selected;
+
+            selected?.submissionInProgress();
             await store.commentStore.commentFormSubmit();
             store.rejectAnnotation({});
           }
@@ -91,6 +98,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
     buttons.push(
       <ButtonTooltip key="accept" title="Accept annotation: [ Ctrl+Enter ]">
         <Button aria-label="accept-annotation" disabled={disabled} look="primary" onClick={async () => {
+          const selected = store.annotationStore?.selected;
+
+          selected?.submissionInProgress();
           await store.commentStore.commentFormSubmit();
           store.acceptAnnotation();
         }}>
@@ -106,6 +116,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
     buttons.push(
       <ButtonTooltip key="cancel-skip" title="Cancel skip: []">
         <Button aria-label="cancel-skip" disabled={disabled} look="primary" onClick={async () => {
+          const selected = store.annotationStore?.selected;
+
+          selected?.submissionInProgress();
           await store.commentStore.commentFormSubmit();
           store.unskipTask();
         }}>
@@ -121,6 +134,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
             if(store.hasInterface('comments:skip') ?? true) {
               buttonHandler(e, () => store.skipTask({}), 'Please enter a comment before skipping');
             } else {
+              const selected = store.annotationStore?.selected;
+
+              selected?.submissionInProgress();
               await store.commentStore.commentFormSubmit();
               store.skipTask({});
             }
@@ -146,6 +162,10 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
             onClick={async (event) => {
               event.preventDefault();
 
+              const selected = store.annotationStore?.selected;
+
+              selected?.submissionInProgress();
+
               if ('URLSearchParams' in window) {
                 const searchParams = new URLSearchParams(window.location.search);
 
@@ -154,6 +174,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
 
                 window.history.pushState(null, '', newRelativePathQuery);
               }
+
               await store.commentStore.commentFormSubmit();
               onClickMethod();
             }}
@@ -179,6 +200,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
                 mod={{ has_icon: useExitOption, disabled: isDisabled }}
                 onClick={async (event) => {
                   if (event.target.classList.contains('lsf-dropdown__trigger')) return;  
+                  const selected = store.annotationStore?.selected;
+
+                  selected?.submissionInProgress();
                   await store.commentStore.commentFormSubmit();
                   store.submitAnnotation();
                 }}
@@ -211,6 +235,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
               mod={{ has_icon: useExitOption, disabled: isDisabled }}
               onClick={async (event) => {
                 if (event.target.classList.contains('lsf-dropdown__trigger')) return;
+                const selected = store.annotationStore?.selected;
+
+                selected?.submissionInProgress();
                 await store.commentStore.commentFormSubmit();
                 store.updateAnnotation();
               }}
@@ -241,6 +268,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
           <ButtonTooltip key="submit" title={title}>
             <Elem name="tooltip-wrapper">
               <Button aria-label="submit" disabled={disabled || submitDisabled} look={look} onClick={async () => {
+                const selected = store.annotationStore?.selected;
+
+                selected?.submissionInProgress();
                 await store.commentStore.commentFormSubmit();
                 store.submitAnnotation();
               }}>
@@ -256,6 +286,9 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
         const button = (
           <ButtonTooltip key="update" title="Update this task: [ Alt+Enter ]">
             <Button aria-label="submit" disabled={disabled || submitDisabled} look={look} onClick={async () => {
+              const selected = store.annotationStore?.selected;
+
+              selected?.submissionInProgress();
               await store.commentStore.commentFormSubmit();
               store.updateAnnotation();
             }}>

src/components/ImageTransformer/ImageTransformer.js

@@ -207,6 +207,10 @@ export default class TransformerComponent extends Component {
           dragBoundFunc={this.dragBoundFunc}
           onDragEnd={() => {
             this.unfreeze();
+            setTimeout(this.checkNode);
+          }}
+          onTransformEnd={() => {
+            setTimeout(this.checkNode);
           }}
           backSelector={this.props.draggableBackgroundSelector}
         />
@@ -249,6 +253,10 @@ export default class TransformerComponent extends Component {
           dragBoundFunc={this.dragBoundFunc}
           onDragEnd={() => {
             this.unfreeze();
+            setTimeout(this.checkNode);
+          }}
+          onTransformEnd={() => {
+            setTimeout(this.checkNode);
           }}
           backSelector={this.props.draggableBackgroundSelector}
         />

src/components/ImageView/Image.js

@@ -16,6 +16,14 @@ export const RELATIVE_STAGE_WIDTH = 100;
  */
 export const RELATIVE_STAGE_HEIGHT = 100;
 
+/**
+ * Mode of snapping to pixel
+ */
+export const SNAP_TO_PIXEL_MODE = {
+  EDGE: 'edge',
+  CENTER: 'center',
+};
+
 export const Image = observer(forwardRef(({
   imageEntity,
   imageTransform,

src/components/ImageView/ImageView.js

@@ -249,8 +249,8 @@ const TransformerBack = observer(({ item }) => {
           }}
           onDragStart={e => {
             dragStartPointRef.current = {
-              x: e.target.getAttr('x'),
-              y: e.target.getAttr('y'),
+              x: item.canvasToInternalX(e.target.getAttr('x')),
+              y: item.canvasToInternalY(e.target.getAttr('y')),
             };
           }}
           dragBoundFunc={(pos) => {

src/components/InstructionsModal/InstructionsModal.tsx

@@ -12,6 +12,8 @@ export const InstructionsModal = ({
   visible: boolean,
   onCancel: () => void,
 }) => {
+  const contentStyle: Record<string, string> = { padding: '0 24px 24px', whiteSpace: 'pre-wrap' };
+
   return (
     <>
       <Modal
@@ -45,7 +47,14 @@ export const InstructionsModal = ({
         >
           {title}
         </h2>
-        <p style={{ padding: '0 24px 24px', whiteSpace: 'pre-wrap' }}>{children}</p>
+        {typeof children === 'string' ? (
+          <p
+            style={contentStyle}
+            dangerouslySetInnerHTML={{ __html: children }}
+          />
+        ) : (
+          <p style={contentStyle}>{children}</p>
+        )}
       </Modal>
     </>
   );

src/components/InstructionsModal/__tests__/InstructionsModal.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { InstructionsModal } from '../InstructionsModal';
 
 describe('InstructionsModal Component', () => {
@@ -16,6 +16,20 @@ describe('InstructionsModal Component', () => {
     expect(document.body.contains(getByText('Test Children'))).toBe(true);
   });
 
+  it('should render html', () => {
+    const title = 'Test Title';
+    const children = '<h1 style="color: red;">Test Children</h1>';
+
+    render(
+      <InstructionsModal title={title} visible={true} onCancel={() => {}}>
+        {children}
+      </InstructionsModal>,
+    );
+
+    expect(screen.queryByText('Test Children')).toBeTruthy();
+    expect(screen.queryByText('color: red')).toBeNull();
+  });
+
   it('should call onCancel when the modal is cancelled', () => {
     const onCancel = jest.fn();
     const { getByLabelText } = render(

src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx

@@ -293,6 +293,8 @@ const useEventHandlers = () => {
 
     if (wasNotSelected) {
       annotation.selectArea(self);
+      // post-select hook
+      self.onSelectInOutliner?.(wasNotSelected);
     } else {
       annotation.unselectAll();
     }

src/regions/KeyPointRegion.js

@@ -47,11 +47,16 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
     },
 
     setPosition(x, y) {
-      self.x = x;
-      self.y = y;
+      const point = self.control?.getSnappedPoint({
+        x: self.parent.canvasToInternalX(x),
+        y: self.parent.canvasToInternalY(y),
+      });
 
-      self.relativeX = (x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
-      self.relativeY = (y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
+      self.x = point.x;
+      self.y = point.y;
+
+      self.relativeX = (point.x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (point.y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
     },
 
     updateImageSize(wp, hp, sw, sh) {
@@ -117,8 +122,13 @@ const Model = types
   }))
   .actions(self => ({
     setPosition(x, y) {
-      self.x = self.parent.canvasToInternalX(x);
-      self.y = self.parent.canvasToInternalY(y);
+      const point = self.control?.getSnappedPoint({
+        x: self.parent.canvasToInternalX(x),
+        y: self.parent.canvasToInternalY(y),
+      });
+
+      self.x = point.x;
+      self.y = point.y;
     },
 
     updateImageSize() {},
@@ -227,6 +237,8 @@ const HtxKeyPointView = ({ item, setShapeRef }) => {
           const t = e.target;
 
           item.setPosition(t.getAttr('x'), t.getAttr('y'));
+          t.setAttr('x', item.canvasX);
+          t.setAttr('y', item.canvasY);
           item.annotation.history.unfreeze(item.id);
           item.notifyDrawingFinished();
         }}