fix: enable loading images from the same webSource

zakodium-oss · May 23, 2024 · bcacfd7 · bcacfd7
1 parent 997916d
commit bcacfd7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/components/AutoLoader.tsx b/src/components/AutoLoader.tsx
@@ -6,10 +6,11 @@ import useLog from '../hooks/useLog';
 
 interface AutoLoaderProps {
   webSource?: WebSource;
+  setWebSource?: (webSource: WebSource) => void;
   children: ReactNode;
 }
 
-function AutoLoader({ children, webSource }: AutoLoaderProps) {
+function AutoLoader({ children, webSource, setWebSource }: AutoLoaderProps) {
   const { handleWebSource } = useFileLoader();
   const { logger } = useLog();
 
@@ -19,7 +20,9 @@ function AutoLoader({ children, webSource }: AutoLoaderProps) {
     handleWebSource(webSource).catch((error) => {
       logger.error(`Error while loading websource: ${error.message}`);
     });
-  }, [handleWebSource, logger, webSource]);
+
+    setWebSource?.({ entries: [] });
+  }, [handleWebSource, logger, webSource, setWebSource]);
 
   return children;
 }

diff --git a/src/components/Pixelium.tsx b/src/components/Pixelium.tsx
@@ -55,6 +55,7 @@ interface PixeliumProps {
   preferences?: PreferencesState;
   view?: ViewState;
   webSource?: WebSource;
+  setWebSource?: (webSource: WebSource) => void;
 }
 
 const PixeliumMainStyle = styled.div`
@@ -64,7 +65,13 @@ const PixeliumMainStyle = styled.div`
   overflow: hidden;
 `;
 
-function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
+function Pixelium({
+  data,
+  preferences,
+  view,
+  webSource,
+  setWebSource,
+}: PixeliumProps) {
   // Refs
   const rootRef = useRef<HTMLDivElement>(null);
 
@@ -104,7 +111,10 @@ function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
                     <PipelineProvider identifier={viewState.currentTab}>
                       <ROIProvider value={roiState}>
                         <AnnotationsProvider>
-                          <AutoLoader webSource={webSource}>
+                          <AutoLoader
+                            webSource={webSource}
+                            setWebSource={setWebSource}
+                          >
                             <PixeliumStyle ref={rootRef}>
                               <Header />
                               <PixeliumMainStyle>

diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
@@ -60,8 +60,6 @@ function Sidebar({ setWebSource }: SidebarProps) {
     sections: [],
   });
 
-  const [selectedSource, setSelectedSource] = useState<WebSource>();
-
   useEffect(() => {
     ky.get('https://image-js.github.io/image-dataset-demo/toc.json')
       .json<TocResponse>()
@@ -72,12 +70,6 @@ function Sidebar({ setWebSource }: SidebarProps) {
       });
   }, []);
 
-  useEffect(() => {
-    if (selectedSource) {
-      setWebSource(selectedSource);
-    }
-  }, [selectedSource, setWebSource]);
-
   return (
     <StyledSidebar>
       <h1>Pixelium</h1>
@@ -91,7 +83,7 @@ function Sidebar({ setWebSource }: SidebarProps) {
                 <Button
                   key={source.name}
                   onClick={() => {
-                    setSelectedSource(source.source);
+                    setWebSource(source.source);
                   }}
                   fill
                 >

diff --git a/src/demo/views/MainView.tsx b/src/demo/views/MainView.tsx
@@ -27,7 +27,7 @@ function MainView() {
     <MainViewWrapper>
       <Sidebar setWebSource={setWebSource} />
       <PixeliumWrapper>
-        <Pixelium webSource={webSource} />
+        <Pixelium webSource={webSource} setWebSource={setWebSource} />
       </PixeliumWrapper>
     </MainViewWrapper>
   );