[mod] removes AsyncProvider

- moves loading of exemple image to application component
- adds conditional rendering of loading screen
- closes #557

Author: Andrea-Papaleo

src/components/lists/CategoriesList/CategoriesList.tsx

@@ -25,14 +25,12 @@ import { Category } from "store/data/types";
 import {
   selectActiveCategories,
   selectActiveSelectedThingIds,
-  selectActiveUnknownCategory,
 } from "store/project/reselectors";
 import { selectClassifierModelStatus } from "store/classifier/selectors";
 
 export const CategoriesList = () => {
   const dispatch = useDispatch();
   const categories = useSelector(selectActiveCategories);
-  const activeUnknownCategory = useSelector(selectActiveUnknownCategory);
   const activeKind = useSelector(selectActiveKindId);
   const [selectedCategory, setSelectedCategory] = useState<Category>();
   const [categoryIndex, setCategoryIndex] = useState("");
@@ -201,13 +199,15 @@ export const CategoriesList = () => {
           }
         />
       </List>
+      {selectedCategory && (
+        <CategoryItemMenu
+          anchorElCategoryMenu={categoryMenuAnchorEl}
+          category={selectedCategory}
+          handleCloseCategoryMenu={onCloseCategoryMenu}
+          openCategoryMenu={Boolean(categoryMenuAnchorEl)}
+        />
+      )}
 
-      <CategoryItemMenu
-        anchorElCategoryMenu={categoryMenuAnchorEl}
-        category={selectedCategory ?? activeUnknownCategory}
-        handleCloseCategoryMenu={onCloseCategoryMenu}
-        openCategoryMenu={Boolean(categoryMenuAnchorEl)}
-      />
       <CreateCategoryDialog
         kind={activeKind}
         onClose={handleCloseCreateCategoryDialog}

src/index.tsx

@@ -3,16 +3,17 @@ import ReactDOM from "react-dom";
 // import * as serviceWorker from "./serviceWorker";
 
 import { DndProvider } from "react-dnd";
+import { Provider } from "react-redux";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { Application } from "views/Application";
-import { AsyncProvider } from "store/AsyncProvider";
+import { productionStore } from "store";
 
 ReactDOM.render(
-  <AsyncProvider>
+  <Provider store={productionStore}>
     <DndProvider backend={HTML5Backend}>
       <Application />
     </DndProvider>
-  </AsyncProvider>,
+  </Provider>,
   document.getElementById("root")
 );
 

src/store/AsyncProvider.tsx

@@ -6,6 +6,7 @@ import { getCompleteEntity, getDeferredProperty } from "store/entities/utils";
 import { intersection } from "lodash";
 
 import {
+  generateUnknownCategory,
   generateUUID,
   isUnknownCategory,
   mutatingFilter,
@@ -30,6 +31,7 @@ import {
 import { UNKNOWN_CATEGORY_NAME } from "./constants";
 import { updateContents } from "./helpers";
 
+const unknownCategory = generateUnknownCategory("Image");
 export const kindsAdapter = createDeferredEntityAdapter<Kind>();
 export const categoriesAdapter = createDeferredEntityAdapter<Category>();
 export const thingsAdapter = createDeferredEntityAdapter<
@@ -38,8 +40,29 @@ export const thingsAdapter = createDeferredEntityAdapter<
 
 export const initialState = (): DataState => {
   return {
-    kinds: kindsAdapter.getInitialState(),
-    categories: categoriesAdapter.getInitialState(),
+    kinds: kindsAdapter.getInitialState({
+      ids: ["Image"],
+      entities: {
+        Image: {
+          saved: {
+            id: "Image",
+            containing: [],
+            categories: [unknownCategory.id],
+            unknownCategoryId: unknownCategory.id,
+          },
+          changes: {},
+        },
+      },
+    }),
+    categories: categoriesAdapter.getInitialState({
+      ids: [unknownCategory.id],
+      entities: {
+        [unknownCategory.id]: {
+          saved: unknownCategory,
+          changes: {},
+        },
+      },
+    }),
     things: thingsAdapter.getInitialState(),
   };
 };

src/store/data/dataSlice.ts

@@ -36,13 +36,15 @@ export const selectActiveKindObject = createSelector(
 export const selectActiveUnknownCategoryId = createSelector(
   selectActiveKindObject,
   (activeKind) => {
+    if (!activeKind) return;
     return activeKind.unknownCategoryId;
   }
 );
 
 export const selectActiveCategories = createSelector(
   [selectKindDictionary, selectCategoriesDictionary, selectActiveKindId],
   (kindDict, categoriesDict, kind) => {
+    if (!kindDict[kind]) return [];
     const categoriesOfKind = kindDict[kind].categories;
 
     return categoriesOfKind.map((catId) => categoriesDict[catId]);
@@ -60,6 +62,7 @@ export const selectActiveUnknownCategory = createSelector(
   selectActiveUnknownCategoryId,
   selectCategoriesDictionary,
   (unknownCatId, catDict) => {
+    if (!unknownCatId) return;
     return catDict[unknownCatId];
   }
 );
@@ -113,6 +116,7 @@ export const selectUnfilteredActiveCategoryIds = createSelector(
 export const selectActiveThingIds = createSelector(
   selectActiveKindObject,
   (kind) => {
+    if (!kind) return [];
     return kind.containing;
   }
 );

src/store/project/reselectors.ts

@@ -1,27 +1,74 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-
+import { useDispatch } from "react-redux";
+import { CssBaseline } from "@mui/material";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 
 import { usePreferredMuiTheme } from "hooks";
 
 import { ProjectViewer } from "views/ProjectViewer";
 import { ImageViewer } from "views/ImageViewer";
 import { MeasurementView } from "views/MeasurementView";
+import { loadExampleImage } from "utils/file-io/loadExampleImage";
+import colorImage from "images/cell-painting.png";
+import { cellPaintingAnnotations } from "data/exampleImages";
+import { OldAnnotationType, OldCategory, OldImageType } from "store/data/types";
+import { dataConverter_v1v2 } from "utils/file-io/converters/dataConverter_v1v2";
+import { SerializedFileType } from "utils/file-io/types";
+import { dataSlice } from "store/data";
+import { LoadingScreen } from "./LoadingScreen";
 
 export const Application = () => {
   const theme = usePreferredMuiTheme();
+  const dispatch = useDispatch();
+  const [hasLoaded, setHasLoaded] = useState(false);
+
+  const loadDataState = useCallback(async () => {
+    const { image, annotationCategories, annotations } =
+      (await loadExampleImage(
+        colorImage,
+        cellPaintingAnnotations as SerializedFileType,
+        // imageFile.name points to
+        // "/static/media/cell-painting.f118ef087853056f08e6.png"
+        "cell-painting.png"
+      )) as {
+        image: OldImageType;
+        annotationCategories: OldCategory[];
+        annotations: OldAnnotationType[];
+      };
+
+    const dataState = dataConverter_v1v2({
+      images: [image],
+      oldCategories: [],
+      annotations,
+      annotationCategories,
+    });
+
+    dispatch(dataSlice.actions.initializeState({ data: dataState }));
+    setHasLoaded(true);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!hasLoaded) {
+      loadDataState();
+    }
+  }, [loadDataState, hasLoaded]);
 
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <BrowserRouter basename={"/"}>
-          <Routes>
-            <Route path="/" element={<ProjectViewer />} />
-            <Route path="imageviewer" element={<ImageViewer />} />
-            <Route path="measurements" element={<MeasurementView />} />
-          </Routes>
-        </BrowserRouter>
+        <CssBaseline />
+        {hasLoaded ? (
+          <BrowserRouter basename={"/"}>
+            <Routes>
+              <Route path="/" element={<ProjectViewer />} />
+              <Route path="imageviewer" element={<ImageViewer />} />
+              <Route path="measurements" element={<MeasurementView />} />
+            </Routes>
+          </BrowserRouter>
+        ) : (
+          <LoadingScreen />
+        )}
       </ThemeProvider>
     </StyledEngineProvider>
   );

src/views/Application/Application.tsx

@@ -0,0 +1,26 @@
+import { Box, Typography } from "@mui/material";
+import { Logo } from "components/styled-components/Logo";
+
+export const LoadingScreen = () => {
+  return (
+    <Box
+      sx={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Logo width={250} height={50} />
+        <Typography pt={1}>Loading initial state...</Typography>
+      </Box>
+    </Box>
+  );
+};

src/views/Application/LoadingScreen.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState, useRef } from "react";
 import Konva from "konva";
 import { useDispatch, useSelector } from "react-redux";
 import { ErrorBoundary } from "react-error-boundary";
-import { AppBar, Box, CssBaseline } from "@mui/material";
+import { AppBar, Box } from "@mui/material";
 
 import { useMobileView, useUpload } from "hooks";
 
@@ -136,7 +136,6 @@ export const ImageViewer = () => {
             </AppBar>
           )}
 
-          <CssBaseline />
           {isMobile ? <></> : <ImageViewerDrawer />}
 
           <StageWrapper

src/views/ImageViewer/ImageViewer.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ErrorBoundary } from "react-error-boundary";
 
-import { Box, CssBaseline } from "@mui/material";
+import { Box } from "@mui/material";
 
 import {
   useErrorHandler,
@@ -103,7 +103,6 @@ export const ProjectViewer = () => {
       <ErrorBoundary FallbackComponent={FallBackDialog}>
         <div tabIndex={-1}>
           <Box sx={{ height: "100vh" }}>
-            <CssBaseline />
             <ProjectAppBar />
 
             <ProjectDrawer />