fix: enable loading images from the same webSource (#120)

* fix: enable loading images from the same webSource * refactor: separate Pixelium into 2 components * refactor: remove webSource prop in pixelium component * Merge remote-tracking branch 'origin/main' into 117-cannot-load-image-twice * refactor: remove webSource
zakodium-oss · Jun 7, 2024 · 5418e3b · 5418e3b
1 parent 7369b60
commit 5418e3b
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 112 deletions.
diff --git a/src/components/AutoLoader.tsx b/src/components/AutoLoader.tsx
diff --git a/src/components/PixeliumApp.tsx b/src/components/PixeliumApp.tsx
@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import { memo, useRef } from 'react';
+import { SplitPane, Toolbar } from 'react-science/ui';
+
+import CenterPanel from './layout/CenterPanel';
+import Header from './layout/Header';
+import Sidebar from './layout/Sidebar';
+import ModalContainer from './modal/ModalContainer';
+import ExportTool from './tool/ExportTool';
+import GreyTool from './tool/FilterTool';
+import GeometryTool from './tool/GeometryTool';
+import ImportTool from './tool/ImportTool';
+import MaskTool from './tool/MaskTool';
+import MorphologyTool from './tool/MorphologyTool';
+import ROITool from './tool/ROITool';
+
+const PixeliumStyle = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+`;
+
+const PixeliumMainStyle = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+`;
+
+function PixeliumApp() {
+  // Refs
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <PixeliumStyle ref={rootRef}>
+      <Header />
+      <PixeliumMainStyle>
+        <Toolbar vertical>
+          <ImportTool />
+          <ExportTool />
+          <GreyTool />
+          <MaskTool />
+          <MorphologyTool />
+          <GeometryTool />
+          <ROITool />
+          <ModalContainer />
+        </Toolbar>
+        <SplitPane direction="horizontal" size="300px" controlledSide="end">
+          <CenterPanel />
+          <Sidebar />
+        </SplitPane>
+      </PixeliumMainStyle>
+    </PixeliumStyle>
+  );
+}
+
+export default memo(PixeliumApp);
diff --git a/src/components/Pixelium.tsx → src/components/PixeliumProvider.tsx b/src/components/Pixelium.tsx → src/components/PixeliumProvider.tsx
@@ -1,9 +1,14 @@
-import styled from '@emotion/styled';
-import { WebSource } from 'filelist-utils';
-import { memo, useCallback, useMemo, useReducer, useRef } from 'react';
+import {
+  memo,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
 import { KbsProvider } from 'react-kbs';
 import { RoiProvider } from 'react-roi';
-import { RootLayout, SplitPane, Toolbar } from 'react-science/ui';
+import { RootLayout } from 'react-science/ui';
 
 import useViewDispatch from '../hooks/useViewDispatch';
 import {
@@ -23,7 +28,6 @@ import {
   ViewState,
 } from '../state/view/ViewReducer';
 
-import AutoLoader from './AutoLoader';
 import { AnnotationsProvider } from './context/AnnotationsContext';
 import { DataProvider } from './context/DataContext';
 import { DispatchProvider } from './context/DispatchContext';
@@ -33,42 +37,22 @@ import { PreferencesProvider } from './context/PreferencesContext';
 import { initialROIState, ROIProvider, ROIReducer } from './context/ROIContext';
 import { RootProvider } from './context/RootContext';
 import { ViewProvider } from './context/ViewContext';
-import CenterPanel from './layout/CenterPanel';
-import Header from './layout/Header';
-import Sidebar from './layout/Sidebar';
-import ModalContainer from './modal/ModalContainer';
-import ExportTool from './tool/ExportTool';
-import GreyTool from './tool/FilterTool';
-import GeometryTool from './tool/GeometryTool';
-import ImportTool from './tool/ImportTool';
-import MaskTool from './tool/MaskTool';
-import MorphologyTool from './tool/MorphologyTool';
-import ROITool from './tool/ROITool';
-
-const PixeliumStyle = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-`;
 
 interface PixeliumProps {
   data?: DataState;
   preferences?: PreferencesState;
   view?: ViewState;
-  webSource?: WebSource;
+  children: ReactNode;
 }
 
-const PixeliumMainStyle = styled.div`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  overflow: hidden;
-`;
-
-function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
+function PixeliumProvider({
+  data,
+  preferences,
+  view,
+  children,
+}: PixeliumProps) {
   const viewDispatch = useViewDispatch();
+
   // Refs
   const rootRef = useRef<HTMLDivElement>(null);
 
@@ -149,33 +133,7 @@ function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
                           }}
                           onAfterZoomChange={setPanZoom}
                         >
-                          <AnnotationsProvider>
-                            <AutoLoader webSource={webSource}>
-                              <PixeliumStyle ref={rootRef}>
-                                <Header />
-                                <PixeliumMainStyle>
-                                  <Toolbar vertical>
-                                    <ImportTool />
-                                    <ExportTool />
-                                    <GreyTool />
-                                    <MaskTool />
-                                    <MorphologyTool />
-                                    <GeometryTool />
-                                    <ROITool />
-                                    <ModalContainer />
-                                  </Toolbar>
-                                  <SplitPane
-                                    direction="horizontal"
-                                    size="400px"
-                                    controlledSide="end"
-                                  >
-                                    <CenterPanel />
-                                    <Sidebar />
-                                  </SplitPane>
-                                </PixeliumMainStyle>
-                              </PixeliumStyle>
-                            </AutoLoader>
-                          </AnnotationsProvider>
+                          <AnnotationsProvider>{children}</AnnotationsProvider>
                         </RoiProvider>
                       </ROIProvider>
                     </PipelineProvider>
@@ -190,4 +148,4 @@ function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
   );
 }
 
-export default memo(Pixelium);
+export default memo(PixeliumProvider);
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
@@ -4,6 +4,9 @@ import ky from 'ky';
 import { Fragment, memo, useEffect, useState } from 'react';
 import { Button } from 'react-science/ui';
 
+import useFileLoader from '../hooks/useFileLoader';
+import useLog from '../hooks/useLog';
+
 const StyledSidebar = styled.div`
   display: flex;
   flex-direction: column;
@@ -50,18 +53,15 @@ interface TocResponse {
   }[];
 }
 
-interface SidebarProps {
-  setWebSource: (webSource: WebSource) => void;
-}
+function Sidebar() {
+  const { handleWebSource } = useFileLoader();
+  const { logger } = useLog();
 
-function Sidebar({ setWebSource }: SidebarProps) {
   const [toc, setToC] = useState<TocResponse>({
     title: '',
     sections: [],
   });
 
-  const [selectedSource, setSelectedSource] = useState<WebSource>();
-
   useEffect(() => {
     ky.get('https://image-js.github.io/image-dataset-demo/toc.json')
       .json<TocResponse>()
@@ -72,12 +72,6 @@ function Sidebar({ setWebSource }: SidebarProps) {
       });
   }, []);
 
-  useEffect(() => {
-    if (selectedSource) {
-      setWebSource(selectedSource);
-    }
-  }, [selectedSource, setWebSource]);
-
   return (
     <StyledSidebar>
       <h1>Pixelium</h1>
@@ -91,7 +85,11 @@ function Sidebar({ setWebSource }: SidebarProps) {
                 <Button
                   key={source.name}
                   onClick={() => {
-                    setSelectedSource(source.source);
+                    handleWebSource(source.source).catch((error) => {
+                      logger.error(
+                        `Error while loading websource: ${error.message}`,
+                      );
+                    });
                   }}
                   fill
                 >

diff --git a/src/demo/views/MainView.tsx b/src/demo/views/MainView.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { WebSource } from 'filelist-utils';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 
-import Pixelium from '../../components/Pixelium';
+import PixeliumApp from '../../components/PixeliumApp';
+import PixeliumProvider from '../../components/PixeliumProvider';
 import Sidebar from '../Sidebar';
 
 const MainViewWrapper = styled.div`
@@ -21,15 +21,15 @@ const PixeliumWrapper = styled.div`
 `;
 
 function MainView() {
-  const [webSource, setWebSource] = useState<WebSource>();
-
   return (
-    <MainViewWrapper>
-      <Sidebar setWebSource={setWebSource} />
-      <PixeliumWrapper>
-        <Pixelium webSource={webSource} />
-      </PixeliumWrapper>
-    </MainViewWrapper>
+    <PixeliumProvider>
+      <MainViewWrapper>
+        <Sidebar />
+        <PixeliumWrapper>
+          <PixeliumApp />
+        </PixeliumWrapper>
+      </MainViewWrapper>
+    </PixeliumProvider>
   );
 }