dynamic csvview height (#101)

frontend/app/hook/useHeight.tsx

@@ -1,15 +1,18 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
 import debounce from "lodash.debounce";
 import { useCallback, useEffect, useState } from "react";
 
-const useParentHeight = (ref: React.RefObject<HTMLElement>, delay = 0) => {
+const useHeight = (ref: React.RefObject<HTMLElement>, delay = 0) => {
     const [height, setHeight] = useState<number | null>(null);
 
     const updateHeight = useCallback(() => {
         if (ref.current) {
-            const parentHeight = ref.current.getBoundingClientRect().height || 0;
+            const element = ref.current;
+            const style = window.getComputedStyle(element);
+            const paddingTop = parseFloat(style.paddingTop);
+            const paddingBottom = parseFloat(style.paddingBottom);
+            const marginTop = parseFloat(style.marginTop);
+            const marginBottom = parseFloat(style.marginBottom);
+            const parentHeight = element.clientHeight - paddingTop - paddingBottom - marginTop - marginBottom;
             setHeight(parentHeight);
         }
     }, []);
@@ -39,4 +42,4 @@ const useParentHeight = (ref: React.RefObject<HTMLElement>, delay = 0) => {
     return height;
 };
 
-export { useParentHeight };
+export { useHeight };

frontend/app/view/csvview.tsx

@@ -1,6 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useHeight } from "@/app/hook/useHeight";
 import { useTableNav } from "@table-nav/react";
 import {
     createColumnHelper,
@@ -42,14 +43,17 @@ const CSVView = ({ parentRef, filename, content }: CSVViewProps) => {
     const headerRef = useRef<HTMLTableRowElement | null>(null);
     const probeRef = useRef<HTMLTableRowElement | null>(null);
     const tbodyRef = useRef<HTMLTableSectionElement | null>(null);
+
     const [state, setState] = useState<State>({
         content,
         showReadonly: true,
         tbodyHeight: 0,
     });
+
     const [tableLoaded, setTableLoaded] = useState(false);
-    const [maxHeight, setMaxHeight] = useState(0);
+
     const { listeners } = useTableNav();
+    const parentHeight = useHeight(parentRef);
 
     const cacheKey = `${filename}`;
     csvCacheRef.current.set(cacheKey, content);
@@ -114,13 +118,12 @@ const CSVView = ({ parentRef, filename, content }: CSVViewProps) => {
             const rowHeight = probeRef.current.offsetHeight;
             const fullTBodyHeight = rowHeight * parsedData.length;
             const headerHeight = headerRef.current.offsetHeight;
-            const maxHeight = parentRef.current.getBoundingClientRect().height - 32; // 32 is the border plus the breadcrumb height
-            const maxHeightLessHeader = maxHeight - headerHeight;
-            const tbodyHeight = Math.min(maxHeightLessHeader, fullTBodyHeight);
+            const maxHeightLessHeader = parentHeight - headerHeight;
+            const tbodyHeight = Math.min(maxHeightLessHeader, fullTBodyHeight) - 3; // 3 for the borders
 
             setState((prevState) => ({ ...prevState, tbodyHeight }));
         }
-    }, [maxHeight, parsedData]);
+    }, [parentHeight, parsedData]);
 
     // Makes sure rows are rendered before setting the renderer as loaded
     useEffect(() => {

frontend/app/view/preview.tsx

@@ -362,7 +362,7 @@ function iconForFile(mimeType: string, fileName: string): string {
 }
 
 function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel }) {
-    const ref = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
     const blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`);
     const fileNameAtom = model.fileName;
     const statFileAtom = model.statFile;
@@ -399,7 +399,12 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
             specializedView = <CenteredDiv>CSV File Too Large to Preview (1MB Max)</CenteredDiv>;
         } else {
             specializedView = (
-                <CSVViewPreview parentRef={ref} contentAtom={fileContentAtom} filename={fileName} readonly={true} />
+                <CSVViewPreview
+                    parentRef={contentRef}
+                    contentAtom={fileContentAtom}
+                    filename={fileName}
+                    readonly={true}
+                />
             );
         }
     } else if (
@@ -426,9 +431,11 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
     }, 10);
 
     return (
-        <div ref={ref} className="full-preview scrollbar-hide-until-hover">
+        <div className="full-preview scrollbar-hide-until-hover">
             <DirNav cwdAtom={fileNameAtom} />
-            {specializedView}
+            <div ref={contentRef} className="full-preview-content">
+                {specializedView}
+            </div>
         </div>
     );
 }

frontend/app/view/view.less

@@ -65,6 +65,7 @@
 
 .view-nav {
     display: flex;
+    flex-shrink: 0;
     padding: 0.2rem 0 0.2rem 0;
 
     .view-nav-item {
@@ -86,3 +87,8 @@
         }
     }
 }
+
+.full-preview-content {
+    flex-grow: 1;
+    overflow-y: hidden;
+}