feat(gallery): add search

ui/src/db-tables/MediaTable.ts

@@ -3,6 +3,7 @@ import { Table, workflowsTable } from "./WorkspaceDB";
 import { TableBase } from "./TableBase";
 import { Media } from "../types/dbTypes";
 import { indexdb } from "./indexdb";
+import { getMetadataFromUrl } from "../gallery/utils.ts";
 
 export class MediaTable extends TableBase<Media> {
   static readonly TABLE_NAME: Table = "media";
@@ -24,15 +25,21 @@ export class MediaTable extends TableBase<Media> {
   }): Promise<Media | null> {
     const format = input.localPath.split(".").pop();
     if (format == null) return null;
+    //link media to workflow
+    const workflow = await workflowsTable?.get(input.workflowID);
+
+    const res = await getMetadataFromUrl(
+      `/workspace/view_media?filename=${input.localPath}`,
+    );
+
     const md: Media = {
       id: uuidv4(),
       localPath: input.localPath,
       workflowID: input.workflowID,
       createTime: Date.now(),
+      workflowJSON: JSON.stringify(res?.workflow),
       format: format,
     };
-    //link media to workflow
-    const workflow = await workflowsTable?.get(input.workflowID);
     const newMedia = new Set(workflow?.mediaIDs ?? []).add(md.id);
     await workflowsTable?.updateMetaInfo(input.workflowID, {
       mediaIDs: Array.from(newMedia),

ui/src/gallery/GalleryModal.tsx

@@ -1,23 +1,25 @@
 import {
+  Checkbox,
+  Flex,
+  Heading,
   HStack,
-  Text,
+  IconButton,
   Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
   ModalBody,
   ModalCloseButton,
-  IconButton,
-  Heading,
-  Checkbox,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
 } from "@chakra-ui/react";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { mediaTable, workflowsTable } from "../db-tables/WorkspaceDB";
 import { IconArrowLeft, IconX } from "@tabler/icons-react";
 import { WorkspaceContext } from "../WorkspaceContext";
 import { Media } from "../types/dbTypes";
 import { MetaDataInfo } from "./components/MetaDataInfo.tsx";
 import GalleryMediaItem from "./components/GalleryMediaItem.tsx";
+import SearchInput from "../components/SearchInput.tsx";
 
 export default function GalleryModal({ onclose }: { onclose: () => void }) {
   const { curFlowID } = useContext(WorkspaceContext);
@@ -27,6 +29,10 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
   const [coverPath, setCoverPath] = useState("");
   const [images, setImages] = useState<Media[]>([]);
   const [metaData, setMetaData] = useState<Media>();
+  const [searchValue, setSearchValue] = useState("");
+  const onUpdateSearchValue = (val: string) => {
+    setSearchValue(val);
+  };
 
   const loadData = async () => {
     if (curFlowID == null) return;
@@ -45,6 +51,14 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
       });
   }, []);
 
+  const calcImages = useMemo(
+    () =>
+      images?.filter((v) =>
+        /*!v?.workflowJSON || */ v.workflowJSON?.includes(searchValue ?? ""),
+      ),
+    [images, searchValue],
+  );
+
   if (curFlowID == null) {
     return null;
   }
@@ -63,6 +77,7 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
   };
   const isAllSelected =
     images.length > 0 && selectedID.length === images.length;
+
   return (
     <Modal isOpen={true} onClose={onclose} blockScrollOnMount={true}>
       <ModalOverlay />
@@ -80,6 +95,14 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
                 />
               )}
               Gallery - {workflowName}
+              {!metaData && (
+                <Flex gap={2} display={"inline-flex"} ml={2}>
+                  <SearchInput
+                    searchValue={searchValue}
+                    onUpdateSearchValue={onUpdateSearchValue}
+                  />
+                </Flex>
+              )}
             </Heading>
             {/* <Button
               size={"sm"}
@@ -121,7 +144,7 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
         <ModalBody overflowY={"auto"}>
           {!metaData ? (
             <HStack wrap={"wrap"}>
-              {images.map((media) => {
+              {calcImages.map((media) => {
                 return (
                   <GalleryMediaItem
                     key={media.id}

ui/src/types/dbTypes.ts

@@ -114,6 +114,7 @@ export type Changelog = {
 export type Media = {
   id: string;
   workflowID: string;
+  workflowJSON?: string;
   createTime: number;
   localPath: string;
   format: string;