Release develop annotation service

.dockerignore

@@ -0,0 +1 @@
+node_modules

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}/apps/editor"
+    }
+  ]
+}

.vscode/settings.json

@@ -21,5 +21,6 @@
   },
   "[dockerfile]": {
     "editor.defaultFormatter": "ms-azuretools.vscode-docker"
-  }
+  },
+  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }]
 }

Dockerfile.editor

@@ -0,0 +1,18 @@
+FROM node:18 as build
+
+ENV NODE_ENV=production
+
+WORKDIR /app
+
+COPY .yarn .yarn
+COPY package.json yarn.lock .yarnrc.yml ./
+RUN yarn install
+
+COPY . .
+ARG NX_ANNOTATION_SERVICE_HUB_URL
+RUN yarn build editor --prod
+
+FROM nginx:alpine
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist/apps/editor /usr/share/nginx/html
+EXPOSE 80

README.md

@@ -48,6 +48,8 @@ Omitting an app name starts the default app.
 After running this command, the app will be available at the URL printed in the console.<br />
 The app will automatically reload if you change any of the source files.
 
+It is possible to use VISIAN with the annotation-service backend. The location of the backend is set via the environment variable `NX_ANNOTATION_SERVICE_HUB_URL`. Assuming the backend is located at `localhost:3000`, you can use the shortcut `yarn start:hub`.
+
 ### `yarn format [<app-name>]`
 
 Runs automated code formatting on all applicable file types.

apps/ar-demo/src/components/icons/index.ts

@@ -1,6 +1,6 @@
-export { ReactComponent as SelectIcon } from "./select.svg";
+export { ReactComponent as SelectIcon } from "./select-ar.svg";
 export { ReactComponent as EraserIcon } from "./eraser-ar.svg";
-export { ReactComponent as DeleteIcon } from "./delete.svg";
+export { ReactComponent as DeleteIcon } from "./delete-ar.svg";
 export { ReactComponent as ClearIcon } from "./clear.svg";
 export { ReactComponent as InvertSelectionIcon } from "./invertSelection.svg";
 export { ReactComponent as UndoIcon } from "./undo-ar.svg";

apps/editor/project.json

@@ -6,6 +6,7 @@
   "targets": {
     "build": {
       "executor": "@nrwl/webpack:webpack",
+      "inputs": [{ "env": "NX_ANNOTATION_SERVICE_HUB_URL" }],
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {

apps/editor/src/app/app.tsx

@@ -11,16 +11,23 @@ import { Amplify } from "aws-amplify";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { Route, Routes } from "react-router-dom";
+import { ReactQueryDevtools } from "react-query/devtools";
+import { Navigate, Route, Routes } from "react-router-dom";
 
 import {
   whoAwsConfigDeployment,
   whoAwsConfigDevelopment,
   whoRequiresAuthentication,
 } from "../constants";
-import { setUpEventHandling } from "../event-handling";
 import type { RootStore } from "../models";
-import { EditorScreen } from "../screens";
+import { hubBaseUrl } from "../queries";
+import {
+  DatasetScreen,
+  EditorScreen,
+  JobScreen,
+  ProjectScreen,
+  ProjectsScreen,
+} from "../screens";
 import { setupRootStore, StoreProvider } from "./root-store";
 
 if (isFromWHO()) {
@@ -49,14 +56,8 @@ function App(): JSX.Element {
     const result = Promise.all([setupRootStore(), initI18n()]).then(
       ([rootStore]) => {
         rootStoreRef.current = rootStore;
-        const [dispatch, dispose] = setUpEventHandling(rootStore);
-        rootStore.pointerDispatch = dispatch;
-
         setIsReady(true);
-        return () => {
-          dispose();
-          rootStore.dispose();
-        };
+        return rootStore.dispose;
       },
     );
     return () => {
@@ -75,12 +76,36 @@ function App(): JSX.Element {
           {isReady && (
             <React.StrictMode>
               <ModalRoot />
-              <Routes>
-                <Route path="/" element={<EditorScreen />} />
-              </Routes>
+              {hubBaseUrl ? (
+                <Routes>
+                  <Route path="/projects" element={<ProjectsScreen />} />
+                  <Route
+                    path="/projects/:projectId"
+                    element={<ProjectScreen />}
+                  />
+                  <Route
+                    path="/datasets/:datasetId"
+                    element={<DatasetScreen />}
+                  />
+                  <Route path="/jobs/:jobId" element={<JobScreen />} />
+                  <Route
+                    path="/"
+                    element={<Navigate replace to="/projects" />}
+                  />
+                  <Route path="/editor" element={<EditorScreen />} />
+                  <Route path="*" element={<Navigate replace to="/" />} />
+                </Routes>
+              ) : (
+                <Routes>
+                  <Route path="/" element={<EditorScreen />} />
+                </Routes>
+              )}
             </React.StrictMode>
           )}
         </StoreProvider>
+        {process.env.NODE_ENV === "development" && (
+          <ReactQueryDevtools initialIsOpen={false} />
+        )}
       </QueryClientProvider>
     </ThemeProvider>
   );

apps/editor/src/app/root-store.ts

@@ -1,9 +1,10 @@
 import { i18n, LocalForageBackend } from "@visian/ui-shared";
-import { getWHOTaskIdFromUrl, isFromWHO, readFileFromURL } from "@visian/utils";
+import { isFromWHO, readFileFromURL } from "@visian/utils";
 import React from "react";
 
 import { storePersistInterval } from "../constants";
 import { RootStore } from "../models";
+import { WHOReviewStrategy } from "../models/review-strategy";
 
 export const storageBackend = new LocalForageBackend(
   storePersistInterval,
@@ -55,10 +56,8 @@ export const setupRootStore = async () => {
     }
 
     if (isFromWHO()) {
-      // Load scan from WHO
-      // Example: http://localhost:4200/?origin=who&taskId=0b2fb698-6e1d-4682-a986-78b115178d94
-      const taskId = getWHOTaskIdFromUrl();
-      if (taskId) await store.loadWHOTask(taskId);
+      store.setReviewStrategy(new WHOReviewStrategy({ store }));
+      store.reviewStrategy?.loadTask();
     }
   })();