Skip to content

Commit

Permalink
Add local modal dialog after MUI example. Remove fi-sci dependency.
Browse files Browse the repository at this point in the history
  • Loading branch information
jsoules committed Jul 30, 2024
1 parent c78aa2c commit e8e7a60
Show file tree
Hide file tree
Showing 10 changed files with 246 additions and 165 deletions.
6 changes: 3 additions & 3 deletions gui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,9 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fi-sci/misc": "^0.0.8",
"@fi-sci/modal-window": "^0.0.2",
"@geoffcox/react-splitter": "^2.1.2",
"@monaco-editor/react": "^4.6.0",
"@mui/icons-material": "^5.15.17",
"@mui/icons-material": "^5.16.5",
"@mui/material": "^5.15.17",
"@octokit/rest": "^21.0.0",
"@vercel/analytics": "^1.3.1",
Expand Down Expand Up @@ -65,5 +64,6 @@
"vite": "^5.2.12",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
}
},
"packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
}
20 changes: 13 additions & 7 deletions gui/src/app/App.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import { BrowserRouter } from "react-router-dom";
import { createTheme } from "@mui/material";
import { ThemeProvider } from "@mui/system";
import ProjectContextProvider from "@SpCore/ProjectContextProvider";
import HomePage from "@SpPages/HomePage";
import { Analytics } from "@vercel/analytics/react";
import { BrowserRouter } from "react-router-dom";

const theme = createTheme();

