From 8bfed8e9e0b2fb73e031eae217e7df912eea13a8 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Wed, 31 Jul 2024 15:14:15 +0000 Subject: [PATCH 1/5] Use MUI for connection controls --- .../CompilationServerConnectionControl.tsx | 33 ++-- .../ConfigureCompilationServerDialog.tsx | 177 ++++++++++-------- gui/src/app/pages/HomePage/TopBar.tsx | 25 ++- gui/src/localStyles.css | 12 -- 4 files changed, 119 insertions(+), 128 deletions(-) diff --git a/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx b/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx index 175878a1..42fd646d 100644 --- a/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx +++ b/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx @@ -1,12 +1,12 @@ -import { SmallIconButton } from "@fi-sci/misc"; import { Cancel, Check } from "@mui/icons-material"; -import Link from "@mui/material/Link"; import CloseableDialog, { useDialogControls, } from "@SpComponents/CloseableDialog"; import { FunctionComponent, useCallback, useEffect, useState } from "react"; import ConfigureCompilationServerDialog from "./ConfigureCompilationServerDialog"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; export const publicUrl = "https://trom-stan-wasm-server.magland.org"; export const localUrl = "http://localhost:8083"; @@ -43,26 +43,19 @@ const CompilationServerConnectionControl: FunctionComponent< ? "local" : "custom"; return ( - - - - : } - onClick={openDialog} - /> - + <> + + {isConnected ? ( + + ) : ( + + )}   - + {isConnected ? "connected to " : "not connected to "} {serverLabel} - -    - + + - + ); }; diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx index b953c5a0..781f7b71 100644 --- a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx +++ b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx @@ -1,7 +1,18 @@ import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; -import { FunctionComponent, useEffect, useState } from "react"; +import { FunctionComponent, useCallback, useState } from "react"; import { localUrl, publicUrl } from "./CompilationServerConnectionControl"; +import FormControl from "@mui/material/FormControl"; +import { + Divider, + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + TextField, +} from "@mui/material"; + +type ServerType = "public" | "local" | "custom"; type ConfigureCompilationServerDialogProps = { stanWasmServerUrl: string; @@ -20,103 +31,103 @@ const ConfigureCompilationServerDialog: FunctionComponent< closeDialog, onRetry, }) => { - const [choice, setChoice] = useState<"public" | "local" | "custom">("custom"); - useEffect(() => { - if (stanWasmServerUrl === publicUrl) setChoice("public"); - else if (stanWasmServerUrl === localUrl) setChoice("local"); - else setChoice("custom"); - }, [stanWasmServerUrl]); + const [choice, setChoice] = useState("custom"); + + const makeChoice = useCallback( + (_: unknown, choice: string) => { + if (choice === "public") { + setStanWasmServerUrl(publicUrl); + } else if (choice === "local") { + setStanWasmServerUrl(localUrl); + } else if (choice !== "custom") { + return; + } + setChoice(choice); + }, + [setStanWasmServerUrl], + ); + return (

While the sampling is performed locally in the browser, a compilation server is required to compile the Stan programs.

-
+
- {isConnected ? ( - Connected - ) : ( - Not connected - )} -   - - retry - +

+ {isConnected ? ( + Connected + ) : ( + Not connected + )} +   + + retry + +

-
-
- { - if (choice === "custom") setChoice("public"); - setStanWasmServerUrl(publicUrl); - }} - /> - -
+ - { - if (choice === "custom") setChoice("local"); - setStanWasmServerUrl(localUrl); - }} - /> - -
+ + + Compilation server + + + } + label="Public server" + /> + } + label="Local server" + /> + } + label="Custom server" + /> + - setChoice("custom")} - /> - -
- - setStanWasmServerUrl(e.target.value)} - /> -
-
- {choice === "local" && ( -
-

To start a local compilation server:

-
- 
-                docker run -p 8083:8080 -it magland/stan-wasm-server:latest
-
-
-
- )} - {choice === "public" && ( + {choice === "custom" && (

- The public server is provided for convenience, but may not be as - reliable as a local server, depending on the current load and - availability. + setStanWasmServerUrl(e.target.value)} + />

)} -
- -
+ + + {choice === "local" && ( +
+

To start a local compilation server:

+
+ 
+              docker run -p 8083:8080 -it magland/stan-wasm-server:latest
+
+
+
+ )} + {choice === "public" && ( +
+

+ The public server is provided for convenience, but may not be as + reliable as a local server, depending on the current load and + availability. +

+
+ )} + + +
); }; diff --git a/gui/src/app/pages/HomePage/TopBar.tsx b/gui/src/app/pages/HomePage/TopBar.tsx index 918bd37d..7936c32c 100644 --- a/gui/src/app/pages/HomePage/TopBar.tsx +++ b/gui/src/app/pages/HomePage/TopBar.tsx @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import CompilationServerConnectionControl from "@SpStanc/CompilationServerConnectionControl"; -import { SmallIconButton } from "@fi-sci/misc"; import { Menu, QuestionMark } from "@mui/icons-material"; import AppBar from "@mui/material/AppBar"; import IconButton from "@mui/material/IconButton"; @@ -35,18 +34,18 @@ const TopBar: FunctionComponent = ({ title, onSetCollapsed }) => { Stan Playground - {title} - - } - onClick={() => { - window.open( - "https://github.com/flatironinstitute/stan-playground", - "_blank", - ); - }} - title={`About Stan Playground`} - /> - + + window.open( + "https://github.com/flatironinstitute/stan-playground", + "_blank", + ) + } + > + + ); diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css index 435a10bf..509689e1 100644 --- a/gui/src/localStyles.css +++ b/gui/src/localStyles.css @@ -17,18 +17,6 @@ padding: 10px; } -.CompilationServerConnectionPane { - font-size: 12px; -} - -.CompilationServerConnectionPane .connected { - color: lightgreen; -} - -.CompilationServerConnectionPane .disconnected { - color: pink; -} - /* Compilation Results (StanCompileResultWindow) */ .ErrorsWindow { height: 100%; From 1f7f012aa1370bd29e823232334b129945430062 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Wed, 31 Jul 2024 15:17:36 +0000 Subject: [PATCH 2/5] Fix MUI imports --- gui/src/app/App.tsx | 2 +- .../ConfigureCompilationServerDialog.tsx | 14 ++++++-------- gui/src/app/pages/HomePage/Sidebar.tsx | 3 ++- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/gui/src/app/App.tsx b/gui/src/app/App.tsx index 7899515e..67a3efa9 100644 --- a/gui/src/app/App.tsx +++ b/gui/src/app/App.tsx @@ -1,4 +1,4 @@ -import { createTheme } from "@mui/material"; +import createTheme from "@mui/material/styles/createTheme"; import { ThemeProvider } from "@mui/system"; import ProjectContextProvider from "@SpCore/ProjectContextProvider"; import HomePage from "@SpPages/HomePage"; diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx index 781f7b71..83708a36 100644 --- a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx +++ b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx @@ -3,14 +3,12 @@ import Link from "@mui/material/Link"; import { FunctionComponent, useCallback, useState } from "react"; import { localUrl, publicUrl } from "./CompilationServerConnectionControl"; import FormControl from "@mui/material/FormControl"; -import { - Divider, - FormControlLabel, - FormLabel, - Radio, - RadioGroup, - TextField, -} from "@mui/material"; +import Divider from "@mui/material/Divider"; +import FormLabel from "@mui/material/FormLabel"; +import RadioGroup from "@mui/material/RadioGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Radio from "@mui/material/Radio"; +import TextField from "@mui/material/TextField"; type ServerType = "public" | "local" | "custom"; diff --git a/gui/src/app/pages/HomePage/Sidebar.tsx b/gui/src/app/pages/HomePage/Sidebar.tsx index eceeb4b7..529cb0c4 100644 --- a/gui/src/app/pages/HomePage/Sidebar.tsx +++ b/gui/src/app/pages/HomePage/Sidebar.tsx @@ -5,11 +5,12 @@ import { ProjectContext } from "@SpCore/ProjectContextProvider"; import { modelHasUnsavedChanges } from "@SpCore/ProjectDataModel"; import LoadProjectWindow from "@SpPages/LoadProjectWindow"; import SaveProjectWindow from "@SpPages/SaveProjectWindow"; -import { List, ListItem } from "@mui/material"; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import Drawer from "@mui/material/Drawer"; import Link from "@mui/material/Link"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; import Toolbar from "@mui/material/Toolbar"; import { FunctionComponent, useContext, useMemo } from "react"; import { useNavigate } from "react-router-dom"; From fc0395e467e4a4dd956ab6cf6e58c75fddc3f585 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Wed, 31 Jul 2024 15:38:51 +0000 Subject: [PATCH 3/5] Change retry button, show urls in descriptions --- .../ConfigureCompilationServerDialog.tsx | 37 ++++++++----------- gui/src/localStyles.css | 5 +++ 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx index 83708a36..25d511ea 100644 --- a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx +++ b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx @@ -1,5 +1,3 @@ -import Button from "@mui/material/Button"; -import Link from "@mui/material/Link"; import { FunctionComponent, useCallback, useState } from "react"; import { localUrl, publicUrl } from "./CompilationServerConnectionControl"; import FormControl from "@mui/material/FormControl"; @@ -9,6 +7,8 @@ import RadioGroup from "@mui/material/RadioGroup"; import FormControlLabel from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; import TextField from "@mui/material/TextField"; +import IconButton from "@mui/material/IconButton"; +import { Refresh } from "@mui/icons-material"; type ServerType = "public" | "local" | "custom"; @@ -16,19 +16,12 @@ type ConfigureCompilationServerDialogProps = { stanWasmServerUrl: string; setStanWasmServerUrl: (url: string) => void; isConnected: boolean; - closeDialog: () => void; onRetry: () => void; }; const ConfigureCompilationServerDialog: FunctionComponent< ConfigureCompilationServerDialogProps -> = ({ - stanWasmServerUrl, - setStanWasmServerUrl, - isConnected, - closeDialog, - onRetry, -}) => { +> = ({ stanWasmServerUrl, setStanWasmServerUrl, isConnected, onRetry }) => { const [choice, setChoice] = useState("custom"); const makeChoice = useCallback( @@ -37,7 +30,9 @@ const ConfigureCompilationServerDialog: FunctionComponent< setStanWasmServerUrl(publicUrl); } else if (choice === "local") { setStanWasmServerUrl(localUrl); - } else if (choice !== "custom") { + } else if (choice === "custom") { + setStanWasmServerUrl(""); + } else { return; } setChoice(choice); @@ -60,9 +55,9 @@ const ConfigureCompilationServerDialog: FunctionComponent< Not connected )}   - - retry - + + +

@@ -106,7 +101,10 @@ const ConfigureCompilationServerDialog: FunctionComponent< {choice === "local" && (
-

To start a local compilation server:

+

+ To start a local compilation server{" "} + ({localUrl}): + 

               docker run -p 8083:8080 -it magland/stan-wasm-server:latest
@@ -117,15 +115,12 @@ const ConfigureCompilationServerDialog: FunctionComponent<
       {choice === "public" && (
         

           

-            The public server is provided for convenience, but may not be as
-            reliable as a local server, depending on the current load and
-            availability.
+            The public server ({publicUrl}) is
+            provided for convenience, but may not be as reliable as a local
+            server, depending on the current load and availability.
           

         

       )}
-
-      
-
); }; diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css index 509689e1..4045a7a4 100644 --- a/gui/src/localStyles.css +++ b/gui/src/localStyles.css @@ -17,6 +17,11 @@ padding: 10px; } +.details { + color: gray; + font-size: smaller; +} + /* Compilation Results (StanCompileResultWindow) */ .ErrorsWindow { height: 100%; From c455ed4ac3688554bd4c2489cf030d8edf990951 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Wed, 31 Jul 2024 15:40:31 +0000 Subject: [PATCH 4/5] Fix default --- .../ConfigureCompilationServerDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx index 25d511ea..ce5dacac 100644 --- a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx +++ b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx @@ -22,7 +22,7 @@ type ConfigureCompilationServerDialogProps = { const ConfigureCompilationServerDialog: FunctionComponent< ConfigureCompilationServerDialogProps > = ({ stanWasmServerUrl, setStanWasmServerUrl, isConnected, onRetry }) => { - const [choice, setChoice] = useState("custom"); + const [choice, setChoice] = useState("public"); const makeChoice = useCallback( (_: unknown, choice: string) => { From f948916dfcfd954d161157e068b481408dfb600f Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Wed, 31 Jul 2024 15:45:24 +0000 Subject: [PATCH 5/5] Fix build --- .../CompilationServerConnectionControl.tsx | 1 - .../ConfigureCompilationServerDialog.tsx | 24 +++++++++---------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx b/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx index 42fd646d..91b0987e 100644 --- a/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx +++ b/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx @@ -66,7 +66,6 @@ const CompilationServerConnectionControl: FunctionComponent< stanWasmServerUrl={stanWasmServerUrl} setStanWasmServerUrl={setStanWasmServerUrl} isConnected={isConnected} - closeDialog={closeDialog} onRetry={handleRetry} /> diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx index ce5dacac..61e8cf80 100644 --- a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx +++ b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx @@ -47,19 +47,17 @@ const ConfigureCompilationServerDialog: FunctionComponent< server is required to compile the Stan programs.

-
-

- {isConnected ? ( - Connected - ) : ( - Not connected - )} -   - - - -

-
+

+ {isConnected ? ( + Connected + ) : ( + Not connected + )} +   + + + +