From bd50656dba613b917577275e7bcf12504dcd6b66 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 19 Jan 2024 22:32:18 +0700 Subject: [PATCH] searcher updates --- .../components/common/Searcher/Searcher.tsx | 148 ++++++++++++++---- .../common/SelectSearcher/SelectSearcher.tsx | 2 +- .../src/hooks/useLazyLists/useLazyLists.tsx | 55 +++++-- .../inference_panels/SdInferencePanel.tsx | 10 +- 4 files changed, 166 insertions(+), 49 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx index 1d970b75e0..a2a5c71f51 100644 --- a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx +++ b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx @@ -4,19 +4,20 @@ import { faSearch } from "@fortawesome/pro-solid-svg-icons"; import MasonryGrid from "../MasonryGrid/MasonryGrid"; import "./Searcher.scss"; import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; -import { useBookmarks, useRatings } from "hooks"; +import { useLazyLists } from "hooks"; import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights"; import debounce from "lodash.debounce"; import WeightsCards from "../Card/WeightsCards"; import LoadingSpinner from "../LoadingSpinner"; import useSearcherStore from "hooks/useSearcherStore"; - +import prepFilter from "resources/prepFilter"; +import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights"; +import InfiniteScroll from "react-infinite-scroll-component"; interface SearcherProps { type?: "page" | "modal"; dataType?: "media" | "weights"; weightType?: string; onResultSelect?: () => void; - weightTypeFilter?: any; searcherKey: string; } @@ -25,7 +26,6 @@ export default function Searcher({ dataType = "weights", weightType = "all", onResultSelect, - weightTypeFilter, searcherKey, }: SearcherProps) { const gridContainerRef = useRef(null); @@ -33,8 +33,9 @@ export default function Searcher({ const [foundWeights, setFoundWeights] = useState([]); const [isSearching, setIsSearching] = useState(false); const [searchCompleted, setSearchCompleted] = useState(0); - const bookmarks = useBookmarks(); - const ratings = useRatings(); + // const bookmarks = useBookmarks(); + // const ratings = useRatings(); + const [list, listSet] = useState([]); useEffect(() => { if (searchTerm[searcherKey]) { @@ -59,7 +60,7 @@ export default function Searcher({ setIsSearching(true); if (weightType !== "all") { - request[weightTypeFilter] = weightType; + request["weight_type"] = weightType; } let response = await SearchWeights(request); @@ -74,7 +75,7 @@ export default function Searcher({ setIsSearching(false); }, - [setFoundWeights, weightType, setSearchCompleted, weightTypeFilter] + [setFoundWeights, weightType, setSearchCompleted] ); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -85,6 +86,19 @@ export default function Searcher({ [doSearch] ); + const weights = useLazyLists({ + addQueries: { + page_size: 9, + ...prepFilter(weightType, "weight_type"), + }, + debug: "Weights List", + fetcher: ListWeights, + list, + listSet, + requestList: true, + disableUrlQueries: true, + }); + return (
{/* Result Cards */} - {isSearching ? ( - - ) : ( - - {dataType === "weights" && - foundWeights.map((data: any, key: number) => { - let props = { - data, - bookmarks, - ratings, - showCreator: true, - type: "weights", - inSearcher: true, - onResultSelect, - }; - return ( -
- + {searchTerm[searcherKey] && !isSearching ? ( + <> + {isSearching ? ( + + ) : ( + + {dataType === "weights" && + foundWeights.map((data: any, key: number) => { + let props = { + data, + showCreator: true, + type: "weights", + inSearcher: true, + onResultSelect, + }; + + return ( +
+ +
+ ); + })} + + )} + + ) : ( + <> + +
+ Loading... +
- ); - })} - + ) + } + endMessage={ +

No more results.

+ } + className="overflow-hidden" + scrollableTarget={searcherKey} + scrollThreshold={0.95} + > + <> + {weights.list.length === 0 && weights.status === 3 ? ( +
+ No weight created yet. +
+ ) : ( + console.log("Layout complete!")} + > + {weights.list.map((data: any, key: number) => { + let props = { + data, + showCreator: true, + type: "weights", + inSearcher: true, + onResultSelect, + }; + + return ( +
+ +
+ ); + })} + + )} + + + )}
diff --git a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx index d63b852d07..fe035c349d 100644 --- a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx +++ b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx @@ -40,7 +40,7 @@ const SelectSearcher = memo(({ label, tabs }: SelectSearcherProps) => { type="modal" onResultSelect={closeModal} searcherKey={tab.searcherKey} - weightTypeFilter={tab.weightTypeFilter} + weightType={tab.weightTypeFilter} /> ), padding: true, diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index 99db6b670b..66111ff0b9 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx @@ -5,28 +5,43 @@ import { useHistory, useLocation } from "react-router-dom"; interface Props { addQueries?: any; addSetters?: any; - debug?: string, + debug?: string; fetcher: any; list: any; listSet: any; onInputChange?: (x?: any) => any; onSuccess?: (x?: any) => any; requestList?: boolean; + disableUrlQueries?: boolean; } const n = () => {}; -export default function useLazyLists({ addQueries, addSetters, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) { +export default function useLazyLists({ + addQueries, + addSetters, + debug = "", + fetcher, + list = [], + listSet, + onInputChange = n, + onSuccess = n, + requestList = false, + disableUrlQueries = false, +}: Props) { const { pathname, search: locSearch } = useLocation(); const history = useHistory(); const urlQueries = new URLSearchParams(locSearch); const [next, nextSet] = useState(urlQueries.get("cursor") || ""); const [previous, previousSet] = useState(""); // I am not used for anything yet :) const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true"); - const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused); + const [status, statusSet] = useState( + requestList ? FetchStatus.ready : FetchStatus.paused + ); const listKeys = Object.keys(list); const totalKeys = listKeys.length; - const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; + const isLoading = + status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; const getMore = () => { @@ -34,7 +49,10 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch }; const onChange = ({ target }: { target: { name: string; value: any } }) => { - const todo: { [key: string]: (x: any) => void } = { ...addSetters, sortSet }; + const todo: { [key: string]: (x: any) => void } = { + ...addSetters, + sortSet, + }; todo[target.name + "Set"](target.value); onInputChange({ target }); listSet([]); // Reset list on filter/sort change @@ -53,15 +71,18 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch if (status === FetchStatus.ready) { let search = new URLSearchParams(queries).toString(); statusSet(FetchStatus.in_progress); - history.replace({ pathname, search }); + !disableUrlQueries && history.replace({ pathname, search }); - fetcher( "",{},queries).then((res: any) => { - if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res); + fetcher("", {}, queries).then((res: any) => { + if (debug) + console.log(`🐞 useLazyLists success debug at: ${debug}`, res); statusSet(FetchStatus.success); onSuccess(res); if (res.results && res.pagination) { listSet((prevObj: any) => { - let keyExists = listKeys.find(key => key.split("#")[1] === res.pagination.maybe_next); + let keyExists = listKeys.find( + key => key.split("#")[1] === res.pagination.maybe_next + ); if (!next && !totalKeys) { return { [0 + "#initial"]: res.results }; // save as object so we can track what has been loaded } else if (!keyExists) { @@ -81,7 +102,21 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch } }); } - }, [ addQueries, debug, fetcher, history, listKeys, listSet, next, onSuccess, pathname, sort, status, totalKeys ]); + }, [ + addQueries, + debug, + fetcher, + history, + listKeys, + listSet, + next, + onSuccess, + pathname, + sort, + status, + totalKeys, + disableUrlQueries, + ]); return { fetchError, diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx index 9e4c41b78f..ad04bb9812 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useRef, useState, memo } from "react"; import { Button, Input, @@ -33,7 +33,7 @@ interface SdInferencePanelProps { ) => void; } -export default function SdInferencePanel({ +function SdInferencePanel({ enqueueInferenceJob, sd_model_token, }: SdInferencePanelProps) { @@ -339,12 +339,12 @@ export default function SdInferencePanel({ { label: "All LoRA Weights", searcherKey: "allLoraWeights", - weightTypeFilter: "lora", + weightTypeFilter: "rvc_v2", }, { label: "Bookmarked", searcherKey: "bookmarkedLoraWeights", - weightTypeFilter: "lora", + weightTypeFilter: "rvc_v2", }, ]} /> @@ -392,3 +392,5 @@ export default function SdInferencePanel({ ); } + +export default memo(SdInferencePanel);