frontend/process info/tree: dynamically resize table to content size

Author: haraldschilly

src/packages/frontend/cspell.json

@@ -70,7 +70,11 @@
     "flyouts",
     "buttonbar",
     "noconf",
-    "flyoutdragbar"
+    "flyoutdragbar",
+    "ptree",
+    "pchildren",
+    "nprocs",
+    "pids"
   ],
   "flagWords": [],
   "ignorePaths": ["node_modules/**", "dist/**", "dist-ts/**", "build/**"],

src/packages/frontend/project/context.tsx

@@ -32,6 +32,7 @@ export interface ProjectContextState {
   actions?: ProjectActions;
   active_project_tab?: string;
   compute_image: string | undefined;
+  contentSize: { width: number; height: number };
   enabledLLMs: LLMServicesAvailable;
   flipTabs: [number, React.Dispatch<React.SetStateAction<number>>];
   group?: UserGroup;
@@ -47,22 +48,15 @@ export interface ProjectContextState {
   onCoCalcDocker: boolean;
   project_id: string;
   project?: Project;
+  setContentSize: (size: { width: number; height: number }) => void;
   status: ProjectStatus;
 }
 
 export const emptyProjectContext = {
   actions: undefined,
   active_project_tab: undefined,
-  group: undefined,
-  project: undefined,
-  is_active: false,
-  project_id: "",
-  isRunning: undefined,
-  status: INIT_PROJECT_STATE,
-  hasInternet: undefined,
-  flipTabs: [0, () => {}],
-  onCoCalcCom: true,
-  onCoCalcDocker: false,
+  compute_image: undefined,
+  contentSize: { width: 0, height: 0 },
   enabledLLMs: {
     openai: false,
     google: false,
@@ -72,12 +66,22 @@ export const emptyProjectContext = {
     custom_openai: false,
     user: false,
   },
+  flipTabs: [0, () => {}],
+  group: undefined,
+  hasInternet: undefined,
+  is_active: false,
+  isRunning: undefined,
   mainWidthPx: 0,
   manageStarredFiles: {
     starred: [],
     setStarredPath: () => {},
   },
-  compute_image: undefined,
+  onCoCalcCom: true,
+  onCoCalcDocker: false,
+  project: undefined,
+  project_id: "",
+  setContentSize: () => {},
+  status: INIT_PROJECT_STATE,
 } as ProjectContextState;
 
 export const ProjectContext: Context<ProjectContextState> =
@@ -141,10 +145,13 @@ export function useProjectContextProvider({
     userDefinedLLM,
   ]);
 
+  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
+
   return {
     actions,
     active_project_tab,
     compute_image,
+    contentSize,
     enabledLLMs,
     flipTabs,
     group,
@@ -157,6 +164,7 @@ export function useProjectContextProvider({
     onCoCalcDocker,
     project_id,
     project,
+    setContentSize,
     status,
   };
 }

src/packages/frontend/project/info/full.tsx

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cspell:ignore Questionmark
+
 declare let DEBUG;
 
 import { Alert, Button, Form, Modal, Popconfirm, Switch, Table } from "antd";
@@ -13,12 +15,14 @@ import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import { CSS, ProjectActions, redux } from "@cocalc/frontend/app-framework";
 import { A, Loading, Tip } from "@cocalc/frontend/components";
 import { SiteName } from "@cocalc/frontend/customize";
+import { field_cmp, seconds2hms } from "@cocalc/util/misc";
+import { COLORS } from "@cocalc/util/theme";
 import {
   Process,
   ProjectInfo as ProjectInfoType,
 } from "@cocalc/util/types/project-info/types";
-import { field_cmp, seconds2hms } from "@cocalc/util/misc";
-import { COLORS } from "@cocalc/util/theme";
+import { useProjectContext } from "../context";
+import { ROOT_STYLE } from "../servers/consts";
 import { RestartProject } from "../settings/restart-project";
 import {
   AboutContent,
@@ -30,7 +34,6 @@ import {
 } from "./components";
 import { CGroupInfo, DUState, PTStats, ProcessRow } from "./types";
 import { DETAILS_BTN_TEXT, SSH_KEYS_DOC } from "./utils";
-import { ROOT_STYLE } from "../servers/consts";
 
 interface Props {
   any_alerts: () => boolean;
@@ -91,46 +94,41 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
     onCellProps,
   } = props;
 
+  const { contentSize } = useProjectContext();
+
   const problemsRef = useRef<HTMLDivElement>(null);
   const cgroupRef = useRef<HTMLDivElement>(null);
   const headerRef = useRef<HTMLDivElement>(null);
   const explanationRef = useRef<HTMLDivElement>(null);
-  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const generalStatusRef = useRef<HTMLDivElement>(null);
   const [tableHeight, setTableHeight] = useState<number>(400);
 
   useEffect(() => {
     const calculateTableHeight = () => {
-      // Find the parent container with class "smc-vfill"
-      let parentContainer = headerRef.current?.closest(
-        ".smc-vfill",
-      ) as HTMLElement;
-      if (!parentContainer) return;
+      const parentHeight = contentSize.height;
+      if (parentHeight === 0) return; // Wait until contentSize is measured
 
-      const parentHeight = parentContainer.getBoundingClientRect().height;
       let usedHeight = 0;
 
       // Add height of ProjectProblems component
-      if (problemsRef.current) {
-        usedHeight += problemsRef.current.offsetHeight;
-      }
+      usedHeight += problemsRef.current?.offsetHeight ?? 0;
 
       // Add height of CGroup component
-      if (cgroupRef.current) {
-        usedHeight += cgroupRef.current.offsetHeight;
-      }
+      usedHeight += cgroupRef.current?.offsetHeight ?? 0;
 
       // Add height of header row
-      if (headerRef.current) {
-        usedHeight += headerRef.current.offsetHeight;
-      }
+      usedHeight += headerRef.current?.offsetHeight ?? 0;
 
       // Add height of explanation row if visible
-      if (explanationRef.current) {
-        usedHeight += explanationRef.current.offsetHeight;
+      usedHeight += explanationRef.current?.offsetHeight ?? 0;
+
+      // Add height of general status row if DEBUG is enabled
+      if (DEBUG) {
+        usedHeight += generalStatusRef.current?.offsetHeight ?? 0;
       }
 
       // Add more buffer for table header, margins, and other spacing
-      usedHeight += 120;
+      usedHeight += 100;
 
       const availableHeight = Math.max(300, parentHeight - usedHeight);
       setTableHeight(availableHeight);
@@ -141,7 +139,7 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
     // Recalculate on window resize
     window.addEventListener("resize", calculateTableHeight);
     return () => window.removeEventListener("resize", calculateTableHeight);
-  }, [show_explanation, ptree]);
+  }, [show_explanation, ptree, contentSize.height, contentSize.width]);
 
   function render_help() {
     return (
@@ -376,6 +374,7 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
         <Row ref={explanationRef}>{render_explanation()}</Row>
         <Row>
           <Table<ProcessRow>
+            key={`table-${contentSize.width}-${contentSize.height}`}
             dataSource={ptree}
             size={"small"}
             pagination={false}
@@ -498,7 +497,7 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
       </div>
     );
     return (
-      <Col lg={8} lgOffset={2} md={12} mdOffset={0}>
+      <Col md={12} mdOffset={0}>
         <Alert
           message={msg}
           style={{ margin: "10px 0" }}
@@ -516,14 +515,16 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
 
   function render_general_status() {
     return (
-      <Col md={12} style={{ color: COLORS.GRAY }}>
-        Timestamp:{" "}
-        {info?.timestamp != null ? (
-          <code>{new Date(info.timestamp).toISOString()}</code>
-        ) : (
-          "no timestamp"
-        )}{" "}
-        | Status: <code>{status}</code>
+      <Col md={12}>
+        <div ref={generalStatusRef} style={{ color: COLORS.GRAY }}>
+          Timestamp:{" "}
+          {info?.timestamp != null ? (
+            <code>{new Date(info.timestamp).toISOString()}</code>
+          ) : (
+            "no timestamp"
+          )}{" "}
+          | Status: <code>{status}</code>
+        </div>
       </Col>
     );
   }

src/packages/frontend/project/info/project-info.tsx

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cSpell:ignore chldsum
+
 import { Alert } from "antd";
 
 import { cgroup_stats } from "@cocalc/comm/project-status/utils";
@@ -132,7 +134,7 @@ export const ProjectInfo: React.FC<Props> = React.memo(
           set_have_children(pchildren);
           break;
         case "flyout":
-          // flyout does not nest children, not enogh space
+          // flyout does not nest children, not enough space
           set_ptree(linearList(info.processes));
           break;
         default:

src/packages/frontend/project/page/content.tsx

@@ -15,14 +15,17 @@ or Loading... if the file is still being loaded.
 */
 
 import { Map } from "immutable";
-import { useEffect, useMemo, useRef } from "react";
+import { debounce } from "lodash";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import Draggable from "react-draggable";
+
 import { React, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { KioskModeBanner } from "@cocalc/frontend/app/kiosk-mode-banner";
 import type { ChatState } from "@cocalc/frontend/chat/chat-indicator";
 import SideChat from "@cocalc/frontend/chat/side-chat";
 import { Loading } from "@cocalc/frontend/components";
 import KaTeX from "@cocalc/frontend/components/math/katex";
+import getMermaid from "@cocalc/frontend/editors/slate/elements/code-block/get-mermaid";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
 import { FileContext } from "@cocalc/frontend/lib/file-context";
 import {
@@ -38,15 +41,14 @@ import { ProjectSearch } from "@cocalc/frontend/project/search/search";
 import { ProjectServers } from "@cocalc/frontend/project/servers";
 import { ProjectSettings } from "@cocalc/frontend/project/settings";
 import { editor_id } from "@cocalc/frontend/project/utils";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { hidden_meta_file } from "@cocalc/util/misc";
 import { useProjectContext } from "../context";
 import getAnchorTagComponent from "./anchor-tag-component";
 import HomePage from "./home-page";
 import { ProjectCollaboratorsPage } from "./project-collaborators";
 import { ProjectLicenses } from "./project-licenses";
 import getUrlTransform from "./url-transform";
-import { webapp_client } from "@cocalc/frontend/webapp-client";
-import getMermaid from "@cocalc/frontend/editors/slate/elements/code-block/get-mermaid";
 
 // Default width of chat window as a fraction of the
 // entire window.
@@ -66,12 +68,38 @@ interface Props {
 
 export const Content: React.FC<Props> = (props: Props) => {
   const { tab_name, is_visible } = props;
+  const { setContentSize } = useProjectContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const debouncedMeasure = useCallback(
+    debounce((entries: ResizeObserverEntry[]) => {
+      if (entries.length > 0) {
+        const { width, height } = entries[0].contentRect;
+        setContentSize({ width, height });
+      }
+    }, 10),
+    [setContentSize],
+  );
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+
+    const resizeObserver = new ResizeObserver(debouncedMeasure);
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+      debouncedMeasure.cancel();
+    };
+  }, [debouncedMeasure]);
+
   // The className below is so we always make this div the remaining height.
   // The overflowY is hidden for editors (which don't scroll), but auto
   // otherwise, since some tabs (e.g., settings) *do* need to scroll. See
   // https://github.com/sagemathinc/cocalc/pull/4708.
   return (
     <div
+      ref={contentRef}
       style={{
         ...MAIN_STYLE,
         ...(!is_visible ? { display: "none" } : undefined),