From 85c3397b97e1adf3f58031bf75be60f710b0cfbd Mon Sep 17 00:00:00 2001 From: Qing Date: Fri, 29 Dec 2023 10:59:09 +0800 Subject: [PATCH] FileManager use fuse --- web_app/package-lock.json | 26 +++++++++++++++---------- web_app/package.json | 4 ++-- web_app/src/components/FileManager.tsx | 27 +++++++------------------- web_app/src/lib/api.ts | 4 ++-- web_app/src/lib/types.ts | 8 ++++++++ 5 files changed, 35 insertions(+), 34 deletions(-) diff --git a/web_app/package-lock.json b/web_app/package-lock.json index f792bdd..11f63cd 100644 --- a/web_app/package-lock.json +++ b/web_app/package-lock.json @@ -33,9 +33,9 @@ "axios": "^1.6.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", - "flexsearch": "^0.7.21", + "fuse.js": "^7.0.0", "immer": "^10.0.3", - "inter-ui": "^3.19.3", + "inter-ui": "^4.0.0", "lodash": "^4.17.21", "lucide-react": "^0.292.0", "mitt": "^3.0.1", @@ -4230,11 +4230,6 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, - "node_modules/flexsearch": { - "version": "0.7.31", - "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.31.tgz", - "integrity": "sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==" - }, "node_modules/follow-redirects": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", @@ -4306,6 +4301,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/fuse.js": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz", + "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -4504,9 +4507,12 @@ } }, "node_modules/inter-ui": { - "version": "3.19.3", - "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.19.3.tgz", - "integrity": "sha512-5FG9fjuYOXocIfjzcCBhICL5cpvwEetseL3FU6tP3d6Bn7g8wODhB+I9RNGRTizCT7CUG4GOK54OPxqq3msQgg==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-4.0.0.tgz", + "integrity": "sha512-/2XKDS/6DJYZzBHRsFVrZ2l0NYhaRZXki3jUnpJu4DAZtsZdDUtOHfG5msc6ifwKg59eJiyqeIYBDNgvxz+7XQ==", + "engines": { + "node": ">=20.0.0" + } }, "node_modules/invariant": { "version": "2.2.4", diff --git a/web_app/package.json b/web_app/package.json index acecaf8..5f201e5 100644 --- a/web_app/package.json +++ b/web_app/package.json @@ -35,9 +35,9 @@ "axios": "^1.6.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", - "flexsearch": "^0.7.21", + "fuse.js": "^7.0.0", "immer": "^10.0.3", - "inter-ui": "^3.19.3", + "inter-ui": "^4.0.0", "lodash": "^4.17.21", "lucide-react": "^0.292.0", "mitt": "^3.0.1", diff --git a/web_app/src/components/FileManager.tsx b/web_app/src/components/FileManager.tsx index 2813f4d..54a634c 100644 --- a/web_app/src/components/FileManager.tsx +++ b/web_app/src/components/FileManager.tsx @@ -16,7 +16,7 @@ import { } from "@radix-ui/react-icons" import { useToggle } from "react-use" import { useDebounce } from "@uidotdev/usehooks" -import FlexSearch from "flexsearch/dist/flexsearch.bundle.js" +import Fuse from "fuse.js" import { useToast } from "@/components/ui/use-toast" import { API_ENDPOINT, getMedias } from "@/lib/api" import { IconButton } from "./ui/button" @@ -33,7 +33,7 @@ import { import { ScrollArea } from "./ui/scroll-area" import { DialogTrigger } from "@radix-ui/react-dialog" import { useStore } from "@/lib/states" -import { SortBy, SortOrder } from "@/lib/types" +import { Filename, SortBy, SortOrder } from "@/lib/types" import { FolderClosed } from "lucide-react" import useHotKey from "@/hooks/useHotkey" @@ -44,14 +44,6 @@ interface Photo { name: string } -interface Filename { - name: string - height: number - width: number - ctime: number - mtime: number -} - const SORT_BY_NAME = "Name" const SORT_BY_CREATED_TIME = "Created time" const SORT_BY_MODIFIED_TIME = "Modified time" @@ -148,17 +140,12 @@ export default function FileManager(props: Props) { const filenames = await getMedias(tab) let filteredFilenames = filenames if (debouncedSearchText) { - const index = new FlexSearch.Index({ - tokenize: "forward", - minlength: 1, + const fuse = new Fuse(filteredFilenames, { + keys: ["name"], }) - filenames.forEach((filename: Filename, id: number) => - index.add(id, filename.name) - ) - const results: FlexSearch.IndexSearchResult = - index.search(debouncedSearchText) - filteredFilenames = results.map( - (id: FlexSearch.Id) => filenames[id as number] + const items = fuse.search(debouncedSearchText) + filteredFilenames = items.map( + (item) => filteredFilenames[item.refIndex] ) } diff --git a/web_app/src/lib/api.ts b/web_app/src/lib/api.ts index 02db905..8e13910 100644 --- a/web_app/src/lib/api.ts +++ b/web_app/src/lib/api.ts @@ -1,4 +1,4 @@ -import { ModelInfo, PowerPaintTask, Rect } from "@/lib/types" +import { Filename, ModelInfo, PowerPaintTask, Rect } from "@/lib/types" import { Settings } from "@/lib/states" import { srcToFile } from "@/lib/utils" import axios from "axios" @@ -186,7 +186,7 @@ export async function getMediaFile(tab: string, filename: string) { throw new Error(errMsg) } -export async function getMedias(tab: string) { +export async function getMedias(tab: string): Promise { const res = await fetch(`${API_ENDPOINT}/medias/${tab}`, { method: "GET", }) diff --git a/web_app/src/lib/types.ts b/web_app/src/lib/types.ts index 717a64b..9755d78 100644 --- a/web_app/src/lib/types.ts +++ b/web_app/src/lib/types.ts @@ -1,3 +1,11 @@ +export interface Filename { + name: string + height: number + width: number + ctime: number + mtime: number +} + export interface ModelInfo { name: string path: string