Remove remaining absolute positioning

flatironinstitute · Jul 23, 2024 · dd8763c · dd8763c
1 parent e0d7062
commit dd8763c
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 244 deletions.
diff --git a/gui/src/app/SamplerOutputView/TracePlotsView.tsx b/gui/src/app/SamplerOutputView/TracePlotsView.tsx
@@ -86,6 +86,7 @@ const SequencePlotChild: FunctionComponent<SequencePlotProps> = ({
   }, [draws, columnIndex, drawChainIds]);
   return (
     <div className="SequencePlotChild">
+      {/* TODO this is raising deprecation warnings */}
       <ReactVisibilitySensor partialVisibility>
         {({ isVisible }: { isVisible: boolean }) => {
           if (!isVisible) return <div>...</div>;

diff --git a/gui/src/app/pages/HomePage/AnalysisPyWindow/AnalysisPyWindow.tsx b/gui/src/app/pages/HomePage/AnalysisPyWindow/AnalysisPyWindow.tsx
@@ -1,49 +1,32 @@
-import { Splitter } from "@fi-sci/splitter";
 import { FunctionComponent, useContext, useMemo, useState } from "react";
 import { ProjectContext } from "../../../Project/ProjectContextProvider";
 import { ProjectKnownFiles } from "../../../Project/ProjectDataModel";
-import StanSampler from "../../../StanSampler/StanSampler";
-import { useSamplerOutput } from "../../../StanSampler/useStanSampler";
 import AnalysisPyFileEditor from "../../../pyodide/AnalysisPyFileEditor";
+import { SplitDirection, Splitter } from "@SpComponents/Splitter";
+import { StanRun } from "@SpStanSampler/useStanSampler";
 
 type AnalysisPyWindowProps = {
-  width: number;
-  height: number;
-  stanSampler: StanSampler | null;
+  latestRun: StanRun;
 };
 
 const AnalysisPyWindow: FunctionComponent<AnalysisPyWindowProps> = ({
-  width,
-  height,
-  stanSampler,
+  latestRun,
 }) => {
   // TODO make useRef
   const [imageOutputDiv, setImageOutputDiv] = useState<HTMLDivElement | null>(
     null,
   );
   return (
-    <Splitter
-      direction="horizontal"
-      width={width}
-      height={height}
-      initialPosition={width / 2}
-    >
-      <LeftPane
-        width={0}
-        height={0}
-        imageOutputDiv={imageOutputDiv}
-        stanSampler={stanSampler}
-      />
-      <RightPane width={0} height={0} onImageOutputDiv={setImageOutputDiv} />
+    <Splitter>
+      <LeftPane imageOutputDiv={imageOutputDiv} latestRun={latestRun} />
+      <ImageOutputWindow onDivElement={setImageOutputDiv} />
     </Splitter>
   );
 };
 
 type LeftPaneProps = {
-  width: number;
-  height: number;
   imageOutputDiv: HTMLDivElement | null;
-  stanSampler: StanSampler | null;
+  latestRun: StanRun;
 };
 
 export type GlobalDataForAnalysisPy = {
@@ -53,18 +36,15 @@ export type GlobalDataForAnalysisPy = {
 };
 
 const LeftPane: FunctionComponent<LeftPaneProps> = ({
-  width,
-  height,
   imageOutputDiv,
-  stanSampler,
+  latestRun,
 }) => {
   // TODO make useRef
   const [consoleOutputDiv, setConsoleOutputDiv] =
     useState<HTMLDivElement | null>(null);
   const { data, update } = useContext(ProjectContext);
-  const { draws, paramNames, numChains } = useSamplerOutput(
-    stanSampler || undefined,
-  );
+  const { draws, paramNames, samplingOpts } = latestRun;
+  const numChains = samplingOpts?.num_chains;
   const spData = useMemo(() => {
     if (draws && numChains && paramNames) {
       return {
@@ -77,15 +57,8 @@ const LeftPane: FunctionComponent<LeftPaneProps> = ({
     }
   }, [draws, paramNames, numChains]);
   return (
-    <Splitter
-      direction="vertical"
-      width={width}
-      height={height}
-      initialPosition={(3 * height) / 5}
-    >
+    <Splitter direction={SplitDirection.Vertical} initialSizes={[60, 40]}>
       <AnalysisPyFileEditor
-        width={0}
-        height={0}
         fileName="analysis.py"
         fileContent={data.analysisPyFileContent}
         editedFileContent={data.ephemera.analysisPyFileContent}
@@ -107,69 +80,47 @@ const LeftPane: FunctionComponent<LeftPaneProps> = ({
         readOnly={false}
         spData={spData}
       />
-      <ConsoleOutputWindow
-        width={0}
-        height={0}
-        onDivElement={setConsoleOutputDiv}
-      />
+      <ConsoleOutputWindow onDivElement={setConsoleOutputDiv} />
     </Splitter>
   );
 };
 
 type ConsoleOutputWindowProps = {
-  width: number;
-  height: number;
   onDivElement: (div: HTMLDivElement) => void;
 };
 
 export const ConsoleOutputWindow: FunctionComponent<
   ConsoleOutputWindowProps
-> = ({ width, height, onDivElement }) => {
+> = ({ onDivElement }) => {
   return (
     <div
-      style={{ position: "absolute", width, height, overflowY: "auto" }}
+      style={{
+        width: "100%",
+        height: "100%",
+        overflowY: "auto",
+      }}
       ref={onDivElement}
     />
   );
 };
 
 type ImageOutputWindowProps = {
-  width: number;
-  height: number;
   onDivElement: (div: HTMLDivElement) => void;
 };
 
 const ImageOutputWindow: FunctionComponent<ImageOutputWindowProps> = ({
-  width,
-  height,
   onDivElement,
 }) => {
   return (
     <div
-      style={{ position: "absolute", width, height, overflowY: "auto" }}
+      style={{
+        height: "100%",
+        width: "100%",
+        overflowY: "auto",
+      }}
       ref={onDivElement}
     />
   );
 };
 
-type RightPaneProps = {
-  width: number;
-  height: number;
-  onImageOutputDiv: (div: HTMLDivElement) => void;
-};
-
-const RightPane: FunctionComponent<RightPaneProps> = ({
-  width,
-  height,
-  onImageOutputDiv,
-}) => {
-  return (
-    <ImageOutputWindow
-      width={width}
-      height={height}
-      onDivElement={onImageOutputDiv}
-    />
-  );
-};
-
 export default AnalysisPyWindow;
diff --git a/gui/src/app/pages/HomePage/DataGenerationWindow/DataGenerationWindow.tsx b/gui/src/app/pages/HomePage/DataGenerationWindow/DataGenerationWindow.tsx
@@ -1,66 +1,37 @@
 import { FunctionComponent, useCallback, useContext, useState } from "react";
-import TabWidget from "../../../TabWidget/TabWidget";
-import { Splitter } from "@fi-sci/splitter";
 import DataPyFileEditor from "./DataPyFileEditor";
 import { ProjectContext } from "../../../Project/ProjectContextProvider";
 import { ProjectKnownFiles } from "../../../Project/ProjectDataModel";
 import { ConsoleOutputWindow } from "../AnalysisPyWindow/AnalysisPyWindow";
 import DataRFileEditor from "./DataRFileEditor";
 import { writeConsoleOutToDiv } from "app/pyodide/AnalysisPyFileEditor";
+import { SplitDirection, Splitter } from "@SpComponents/Splitter";
+import TabWidget from "@SpComponents/TabWidget";
 
 type DataGenerationWindowProps = {
-  width: number;
-  height: number;
+  // empty
 };
 
 type Language = "python" | "r";
 
-const tabs = [
-  {
-    id: "python",
-    label: "Python",
-    closeable: false,
-  },
-  {
-    id: "r",
-    label: "R",
-    closeable: false,
-  },
-];
-
-const DataGenerationWindow: FunctionComponent<DataGenerationWindowProps> = ({
-  width,
-  height,
-}) => {
-  const [currentTabId, setCurrentTabId] = useState<string>("python");
+const DataGenerationWindow: FunctionComponent<
+  DataGenerationWindowProps
+> = () => {
   return (
-    <TabWidget
-      width={width}
-      height={height}
-      tabs={tabs}
-      currentTabId={currentTabId}
-      setCurrentTabId={setCurrentTabId}
-    >
-      <DataGenerationChildWindow
-        key="python"
-        width={0}
-        height={0}
-        language="python"
-      />
-      <DataGenerationChildWindow key="r" width={0} height={0} language="r" />
+    <TabWidget labels={["Python", "R"]}>
+      <DataGenerationChildWindow language="python" />
+      <DataGenerationChildWindow language="r" />
     </TabWidget>
   );
 };
 
 type DataGenerationChildWindowProps = {
-  width: number;
-  height: number;
   language: Language;
 };
 
 const DataGenerationChildWindow: FunctionComponent<
   DataGenerationChildWindowProps
-> = ({ width, height, language }) => {
+> = ({ language }) => {
   const { data, update } = useContext(ProjectContext);
   const [consoleOutputDiv, setConsoleOutputDiv] =
     useState<HTMLDivElement | null>(null);
@@ -84,15 +55,8 @@ const DataGenerationChildWindow: FunctionComponent<
   const EditorComponent =
     language === "python" ? DataPyFileEditor : DataRFileEditor;
   return (
-    <Splitter
-      width={width}
-      height={height}
-      direction="vertical"
-      initialPosition={(3 * height) / 4}
-    >
+    <Splitter direction={SplitDirection.Vertical} initialSizes={[75, 25]}>
       <EditorComponent
-        width={0}
-        height={0}
         fileName={language === "python" ? "data.py" : "data.r"}
         fileContent={
           language === "python" ? data.dataPyFileContent : data.dataRFileContent
@@ -125,11 +89,7 @@ const DataGenerationChildWindow: FunctionComponent<
         setData={handleSetData}
         outputDiv={consoleOutputDiv}
       />
-      <ConsoleOutputWindow
-        width={0}
-        height={0}
-        onDivElement={setConsoleOutputDiv}
-      />
+      <ConsoleOutputWindow onDivElement={setConsoleOutputDiv} />
     </Splitter>
   );
 };

diff --git a/gui/src/app/pages/HomePage/DataGenerationWindow/DataPyFileEditor.tsx b/gui/src/app/pages/HomePage/DataGenerationWindow/DataPyFileEditor.tsx
@@ -13,8 +13,6 @@ type Props = {
   setEditedFileContent: (text: string) => void;
   readOnly: boolean;
   setData?: (data: any) => void;
-  width: number;
-  height: number;
   outputDiv?: HTMLDivElement | null;
 };
 
@@ -26,8 +24,6 @@ const DataPyFileEditor: FunctionComponent<Props> = ({
   setEditedFileContent,
   setData,
   readOnly,
-  width,
-  height,
   outputDiv,
 }) => {
   const [status, setStatus] = useState<PyodideWorkerStatus>("idle");
@@ -86,8 +82,6 @@ const DataPyFileEditor: FunctionComponent<Props> = ({
 
   return (
     <TextEditor
-      width={width}
-      height={height}
       language="python"
       label={fileName}
       text={fileContent}

diff --git a/gui/src/app/pages/HomePage/DataGenerationWindow/DataRFileEditor.tsx b/gui/src/app/pages/HomePage/DataGenerationWindow/DataRFileEditor.tsx
@@ -11,8 +11,6 @@ type Props = {
   setEditedFileContent: (text: string) => void;
   readOnly: boolean;
   setData?: (data: any) => void;
-  width: number;
-  height: number;
   outputDiv?: HTMLDivElement | null;
 };
 
@@ -37,8 +35,6 @@ const DataRFileEditor: FunctionComponent<Props> = ({
   setEditedFileContent,
   setData,
   readOnly,
-  width,
-  height,
   outputDiv,
 }) => {
   const [status, setStatus] = useState<
@@ -139,8 +135,6 @@ json_result
 
   return (
     <TextEditor
-      width={width}
-      height={height}
       language="r"
       label={fileName}
       text={fileContent}