From b9f6da57f99363e569fbd382b79cc0f0b09f9e4e Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Wed, 29 May 2024 00:00:36 -0700 Subject: [PATCH] feat: add basic directory navigation in preview Note: this does not add backwards navigation and will break if attempting to open certain types of files. --- .../directorypreview.less} | 1 + .../directorypreview.tsx} | 44 +++++++++++++++---- frontend/app/view/preview.tsx | 29 ++++++------ package.json | 1 + pkg/service/fileservice/fileservice.go | 3 +- vite.config.ts | 1 + yarn.lock | 29 +++++++++++- 7 files changed, 85 insertions(+), 23 deletions(-) rename frontend/app/{element/directorytable.less => view/directorypreview.less} (97%) rename frontend/app/{element/directorytable.tsx => view/directorypreview.tsx} (71%) diff --git a/frontend/app/element/directorytable.less b/frontend/app/view/directorypreview.less similarity index 97% rename from frontend/app/element/directorytable.less rename to frontend/app/view/directorypreview.less index 1a6ba514d..d1e4bb886 100644 --- a/frontend/app/element/directorytable.less +++ b/frontend/app/view/directorypreview.less @@ -42,6 +42,7 @@ .dir-table-body-cell { overflow: hidden; + white-space: nowrap; padding: 0.25rem; } } diff --git a/frontend/app/element/directorytable.tsx b/frontend/app/view/directorypreview.tsx similarity index 71% rename from frontend/app/element/directorytable.tsx rename to frontend/app/view/directorypreview.tsx index 36adb4011..bdeeb757b 100644 --- a/frontend/app/element/directorytable.tsx +++ b/frontend/app/view/directorypreview.tsx @@ -3,12 +3,15 @@ import { FileInfo } from "@/bindings/fileservice"; import { Table, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import * as jotai from "jotai"; +import path from "path"; import React from "react"; -import "./directorytable.less"; +import "./directorypreview.less"; interface DirectoryTableProps { data: FileInfo[]; + setFileName: (_: string) => void; } const columnHelper = createColumnHelper(); @@ -28,7 +31,7 @@ const defaultColumns = [ }), ]; -function DirectoryTable({ data }: DirectoryTableProps) { +function DirectoryTable({ data, setFileName }: DirectoryTableProps) { const [columns] = React.useState(() => [...defaultColumns]); const table = useReactTable({ data, @@ -73,26 +76,39 @@ function DirectoryTable({ data }: DirectoryTableProps) { ))} {table.getState().columnSizingInfo.isResizingColumn ? ( - + ) : ( - + )} ); } -function TableBody({ table }: { table: Table }) { +interface TableBodyProps { + table: Table; + setFileName: (_: string) => void; +} + +function TableBody({ table, setFileName }: TableBodyProps) { return (
{table.getRowModel().rows.map((row) => ( -
+
{ + const newFileName = row.getValue("path") as string; + setFileName(newFileName); + }} + > {row.getVisibleCells().map((cell) => (
- {cell.renderValue()} + {path.basename(cell.renderValue())}
))}
@@ -106,4 +122,16 @@ const MemoizedTableBody = React.memo( (prev, next) => prev.table.options.data == next.table.options.data ) as typeof TableBody; -export { DirectoryTable }; +interface DirectoryPreviewProps { + contentAtom: jotai.Atom>; + fileNameAtom: jotai.WritableAtom; +} + +function DirectoryPreview({ contentAtom, fileNameAtom }: DirectoryPreviewProps) { + const contentText = jotai.useAtomValue(contentAtom); + let content: FileInfo[] = JSON.parse(contentText); + let [fileName, setFileName] = jotai.useAtom(fileNameAtom); + return ; +} + +export { DirectoryPreview }; diff --git a/frontend/app/view/preview.tsx b/frontend/app/view/preview.tsx index 999224ded..e896baf8e 100644 --- a/frontend/app/view/preview.tsx +++ b/frontend/app/view/preview.tsx @@ -2,13 +2,13 @@ // SPDX-License-Identifier: Apache-2.0 import { FileInfo, FileService, FullFile } from "@/bindings/fileservice"; -import { DirectoryTable } from "@/element/directorytable"; import { Markdown } from "@/element/markdown"; -import { useBlockAtom } from "@/store/global"; +import { useBlockAtom, useBlockCache } from "@/store/global"; import * as WOS from "@/store/wos"; import * as util from "@/util/util"; import * as jotai from "jotai"; import { CenteredDiv } from "../element/quickelems"; +import { DirectoryPreview } from "./directorypreview"; import "./view.less"; @@ -54,12 +54,6 @@ function StreamingPreview({ fileInfo }: { fileInfo: FileInfo }) { return Preview Not Supported; } -function DirectoryPreview({ contentAtom }: { contentAtom: jotai.Atom> }) { - const contentText = jotai.useAtomValue(contentAtom); - let content: FileInfo[] = JSON.parse(contentText); - return ; -} - function PreviewView({ blockId }: { blockId: string }) { const blockData = WOS.useWaveObjectValueWithSuspense(WOS.makeORef("block", blockId)); if (blockData == null) { @@ -69,11 +63,20 @@ function PreviewView({ blockId }: { blockId: string }) {
); } - const fileNameAtom = useBlockAtom(blockId, "preview:filename", () => - jotai.atom((get) => { - return blockData?.meta?.file; - }) + const blockAtom = WOS.getWaveObjectAtom(`block:${blockId}`); + const fileNameAtom: jotai.WritableAtom = useBlockCache(blockId, "preview:filename", () => + jotai.atom( + (get) => { + return get(blockAtom)?.meta?.file; + }, + (get, set, update) => { + const blockId = get(blockAtom)?.oid; + WOS.UpdateObjectMeta(`block:${blockId}`, { file: update }); + } + ) ); + let name = jotai.useAtomValue(fileNameAtom); + console.log("file: ", name); const statFileAtom = useBlockAtom(blockId, "preview:statfile", () => jotai.atom>(async (get) => { const fileName = get(fileNameAtom); @@ -133,7 +136,7 @@ function PreviewView({ blockId }: { blockId: string }) { ); } if (mimeType === "directory") { - return ; + return ; } return (
diff --git a/package.json b/package.json index 5fd249494..6ddd4853f 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "clsx": "^2.1.1", "immer": "^10.1.1", "jotai": "^2.8.0", + "path": "^0.12.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^9.0.1", diff --git a/pkg/service/fileservice/fileservice.go b/pkg/service/fileservice/fileservice.go index c66c81d07..0178d6f1b 100644 --- a/pkg/service/fileservice/fileservice.go +++ b/pkg/service/fileservice/fileservice.go @@ -73,8 +73,9 @@ func (fs *FileService) ReadFile(path string) (*FullFile, error) { var innerFilesInfo []FileInfo for _, innerFileEntry := range innerFilesEntries { innerFileInfoInt, _ := innerFileEntry.Info() + fullFilePath := filepath.Join(finfo.Path, innerFileInfoInt.Name()) innerFileInfo := FileInfo{ - Path: innerFileInfoInt.Name(), + Path: fullFilePath, Size: innerFileInfoInt.Size(), Mode: innerFileInfoInt.Mode(), ModTime: innerFileInfoInt.ModTime().UnixMilli(), diff --git a/vite.config.ts b/vite.config.ts index d1e96ec1c..d709ef5c0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,7 @@ import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ plugins: [react({}), tsconfigPaths()], + define: { "process.env": process.env }, publicDir: "public", build: { target: "es6", diff --git a/yarn.lock b/yarn.lock index ff0c64daf..157902f90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7001,6 +7001,13 @@ __metadata: languageName: node linkType: hard +"inherits@npm:2.0.3": + version: 2.0.3 + resolution: "inherits@npm:2.0.3" + checksum: 10c0/6e56402373149ea076a434072671f9982f5fad030c7662be0332122fe6c0fa490acb3cc1010d90b6eff8d640b1167d77674add52dfd1bb85d545cf29e80e73e7 + languageName: node + linkType: hard + "inline-style-parser@npm:0.2.3": version: 0.2.3 resolution: "inline-style-parser@npm:0.2.3" @@ -9337,6 +9344,16 @@ __metadata: languageName: node linkType: hard +"path@npm:^0.12.7": + version: 0.12.7 + resolution: "path@npm:0.12.7" + dependencies: + process: "npm:^0.11.1" + util: "npm:^0.10.3" + checksum: 10c0/f795ce5438a988a590c7b6dfd450ec9baa1c391a8be4c2dea48baa6e0f5b199e56cd83b8c9ebf3991b81bea58236d2c32bdafe2c17a2e70c3a2e4c69891ade59 + languageName: node + linkType: hard + "pathe@npm:^1.1.1, pathe@npm:^1.1.2": version: 1.1.2 resolution: "pathe@npm:1.1.2" @@ -9551,7 +9568,7 @@ __metadata: languageName: node linkType: hard -"process@npm:^0.11.10": +"process@npm:^0.11.1, process@npm:^0.11.10": version: 0.11.10 resolution: "process@npm:0.11.10" checksum: 10c0/40c3ce4b7e6d4b8c3355479df77aeed46f81b279818ccdc500124e6a5ab882c0cc81ff7ea16384873a95a74c4570b01b120f287abbdd4c877931460eca6084b3 @@ -10957,6 +10974,7 @@ __metadata: immer: "npm:^10.1.1" jotai: "npm:^2.8.0" less: "npm:^4.2.0" + path: "npm:^0.12.7" prettier: "npm:^3.2.5" prettier-plugin-jsdoc: "npm:^1.3.0" prettier-plugin-organize-imports: "npm:^3.2.4" @@ -11511,6 +11529,15 @@ __metadata: languageName: node linkType: hard +"util@npm:^0.10.3": + version: 0.10.4 + resolution: "util@npm:0.10.4" + dependencies: + inherits: "npm:2.0.3" + checksum: 10c0/d29f6893e406b63b088ce9924da03201df89b31490d4d011f1c07a386ea4b3dbe907464c274023c237da470258e1805d806c7e4009a5974cd6b1d474b675852a + languageName: node + linkType: hard + "util@npm:^0.12.4, util@npm:^0.12.5": version: 0.12.5 resolution: "util@npm:0.12.5"