Visual tweaks for run panel (#197)

flatironinstitute · Aug 5, 2024 · 16f6df1 · 16f6df1
1 parent f585cd2
commit 16f6df1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/gui/src/app/RunPanel/CompiledRunPanel.tsx b/gui/src/app/RunPanel/CompiledRunPanel.tsx
@@ -19,8 +19,18 @@ type CompiledRunPanelProps = {
   errorMessage: string;
 };
 
-const loadingDiv = <div>Loading compiled Stan model...</div>;
-const completedDiv = <div>done sampling</div>;
+const loadingDiv = (
+  <div>
+    <hr />
+    Loading compiled Stan model...
+  </div>
+);
+const completedDiv = (
+  <div>
+    <hr />
+    done sampling
+  </div>
+);
 
 const CompiledRunPanel: FunctionComponent<CompiledRunPanelProps> = ({
   handleRun,
@@ -40,6 +50,7 @@ const CompiledRunPanel: FunctionComponent<CompiledRunPanelProps> = ({
       >
         cancel
       </Button>
+      <hr />
       <div>
         Sampling
         <SamplingProgressComponent
@@ -52,6 +63,7 @@ const CompiledRunPanel: FunctionComponent<CompiledRunPanelProps> = ({
 
   const failedDiv = (
     <div>
+      <hr />
       Sampling failed!
       <pre className="SamplerError">{errorMessage}</pre>
       <span className="details">(see browser console for more details)</span>
@@ -69,7 +81,6 @@ const CompiledRunPanel: FunctionComponent<CompiledRunPanelProps> = ({
         run sampling
       </Button>
       &nbsp;
-      <hr />
       {runStatus === "loading" ? (
         loadingDiv
       ) : runStatus === "completed" ? (

diff --git a/gui/src/app/RunPanel/RunPanel.tsx b/gui/src/app/RunPanel/RunPanel.tsx
@@ -12,6 +12,7 @@ import {
 import StanSampler from "@SpStanSampler/StanSampler";
 import { StanRun } from "@SpStanSampler/useStanSampler";
 import CompiledRunPanel from "./CompiledRunPanel";
+import CircularProgress from "@mui/material/CircularProgress";
 
 type RunPanelProps = {
   sampler?: StanSampler;
@@ -40,8 +41,7 @@ const RunPanel: FunctionComponent<RunPanelProps> = ({
     sampler.cancel();
   }, [sampler]);
 
-  const { compile, compileMessage, compileStatus, validSyntax } =
-    useContext(CompileContext);
+  const { compile, compileStatus, validSyntax } = useContext(CompileContext);
 
   const { data: projectData } = useContext(ProjectContext);
 
@@ -61,7 +61,11 @@ const RunPanel: FunctionComponent<RunPanelProps> = ({
     </div>
   );
 
-  const compilingDiv = <div>{compileMessage}</div>;
+  const compilingDiv = (
+    <div>
+      <CircularProgress />
+    </div>
+  );
 
   return (
     <div className="RunPanel">