From 986b303f2f5a42d160825a4ad81ba6b90859f616 Mon Sep 17 00:00:00 2001 From: caranicas Date: Mon, 26 Sep 2022 17:36:21 -0400 Subject: [PATCH] reselct and delete working --- .../basicCreation/makeButton/index.tsx | 3 + .../displayPanel/completedImages/index.tsx | 34 +-- .../displayPanel/currentDisplay/index.tsx | 30 +-- .../organisms/displayPanel/index.tsx | 194 ------------------ .../build_src/src/stores/imageDisplayStore.ts | 27 ++- .../src/stores/imageFetchingStore.ts | 6 +- 6 files changed, 53 insertions(+), 241 deletions(-) diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index 5ae1fbb3..e76814b6 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx @@ -44,6 +44,7 @@ export default function MakeButton() { const setStep = useImageFetching((state) => state.setStep); const setTotalSteps = useImageFetching((state) => state.setTotalSteps); const addProgressImage = useImageFetching((state) => state.addProgressImage); + const resetProgressImages = useImageFetching((state) => state.resetProgressImages); const appendData = useImageFetching((state) => state.appendData); const updateDisplay = useImageDisplay((state) => state.updateDisplay); @@ -159,7 +160,9 @@ export default function MakeButton() { }; try { + resetProgressImages(); setStatus(FetchingStates.FETCHING); + const res = await doMakeImage(streamReq); // @ts-expect-error const reader = res.body.getReader(); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx index e547f16b..8a699cdb 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx @@ -13,33 +13,16 @@ import { // @ts-expect-error } from "./completedImages.css.ts"; -// interface CurrentDisplayProps { -// images: CompletedImagesType[] | null; -// setCurrentDisplay: (image: CompletedImagesType) => void; -// removeImages: () => void; -// } + export default function CompletedImages( - // { - // images, - // setCurrentDisplay, - // removeImages, - // }: CurrentDisplayProps ) { const images = useImageDisplay((state) => state.images); - - // useEffect(() => { - // if (images.length > 0) { - // console.log("cur", images[0]); - // setCurrentImage(images[0]); - // } else { - // setCurrentImage(null); - // } - // }, [images]); - + const setCurrentImage = useImageDisplay((state) => state.setCurrentImage); + const clearDisplay = useImageDisplay((state) => state.clearDisplay); // const _handleSetCurrentDisplay = (index: number) => { @@ -47,7 +30,8 @@ export default function CompletedImages( // setCurrentDisplay(image); // }; - const removeImages = () => { + const removeImagesAll = () => { + clearDisplay(); }; return ( @@ -57,7 +41,7 @@ export default function CompletedImages( diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx index f8218ced..88b90f90 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx @@ -30,8 +30,6 @@ const LoadingDisplay = () => { console.log("progressImages", progressImages); - - useEffect(() => { if (totalSteps > 0) { setPercent(Math.round((step / totalSteps) * 100)); @@ -120,21 +118,25 @@ const ImageDisplay = ({ info, data }: CompletedImagesType) => { export default function CurrentDisplay() { const status = useImageFetching((state) => state.status); + const currentImage = useImageDisplay((state) => state.currentImage); - const [currentImage, setCurrentImage] = useState( - null - ); + + console.log("currentImage", currentImage); + + // const [currentImage, setCurrentImage] = useState( + // null + // ); // const testCur = useImageDisplay((state) => state.getCurrentImage()); - const images = useImageDisplay((state) => state.images); + // const images = useImageDisplay((state) => state.images); - useEffect(() => { - if (images.length > 0) { - console.log("cur", images[0]); - setCurrentImage(images[0]); - } else { - setCurrentImage(null); - } - }, [images]); + // useEffect(() => { + // if (images.length > 0) { + // console.log("cur", images[0]); + // setCurrentImage(images[0]); + // } else { + // setCurrentImage(null); + // } + // }, [images]); return (
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index f62a2141..ad89751c 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -43,145 +43,6 @@ import { const idDelim = "_batch"; export default function DisplayPanel() { - // const dingRef = useRef(null); - // const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); - - // // @ts-expect-error - // const { id, options } = useImageQueue((state) => state.firstInQueue()); - // const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue); - - - - // const [isEnabled, setIsEnabled] = useState(false); - - // const [isLoading, setIsLoading] = useState(true); - - // const { status, data } = useQuery( - // [MakeImageKey, id], - // async () => await doMakeImage(options), - // { - // enabled: isEnabled, - // } - // ); - - // const { status, data } = useEventSourceQuery( - // MakeImageKey, - - // // [MakeImageKey, id], - // // async () => await doMakeImage(options), - // // { - // // enabled: isEnabled, - // // } - // ); - - // update the enabled state when the id changes - // useEffect(() => { - // setIsEnabled(void 0 !== id); - // }, [id]); - - // const _handleStreamData = async (res: typeof ReadableStream) => { - // console.log("_handleStreamData"); - // let reader; - // // @ts-expect-error - // if (res.body.locked) { - // console.log("locked"); - // } - // else { - // reader = res.body.getReader(); - // } - - // console.log("reader", reader); - - // const decoder = new TextDecoder(); - // while (true) { - // const { done, value } = await reader.read(); - - // const text = decoder.decode(value); - // console.log("DECODE", done); - // console.log(text); - - // if (text.status === "progress") { - // console.log("PROGRESS"); - // } - // else if (text.status === "succeeded") { - // console.log("succeeded"); - // } - // else { - // console.log("extra?") - // } - - // console.log("-----------------"); - - // if (done as boolean) { - // reader.releaseLock(); - // break; - // } - // } - // }; - - // useEffect(() => { - // const fetch = async () => { - // const res = await doMakeImage(options); - // void _handleStreamData(res); - // } - - // if (isEnabled) { - // console.log('isEnabled'); - // debugger; - // fetch() - // .catch((err) => { - // console.error(err); - // }); - // } - - // }, [isEnabled, options, _handleStreamData]); - - // helper for the loading state to be enabled aware - // useEffect(() => { - // if (isEnabled && status === "loading") { - // setIsLoading(true); - // } else { - // setIsLoading(false); - // } - // }, [isEnabled, status]); - - - // this is where there loading actually happens - // useEffect(() => { - // console.log('DISPLATPANEL: status', status); - // console.log('DISPLATPANEL: data', data); - - // // query is done - // if (status === "success") { - // // check to make sure that the image was created - - // void _handleStreamData(data); - - // // if (data.status === "succeeded") { - // // if (isSoundEnabled) { - // // // not awaiting the promise or error handling - // // void dingRef.current?.play(); - // // } - // // removeFirstInQueue(); - // // } - // } - // }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled, _handleStreamData]); - - /* COMPLETED IMAGES */ - // const queryClient = useQueryClient(); - // const [completedImages, setCompletedImages] = useState( - // [] - // ); - - // const completedIds = useImageQueue((state) => state.completedImageIds); - // const clearCachedIds = useImageQueue((state) => state.clearCachedIds); - - // this is where we generate the list of completed images - // useEffect(() => { - // const completedQueries = completedIds.map((id) => { - // const imageData = queryClient.getQueryData([MakeImageKey, id]); - // return imageData; - // }) as ImageReturnType[]; // if (completedQueries.length > 0) { // // map the completedImagesto a new array @@ -201,60 +62,8 @@ export default function DisplayPanel() { // .flat() // .reverse() // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items - - // setCompletedImages(temp); - - // // could move this to the useEffect for completedImages - // if (temp.length > 0) { - // setCurrentImage(temp[0]); - // } else { - // setCurrentImage(null); - // } - // } else { - // setCompletedImages([]); - // setCurrentImage(null); - // } - // }, [setCompletedImages, setCurrentImage, queryClient, completedIds]); - - // this is how we remove them - // const removeImages = () => { - // completedIds.forEach((id) => { - // queryClient.removeQueries([MakeImageKey, id]); - // }); - // clearCachedIds(); - // }; - - // const [currentImage, setCurrentImage] = useState( - // null - // ); - - // const getCurrentImage = useImageDisplay((state) => state.getCurrentImage); - // const images = useImageDisplay((state) => state.images); - - // useEffect(() => { - // if (images.length > 0) { - // debugger; - // const cur = getCurrentImage(); - // console.log("cur", cur); - // setCurrentImage(cur); - // } else { - // setCurrentImage(null); - // } - // }, [images, getCurrentImage]); - - // useEffect(() => { - // console.log("images CHANGED"); - // debugger; - // if (len) > 0) { - // // console.log("images", images); - // setCurrentImage(getCurrentImage()); - // } - // }, [len]); - - return (
- DISPLAY {/* */}
diff --git a/ui/frontend/build_src/src/stores/imageDisplayStore.ts b/ui/frontend/build_src/src/stores/imageDisplayStore.ts index 1f316b76..36d81f8b 100644 --- a/ui/frontend/build_src/src/stores/imageDisplayStore.ts +++ b/ui/frontend/build_src/src/stores/imageDisplayStore.ts @@ -5,15 +5,18 @@ import produce from "immer"; interface ImageDisplayState { // imageOptions: Map; images: object[] - // currentImage: object | null; + currentImage: object | null updateDisplay: (ImageData: string, imageOptions: any) => void; + setCurrentImage: (image: object) => void; + clearDisplay: () => void; + // getCurrentImage: () => {}; } export const useImageDisplay = create((set, get) => ({ imageMap: new Map(), images: [], - // currentImage: null, + currentImage: null, // use produce to make sure we don't mutate state // imageOptions: any updateDisplay: (ImageData: string, imageOptions) => { @@ -23,14 +26,26 @@ export const useImageDisplay = create((set, get) => ({ // state.currentImage = { display: ImageData, imageOptions }; // imageOptions state.images.unshift({ data: ImageData, info: imageOptions }); + state.currentImage = state.images[0]; }) ); }, - // getCurrentImage: () => { - // debugger; - // return get().images[0]; - // } + setCurrentImage: (image) => { + set( + produce((state) => { + state.currentImage = image; + }) + ); + }, + clearDisplay: () => { + set( + produce((state) => { + state.images = []; + state.currentImage = null; + }) + ); + } })); diff --git a/ui/frontend/build_src/src/stores/imageFetchingStore.ts b/ui/frontend/build_src/src/stores/imageFetchingStore.ts index 323f2981..a1dc6de9 100644 --- a/ui/frontend/build_src/src/stores/imageFetchingStore.ts +++ b/ui/frontend/build_src/src/stores/imageFetchingStore.ts @@ -22,7 +22,7 @@ interface ImageFetchingState { setStep: (step: number) => void; setTotalSteps: (totalSteps: number) => void; addProgressImage: (imageLink: string) => void; - clearProgressImage: () => void; + resetProgressImages: () => void; } export const useImageFetching = create((set) => ({ @@ -78,10 +78,12 @@ export const useImageFetching = create((set) => ({ }) ); }, - clearProgressImage: () => { + resetProgressImages: () => { set( produce((state: ImageFetchingState) => { state.progressImages = []; + state.step = 0; + state.totalSteps = 0; }) ); }