Skip to content

Commit

Permalink
Merge pull request #102 from flatironinstitute/rearrange-main-layout-2
Browse files Browse the repository at this point in the history 
rearrange main layout
  • Loading branch information
@WardBrian
WardBrian authored Jun 28, 2024
2 parents acdfe1d + 5efbaf3 commit 506b6e9
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 63 deletions.
4 changes: 4 additions & 0 deletions gui/src/app/SPAnalysis/SPAnalysisDataModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ export const modelHasUnsavedChanges = (data: SPAnalysisDataModel): boolean => {
return stringFileKeys.some((k) => data[k] !== data.ephemera[k])
}

export const modelHasUnsavedDataFileChanges = (data: SPAnalysisDataModel): boolean => {
return data.dataFileContent !== data.ephemera.dataFileContent
}

export const stringifyField = (data: SPAnalysisDataModel, field: keyof SPAnalysisDataModel): string => {
if (field === 'ephemera') return ''
const value = data[field]
Expand Down
2 changes: 1 addition & 1 deletion gui/src/app/SamplingOptsPanel/SamplingOptsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const SamplingOptsPanel: FunctionComponent<SamplingOptsPanelProps> = ({ sampling
setSamplingOpts && setSamplingOpts(defaultSamplingOpts)
}, [setSamplingOpts])
return (
<div>
<div style={{padding: 10}}>
<Grid container spacing={sp1}>
<Grid container item xs={12} spacing={sp2} title="Number of sampling chains">
<Grid item xs={6}>
Expand Down
96 changes: 39 additions & 57 deletions gui/src/app/pages/HomePage/HomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import RunPanel from "../../RunPanel/RunPanel";
import SamplerOutputView from "../../SamplerOutputView/SamplerOutputView";
import SamplingOptsPanel from "../../SamplingOptsPanel/SamplingOptsPanel";
import SPAnalysisContextProvider, { SPAnalysisContext } from '../../SPAnalysis/SPAnalysisContextProvider';
import { modelHasUnsavedChanges, SPAnalysisKnownFiles } from "../../SPAnalysis/SPAnalysisDataModel";
import { modelHasUnsavedChanges, modelHasUnsavedDataFileChanges, SPAnalysisKnownFiles } from "../../SPAnalysis/SPAnalysisDataModel";
import { SamplingOpts } from "../../StanSampler/StanSampler";
import useStanSampler, { useSamplerStatus } from "../../StanSampler/useStanSampler";
import LeftPanel from "./LeftPanel";
Expand All @@ -30,10 +30,7 @@ const HomePage: FunctionComponent<Props> = ({ width, height }) => {
}

const HomePageChild: FunctionComponent<Props> = ({ width, height }) => {
const { data, update } = useContext(SPAnalysisContext)
const setSamplingOpts = useCallback((opts: SamplingOpts) => {
update({ type: 'setSamplingOpts', opts })
}, [update])
const { data } = useContext(SPAnalysisContext)

const [compiledMainJsUrl, setCompiledMainJsUrl] = useState<string>('')

Expand All @@ -54,7 +51,7 @@ const HomePageChild: FunctionComponent<Props> = ({ width, height }) => {
}
}, [width])

const topBarHeight = 25
const topBarHeight = 22

useEffect(() => {
document.title = "Stan Playground - " + data.meta.title;
Expand Down Expand Up @@ -85,29 +82,15 @@ const HomePageChild: FunctionComponent<Props> = ({ width, height }) => {
direction="horizontal"
initialPosition={Math.min(800, (width - leftPanelWidth) / 2)}
>
<StanFileEditor
<LeftView
width={0}
height={0}
fileName="main.stan"
fileContent={data.stanFileContent}
// this could be made more ergonomic?
onSaveContent={() => update({ type: 'commitFile', filename: SPAnalysisKnownFiles.STANFILE })}
editedFileContent={data.ephemera.stanFileContent}
setEditedFileContent={(content: string) => update({ type: 'editFile', content, filename: SPAnalysisKnownFiles.STANFILE })}
readOnly={false}
setCompiledUrl={setCompiledMainJsUrl}
setCompiledMainJsUrl={setCompiledMainJsUrl}
/>
<RightView
width={0}
height={0}
dataFileContent={data.dataFileContent}
// this could be more ergonomic?
saveDataFileContent={() => update({ type: 'commitFile', filename: SPAnalysisKnownFiles.DATAFILE })}
editedDataFileContent={data.ephemera.dataFileContent}
setEditedDataFileContent={(content: string) => update({ type: 'editFile', content, filename: SPAnalysisKnownFiles.DATAFILE })}
compiledMainJsUrl={compiledMainJsUrl}
samplingOpts={data.samplingOpts}
setSamplingOpts={setSamplingOpts}
/>
</Splitter>
</div>
Expand All @@ -117,8 +100,8 @@ const HomePageChild: FunctionComponent<Props> = ({ width, height }) => {

// the width of the left panel when it is expanded based on the overall width
const determineLeftPanelWidth = (width: number) => {
const minWidth = 250
const maxWidth = 400
const minWidth = 150
const maxWidth = 250
return Math.min(maxWidth, Math.max(minWidth, width / 4))
}

Expand All @@ -128,79 +111,78 @@ const determineShouldBeInitiallyCollapsed = (width: number) => {
return width < 800
}

type RightViewProps = {
type LeftViewProps = {
width: number
height: number
dataFileContent: string
saveDataFileContent: (text: string) => void
editedDataFileContent: string
setEditedDataFileContent: (text: string) => void
compiledMainJsUrl?: string
samplingOpts: SamplingOpts
setSamplingOpts: (opts: SamplingOpts) => void
setCompiledMainJsUrl: (url: string) => void
}

const RightView: FunctionComponent<RightViewProps> = ({ width, height, dataFileContent, saveDataFileContent, editedDataFileContent, setEditedDataFileContent, compiledMainJsUrl, samplingOpts, setSamplingOpts }) => {
const LeftView: FunctionComponent<LeftViewProps> = ({ width, height, setCompiledMainJsUrl }) => {
const { data, update } = useContext(SPAnalysisContext)
return (
<Splitter
direction="vertical"
width={width}
height={height}
initialPosition={height / 3}
initialPosition={2 * height / 3}
>
<DataFileEditor
<StanFileEditor
width={0}
height={0}
fileName="data.json"
fileContent={dataFileContent}
onSaveContent={saveDataFileContent}
editedFileContent={editedDataFileContent}
setEditedFileContent={setEditedDataFileContent}
fileName="main.stan"
fileContent={data.stanFileContent}
// this could be made more ergonomic?
onSaveContent={() => update({ type: 'commitFile', filename: SPAnalysisKnownFiles.STANFILE })}
editedFileContent={data.ephemera.stanFileContent}
setEditedFileContent={(content: string) => update({ type: 'editFile', content, filename: SPAnalysisKnownFiles.STANFILE })}
readOnly={false}
setCompiledUrl={setCompiledMainJsUrl}
/>
<LowerRightView
<DataFileEditor
width={0}
height={0}
compiledMainJsUrl={compiledMainJsUrl}
dataFileContent={dataFileContent}
dataIsSaved={dataFileContent === editedDataFileContent}
samplingOpts={samplingOpts}
setSamplingOpts={setSamplingOpts}
fileName="data.json"
fileContent={data.dataFileContent}
onSaveContent={() => update({ type: 'commitFile', filename: SPAnalysisKnownFiles.DATAFILE })}
editedFileContent={data.ephemera.dataFileContent}
setEditedFileContent={(content: string) => update({ type: 'editFile', content, filename: SPAnalysisKnownFiles.DATAFILE })}
readOnly={false}
/>
</Splitter>
)
}

type LowerRightViewProps = {
type RightViewProps = {
width: number
height: number
compiledMainJsUrl?: string
dataFileContent: string
dataIsSaved: boolean
samplingOpts: SamplingOpts
setSamplingOpts: (opts: SamplingOpts) => void
}

const LowerRightView: FunctionComponent<LowerRightViewProps> = ({ width, height, compiledMainJsUrl, dataFileContent, dataIsSaved, samplingOpts, setSamplingOpts }) => {
const RightView: FunctionComponent<RightViewProps> = ({ width, height, compiledMainJsUrl }) => {
const { data, update } = useContext(SPAnalysisContext)
const parsedData = useMemo(() => {
try {
return JSON.parse(dataFileContent)
return JSON.parse(data.dataFileContent)
}
catch (e) {
return undefined
}
}, [dataFileContent])
}, [data.dataFileContent])
const samplingOptsPanelHeight = 160
const samplingOptsPanelWidth = Math.min(180, width / 2)

const setSamplingOpts = useCallback((opts: SamplingOpts) => {
update({ type: 'setSamplingOpts', opts })
}, [update])

const { sampler } = useStanSampler(compiledMainJsUrl)
const { status: samplerStatus } = useSamplerStatus(sampler)
const isSampling = samplerStatus === 'sampling'
return (
<div style={{ position: 'absolute', width, height }}>
<div style={{ position: 'absolute', width: samplingOptsPanelWidth, height: samplingOptsPanelHeight }}>
<SamplingOptsPanel
samplingOpts={samplingOpts}
samplingOpts={data.samplingOpts}
setSamplingOpts={!isSampling ? setSamplingOpts : undefined}
/>
</div>
Expand All @@ -210,8 +192,8 @@ const LowerRightView: FunctionComponent<LowerRightViewProps> = ({ width, height,
height={samplingOptsPanelHeight}
sampler={sampler}
data={parsedData}
dataIsSaved={dataIsSaved}
samplingOpts={samplingOpts}
dataIsSaved={!modelHasUnsavedDataFileChanges(data)}
samplingOpts={data.samplingOpts}
/>
</div>
<div style={{ position: 'absolute', width, top: samplingOptsPanelHeight, height: height - samplingOptsPanelHeight }}>
Expand Down
6 changes: 1 addition & 5 deletions gui/src/app/pages/HomePage/LeftPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,7 @@ const LeftPanel: FunctionComponent<LeftPanelProps> = ({ width, height, hasUnsave
update({ type: 'clear' })
}}>Clear all</button>
</div>
<div>
<p>
This panel will have controls for loading/saving data from cloud
</p>
</div>
<div>&nbsp;</div>
<div>
<button
onClick={importOpen}
Expand Down

0 comments on commit 506b6e9

Please sign in to comment.