From 725d9ad2e64722ae5c77233cd89c78120aec9741 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Tue, 25 Jun 2024 19:27:10 +0000 Subject: [PATCH 1/2] Reintroduce formatting for stanie data file --- gui/src/app/SPAnalysis/SPAnalysisReducer.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/gui/src/app/SPAnalysis/SPAnalysisReducer.ts b/gui/src/app/SPAnalysis/SPAnalysisReducer.ts index 0c195413..804406be 100644 --- a/gui/src/app/SPAnalysis/SPAnalysisReducer.ts +++ b/gui/src/app/SPAnalysis/SPAnalysisReducer.ts @@ -32,16 +32,17 @@ export type SPAnalysisReducerAction = { export const SPAnalysisReducer: SPAnalysisReducerType = (s: SPAnalysisDataModel, a: SPAnalysisReducerAction) => { switch (a.type) { case "loadStanie": { + const dataFileContent = JSON.stringify(a.stanie.data, null, 2); return { ...s, stanFileContent: a.stanie.stan, - dataFileContent: JSON.stringify(a.stanie.data), + dataFileContent, samplingOpts: defaultSamplingOpts, meta: { ...s.meta, title: a.stanie.meta.title ?? 'Untitled' }, ephemera: { ...s.ephemera, stanFileContent: a.stanie.stan, - dataFileContent: JSON.stringify(a.stanie.data) + dataFileContent, } } } From 521fd307ecf546006e891635d21bf3b9d043977f Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Tue, 25 Jun 2024 20:31:02 +0000 Subject: [PATCH 2/2] Remove existing router logic --- gui/src/app/MainWindow.tsx | 14 +-- .../SPAnalysis/SPAnalysisContextProvider.tsx | 2 - gui/src/app/pages/HomePage/HomePage.tsx | 31 ++---- gui/src/app/pages/HomePage/TopBar.tsx | 26 ++--- gui/src/app/useRoute.ts | 104 ------------------ 5 files changed, 22 insertions(+), 155 deletions(-) delete mode 100644 gui/src/app/useRoute.ts diff --git a/gui/src/app/MainWindow.tsx b/gui/src/app/MainWindow.tsx index 9ec0639a..3ef37c40 100644 --- a/gui/src/app/MainWindow.tsx +++ b/gui/src/app/MainWindow.tsx @@ -2,28 +2,18 @@ import { useWindowDimensions } from "@fi-sci/misc"; import { FunctionComponent } from "react"; import StatusBar, { statusBarHeight } from "./StatusBar"; import HomePage from "./pages/HomePage/HomePage"; -import useRoute from "./useRoute"; type Props = { // none } const MainWindow: FunctionComponent = () => { - const {route} = useRoute() const {width, height} = useWindowDimensions() const H = height - statusBarHeight return (
- { - route.page === 'home' ? ( - - ) : route.page === 'about' ? ( - - ) : ( -
404
- ) - } +
{ statusBarHeight && ( @@ -39,4 +29,4 @@ const MainWindow: FunctionComponent = () => { ) } -export default MainWindow \ No newline at end of file +export default MainWindow diff --git a/gui/src/app/SPAnalysis/SPAnalysisContextProvider.tsx b/gui/src/app/SPAnalysis/SPAnalysisContextProvider.tsx index 53ad21f5..1ca9b5de 100644 --- a/gui/src/app/SPAnalysis/SPAnalysisContextProvider.tsx +++ b/gui/src/app/SPAnalysis/SPAnalysisContextProvider.tsx @@ -8,8 +8,6 @@ type SPAnalysisContextType = { } type SPAnalysisContextProviderProps = { - // may be used in the future when we allow parameters to be passed through the string - sourceDataUri: string } export const SPAnalysisContext = createContext({ diff --git a/gui/src/app/pages/HomePage/HomePage.tsx b/gui/src/app/pages/HomePage/HomePage.tsx index 3164e709..3b659113 100644 --- a/gui/src/app/pages/HomePage/HomePage.tsx +++ b/gui/src/app/pages/HomePage/HomePage.tsx @@ -9,7 +9,6 @@ import SPAnalysisContextProvider, { SPAnalysisContext } from '../../SPAnalysis/S import { SPAnalysisKnownFiles } from "../../SPAnalysis/SPAnalysisDataModel"; import { SamplingOpts } from "../../StanSampler/StanSampler"; import useStanSampler, { useSamplerStatus } from "../../StanSampler/useStanSampler"; -import useRoute from "../../useRoute"; import LeftPanel from "./LeftPanel"; import TopBar from "./TopBar"; @@ -19,31 +18,23 @@ type Props = { } const HomePage: FunctionComponent = ({ width, height }) => { - const { route } = useRoute() - if (route.page !== 'home') { - throw Error('Unexpected route') - } + // NOTE: We should probably move the SPAnalysisContextProvider up to the App or MainWindow // component; however this will wait on routing refactor since I don't want to add the `route` // item in those contexts in this PR return ( - + ) } const HomePageChild: FunctionComponent = ({ width, height }) => { - const { route, setRoute } = useRoute() - if (route.page !== 'home') { - throw Error('Unexpected route') - } + + const { data, update } = useContext(SPAnalysisContext) const setSamplingOpts = useCallback((opts: SamplingOpts) => { - update({type: 'setSamplingOpts', opts}) + update({ type: 'setSamplingOpts', opts }) }, [update]) const [compiledMainJsUrl, setCompiledMainJsUrl] = useState('') @@ -52,20 +43,14 @@ const HomePageChild: FunctionComponent = ({ width, height }) => { const topBarHeight = 25 useEffect(() => { - // update the title in the route - const newRoute = { ...route, title: data.meta.title } - setRoute(newRoute, true) - }, [data.meta.title, route, setRoute]) - - useEffect(() => { - // update the document title based on the route - document.title = route?.title ?? 'stan-playground' - }, [route.title]) + document.title = "Stan Playground - " + data.meta.title; + }, [data.meta.title]) return (
diff --git a/gui/src/app/pages/HomePage/TopBar.tsx b/gui/src/app/pages/HomePage/TopBar.tsx index 8245ec8a..786029f7 100644 --- a/gui/src/app/pages/HomePage/TopBar.tsx +++ b/gui/src/app/pages/HomePage/TopBar.tsx @@ -3,32 +3,30 @@ import { FunctionComponent } from "react"; import CompilationServerConnectionControl from "../../CompilationServerConnectionControl/CompilationServerConnectionControl"; import { SmallIconButton } from "@fi-sci/misc"; import { QuestionMark } from "@mui/icons-material"; -import useRoute from "../../useRoute"; import { Toolbar } from "@mui/material"; type TopBarProps = { + title: string width: number height: number } -const TopBar: FunctionComponent = () => { - const { route, setRoute } = useRoute() - if (route.page !== 'home') { - throw Error('Unexpected route') - } +const TopBar: FunctionComponent = ({title}) => { return (
- - Stan Playground - {route.title} - + + Stan Playground - {title} + - } - onClick={() => setRoute({page: 'about'})} - title={`About Stan Playground`} - /> + } + onClick={() => { + window.open("https://github.com/flatironinstitute/stan-playground", "_blank") + }} + title={`About Stan Playground`} + />
diff --git a/gui/src/app/useRoute.ts b/gui/src/app/useRoute.ts deleted file mode 100644 index 5a6db133..00000000 --- a/gui/src/app/useRoute.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { useCallback, useMemo } from "react" -import { useLocation, useNavigate } from "react-router-dom" - -export type Route = { - page: 'home' - sourceDataUri: string - title: string -} | { - page: 'about' -} - -const useRoute = () => { - const location = useLocation() - const navigate = useNavigate() - const search = location.search - const query = useMemo(() => (parseSearchString(search)), [search]) - const p = query.p || '/' - const route: Route = useMemo(() => { - if (typeof p !== 'string') { - console.warn('Unexpected type for p', typeof p) - return { - page: 'home', - sourceDataUri: '', - title: '' - } - } - if (p === '/about') { - return { - page: 'about' - } - } - else { - return { - page: 'home', - sourceDataUri: p, - title: decodeURI((query.t || '') as string) - } - } - }, [p, query]) - - const setRoute = useCallback((r: Route, replaceHistory?: boolean) => { - let newQuery = {...query} - if (r.page === 'home') { - newQuery = {p: '/', t: encodeURI(r.title)} - } - else if (r.page === 'about') { - newQuery = {p: '/about'} - } - const newSearch = queryToQueryString(newQuery) - navigate(location.pathname + newSearch, {replace: replaceHistory}) - }, [navigate, location.pathname, query]) - - return { - route, - setRoute - } -} - -const parseSearchString = (search: string) => { - const query: { [key: string]: string | string[] } = {} - const a = search.slice(1).split('&') - for (const s of a) { - const b = s.split('=') - const key = b[0] - const value = b[1] - if ((key in query) && (query[key])) { - if (Array.isArray(query[key])) { - (query[key] as string[]).push(value) - } - else if (typeof query[key] === 'string') { - query[key] = [query[key] as string, value] - } - else { - console.warn('Unexpected query[key] type in parseSearchString', typeof query[key]) - } - } - else { - query[key] = value - } - } - return query -} - -const queryToQueryString = (query: { [key: string]: string | string[] }) => { - const a: string[] = [] - for (const key in query) { - if (query[key]) { - if (Array.isArray(query[key])) { - for (const value of (query[key] as string[])) { - a.push(`${key}=${value}`) - } - } - else if (typeof query[key] === 'string') { - a.push(`${key}=${query[key]}`) - } - else { - console.warn('Unexpected query[key] type in queryToQueryString', typeof query[key]) - } - } - } - return '?' + a.join('&') -} - -export default useRoute \ No newline at end of file