function App() {
return (
<BrowserRouter>
<div className="MainWindow">
<ProjectContextProvider>
<HomePage />
</ProjectContextProvider>
<Analytics />
</div>
<ThemeProvider theme={theme}>
<div className="MainWindow">
<ProjectContextProvider>
<HomePage />
</ProjectContextProvider>
<Analytics />
</div>
</ThemeProvider>
</BrowserRouter>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { SmallIconButton } from "@fi-sci/misc";
import { default as ModalWindow, useModalWindow } from "@fi-sci/modal-window";
import { Cancel, Check } from "@mui/icons-material";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";

import CloseableDialog, {
useDialogControls,
} from "@SpComponents/CloseableDialog";
import { FunctionComponent, useCallback, useEffect, useState } from "react";
import ConfigureCompilationServerDialog from "./ConfigureCompilationServerDialog";

export const publicUrl = "https://trom-stan-wasm-server.magland.org";
export const localUrl = "http://localhost:8083";

type CompilationServerConnectionControlProps = {
// none
};

const publicUrl = "https://trom-stan-wasm-server.magland.org";
const localUrl = "http://localhost:8083";

const CompilationServerConnectionControl: FunctionComponent<
CompilationServerConnectionControlProps
> = () => {
Expand All @@ -26,8 +29,8 @@ const CompilationServerConnectionControl: FunctionComponent<
const {
handleOpen: openDialog,
handleClose: closeDialog,
visible: dialogVisible,
} = useModalWindow();
open,
} = useDialogControls();

const handleRetry = useCallback(() => {
retryConnection();
Expand Down Expand Up @@ -60,15 +63,20 @@ const CompilationServerConnectionControl: FunctionComponent<
</Link>
&nbsp;&nbsp;
</span>
<ModalWindow visible={dialogVisible} onClose={closeDialog}>
<CloseableDialog
title="Select a compilation server"
id="compilationDialog"
open={open}
handleClose={closeDialog}
>
<ConfigureCompilationServerDialog
stanWasmServerUrl={stanWasmServerUrl}
setStanWasmServerUrl={setStanWasmServerUrl}
isConnected={isConnected}
closeDialog={closeDialog}
onRetry={handleRetry}
/>
</ModalWindow>
</CloseableDialog>
</span>
);
};
Expand Down Expand Up @@ -96,123 +104,4 @@ const useIsConnected = (stanWasmServerUrl: string) => {
return { isConnected, retryConnection };
};

type ConfigureCompilationServerDialogProps = {
stanWasmServerUrl: string;
setStanWasmServerUrl: (url: string) => void;
isConnected: boolean;
closeDialog: () => void;
onRetry: () => void;
};

const ConfigureCompilationServerDialog: FunctionComponent<
ConfigureCompilationServerDialogProps
> = ({
stanWasmServerUrl,
setStanWasmServerUrl,
isConnected,
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]);
return (
<div>
<h3>Select a compilation server</h3>
<p>
While the sampling is performed locally in the browser, a compilation
server is required to compile the Stan programs.
</p>
<hr />
<div>
{isConnected ? (
<span className="connected">Connected</span>
) : (
<span className="disconnected">Not connected</span>
)}
&nbsp;
<Link onClick={onRetry} component="button" underline="none">
retry
</Link>
</div>
<hr />
<div>
<input
type="radio"
id="public"
name="server"
value="public"
checked={choice === "public"}
onChange={() => {
if (choice === "custom") setChoice("public");
setStanWasmServerUrl(publicUrl);
}}
/>
<label htmlFor="public">Public server</label>
<br />

<input
type="radio"
id="local"
name="server"
value="local"
checked={choice === "local"}
onChange={() => {
if (choice === "custom") setChoice("local");
setStanWasmServerUrl(localUrl);
}}
/>
<label htmlFor="local">Local server</label>
<br />

<input
type="radio"
id="custom"
name="server"
value="custom"
checked={choice === "custom"}
onChange={() => setChoice("custom")}
/>
<label htmlFor="custom">Custom server</label>
<br />

<input
// This one isn't honoring a class-based style for some reason
style={{ width: 500 }}
disabled={choice !== "custom"}
type="text"
value={stanWasmServerUrl}
onChange={(e) => setStanWasmServerUrl(e.target.value)}
/>
<br />
<hr />
{choice === "local" && (
<div>
<p>To start a local compilation server:</p>
<div>
<pre>
docker run -p 8083:8080 -it magland/stan-wasm-server:latest
</pre>
</div>
</div>
)}
{choice === "public" && (
<div>
<p>
The public server is provided for convenience, but may not be as
reliable as a local server, depending on the current load and
availability.
</p>
</div>
)}
<hr />
<Button onClick={() => closeDialog()}>Close</Button>
</div>
</div>
);
};

export default CompilationServerConnectionControl;
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import { FunctionComponent, useEffect, useState } from "react";
import { localUrl, publicUrl } from "./CompilationServerConnectionControl";

type ConfigureCompilationServerDialogProps = {
stanWasmServerUrl: string;
setStanWasmServerUrl: (url: string) => void;
isConnected: boolean;
closeDialog: () => void;
onRetry: () => void;
};

const ConfigureCompilationServerDialog: FunctionComponent<
ConfigureCompilationServerDialogProps
> = ({
stanWasmServerUrl,
setStanWasmServerUrl,
isConnected,
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]);
return (
<div className="dialogWrapper">
<p>
While the sampling is performed locally in the browser, a compilation
server is required to compile the Stan programs.
</p>
<hr />
<div>
{isConnected ? (
<span className="connected">Connected</span>
) : (
<span className="disconnected">Not connected</span>
)}
&nbsp;
<Link onClick={onRetry} component="button" underline="none">
retry
</Link>
</div>
<hr />
<div>
<input
type="radio"
id="public"
name="server"
value="public"
checked={choice === "public"}
onChange={() => {
if (choice === "custom") setChoice("public");
setStanWasmServerUrl(publicUrl);
}}
/>
<label htmlFor="public">Public server</label>
<br />

<input
type="radio"
id="local"
name="server"
value="local"
checked={choice === "local"}
onChange={() => {
if (choice === "custom") setChoice("local");
setStanWasmServerUrl(localUrl);
}}
/>
<label htmlFor="local">Local server</label>
<br />

<input
type="radio"
id="custom"
name="server"
value="custom"
checked={choice === "custom"}
onChange={() => setChoice("custom")}
/>
<label htmlFor="custom">Custom server</label>
<br />

<input
// This one isn't honoring a class-based style for some reason
style={{ width: 500 }}
disabled={choice !== "custom"}
type="text"
value={stanWasmServerUrl}
onChange={(e) => setStanWasmServerUrl(e.target.value)}
/>
<br />
<hr />
{choice === "local" && (
<div>
<p>To start a local compilation server:</p>
<div>
<pre>
docker run -p 8083:8080 -it magland/stan-wasm-server:latest
</pre>
</div>
</div>
)}
{choice === "public" && (
<div>
<p>
The public server is provided for convenience, but may not be as
reliable as a local server, depending on the current load and
availability.
</p>
</div>
)}
<hr />
<Button onClick={() => closeDialog()}>Close</Button>
</div>
</div>
);
};

export default ConfigureCompilationServerDialog;
Loading

0 comments on commit e8e7a60

Please sign in to comment.