🔬 Wiring up the image analysis UI with the endpoint

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -14,16 +14,13 @@ export const Menu = (props): ReactElement => {
     let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
 
     if (!isUndefined(data.rawFileDetails)) {
+      console.log(data.rawFileDetails);
       issueSearchQuery = refineQuery(data.rawFileDetails.name);
-      if (data.rawFileDetails.containedIn !== "comics") {
-        seriesSearchQuery = refineQuery(
-          data.rawFileDetails.containedIn.split("/").pop(),
-        );
-      }
     } else if (!isEmpty(data.sourcedMetadata)) {
       issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
     }
 
+    console.log(seriesSearchQuery);
     dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
     setSlidingPanelContentId("CVMatches");
     setVisible(true);

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -1,9 +1,11 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement, useCallback, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { DnD } from "../../DnD";
 import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
-import { extractComicArchive } from "../../../actions/comicinfo.actions";
+import SlidingPane from "react-sliding-pane";
+import { extractComicArchive } from "../../../actions/fileops.actions";
+import { analyzeImage } from "../../../actions/fileops.actions";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
@@ -14,23 +16,52 @@ export const ArchiveOperations = (props): ReactElement => {
     (state: RootState) => state.fileOps.extractedComicBookArchive,
   );
 
+  const imageAnalysisResult = useSelector(
+    (state: RootState) => state.fileOps.imageAnalysisResults,
+  );
+
   const dispatch = useDispatch();
   const unpackComicArchive = useCallback(() => {
     dispatch(
-      extractComicArchive(
-        data.rawFileDetails.containedIn +
-          "/" +
-          data.rawFileDetails.name +
-          data.rawFileDetails.extension,
-        {
-          extractTarget: "book",
-          targetExtractionFolder:
-            "./userdata/expanded/" + data.rawFileDetails.name,
-          extractionMode: "all",
-        },
-      ),
+      extractComicArchive(data.rawFileDetails.filePath, {
+        extractTarget: "book",
+        targetExtractionFolder:
+          "./userdata/expanded/" + data.rawFileDetails.name,
+        extractionMode: "all",
+      }),
     );
   }, [dispatch, data]);
+
+  // sliding panel config
+  const [visible, setVisible] = useState(false);
+  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
+  // current image
+  const [currentImage, setCurrentImage] = useState([]);
+
+  // sliding panel init
+  const contentForSlidingPanel = {
+    imageAnalysis: {
+      content: () => {
+        return (
+          <div>
+            <pre>{currentImage}</pre>
+            <pre className="is-size-7">
+              {JSON.stringify(imageAnalysisResult, null, 2)}
+            </pre>
+          </div>
+        );
+      },
+    },
+  };
+
+  // sliding panel handlers
+  const openImageAnalysisPanel = useCallback((imageFilePath) => {
+    setSlidingPanelContentId("imageAnalysis");
+    dispatch(analyzeImage(imageFilePath));
+    setCurrentImage(imageFilePath);
+    setVisible(true);
+  }, []);
+
   return (
     <div key={2}>
       <button
@@ -49,7 +80,10 @@ export const ArchiveOperations = (props): ReactElement => {
       <div className="columns">
         <div className="mt-5">
           {!isEmpty(extractedComicBookArchive) ? (
-            <DnD data={extractedComicBookArchive} />
+            <DnD
+              data={extractedComicBookArchive}
+              onClickHandler={openImageAnalysisPanel}
+            />
           ) : null}
         </div>
         {!isEmpty(extractedComicBookArchive) ? (
@@ -70,6 +104,15 @@ export const ArchiveOperations = (props): ReactElement => {
           </div>
         ) : null}
       </div>
+      <SlidingPane
+        isOpen={visible}
+        onRequestClose={() => setVisible(false)}
+        title={"Image Analysis"}
+        width={"600px"}
+      >
+        {slidingPanelContentId !== "" &&
+          contentForSlidingPanel[slidingPanelContentId].content()}
+      </SlidingPane>
     </div>
   );
 };

src/client/components/Cover.tsx

@@ -18,7 +18,7 @@ export const Cover = forwardRef(
       ...style,
     };
 
-    return <div ref={ref} style={inlineStyles} {...props} />;
+    return <div ref={ref} style={inlineStyles} {...props}></div>;
   },
 );
 

src/client/components/DnD.tsx

@@ -18,7 +18,7 @@ import {
 import { Grid } from "./Grid";
 import { SortableCover } from "./SortableCover";
 import { Cover } from "./Cover";
-import {  map } from "lodash";
+import { map } from "lodash";
 
 export const DnD = (data) => {
   const [items, setItems] = useState(data.data);
@@ -57,7 +57,25 @@ export const DnD = (data) => {
       <SortableContext items={items} strategy={rectSortingStrategy}>
         <Grid columns={4}>
           {map(items, (url, index) => {
-            return <SortableCover key={url} url={url} index={index} />;
+            return (
+              <div>
+                <SortableCover key={url} url={url} index={index} />
+                <div
+                  className="mt-2 mb-2"
+                  onClick={(e) => data.onClickHandler(url)}
+                >
+                  <div className="box p-2 pl-3 control-palette">
+                    <span className="tag is-warning mr-2">{index}</span>
+                    <span className="icon is-small mr-2">
+                      <i className="fa-solid fa-vial"></i>
+                    </span>
+                    <span className="icon is-small mr-2">
+                      <i className="fa-regular fa-trash-can"></i>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            );
           })}
         </Grid>
       </SortableContext>

src/client/components/VolumeDetail/PotentialLibraryMatches.tsx

@@ -9,6 +9,7 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import prettyBytes from "pretty-bytes";
 
 const PotentialLibraryMatches = (props): ReactElement => {
+  console.log(props);
   const dispatch = useDispatch();
   const comicBooks = useSelector(
     (state: RootState) => state.comicInfo.comicBooksDetails,
@@ -64,7 +65,7 @@ const PotentialLibraryMatches = (props): ReactElement => {
           );
         })
       ) : (
-        <div>asdasd</div>
+        <div>No matches found in library.</div>
       )}
     </div>
   );

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -19,7 +19,7 @@ const VolumeDetails = (props): ReactElement => {
     default: 6,
     1100: 4,
     700: 3,
-    600: 2,
+    500: 2,
   };
   // sliding panel config
   const [visible, setVisible] = useState(false);