Commit 9d876019 authored by Mohammad Nakhaee's avatar Mohammad Nakhaee
Browse files

Make all the examples editable

parent ec209968
Pipeline #132610 passed with stages
in 35 minutes and 47 seconds
......@@ -1098,7 +1098,7 @@ export const SectionPlots = React.memo(function SectionPlots({section, sectionDe
const plot = sectionDef.m_annotations?.plot
const [selected, setSelected] = useState([0])
const plots = useMemo(() => {
let plots = (Array.isArray(plot) ? plot : [plot])
let plots = (Array.isArray(plot) ? [...plot] : [{...plot}])
plots.forEach(plot => {
if (!('label' in plot)) {
const pathParts = Array.isArray(plot.y) ? ['unnamed'] : plot.y.split('/')
......
......@@ -48,17 +48,15 @@ Example.propTypes = {
children: PropTypes.any
}
const customPlotInit = {
const examples = [{
a_plot: {
label: 'T_substrate',
x: 'process_time',
y: './substrate_temperature'
}
}
const examples = [{
}, {
a_plot: {
label: 'T_substrate',
label: 'Temperature',
x: 'process_time',
y: ['./set_substrate_temperature', './substrate_temperature']
}
......@@ -95,51 +93,38 @@ const examples = [{
export function PlotExamples() {
const [metainfo, setMetainfo] = useState()
const [customPlot, setCustomPlot] = useState(customPlotInit)
const [plots, setPlots] = useState(examples)
useEffect(() => {
createGlobalMetainfo(metainfoData).then(setMetainfo)
}, [customPlot])
}, [])
const sectionDef = useMemo(() => metainfo ? resolveRef('/packages/7/section_definitions/4', metainfo._data) : undefined, [metainfo]) // Path for PVDEvaporation
const exampleSectionDefs = useMemo(() => examples.map(example => ({...sectionDef, m_annotations: {plot: example.a_plot}})), [sectionDef])
const customSectionDef = useMemo(() => ({...sectionDef, m_annotations: {plot: customPlot.a_plot}}), [customPlot, sectionDef])
const exampleSectionDefs = useMemo(() => plots.map(example => ({...sectionDef, m_annotations: {plot: example.a_plot}})), [plots, sectionDef])
const handleJsonChange = useCallback((data) => {
setCustomPlot(data)
}, [])
const handleJsonChange = useCallback((data, index) => {
let newPlots = [...plots]
newPlots[index] = data
setPlots(newPlots)
}, [plots])
return <Box margin={3}>
return exampleSectionDefs.map((def, index) => (
<Box key={index} display='flex' marginTop={3} width={'100%'} >
<Box width={'50%'} marginLeft={6} marginRight={6}>
<Card>
<CardContent>
<Box>
<Grid container direction="column" spacing={1}>
{exampleSectionDefs.map((def, index) => (
<Grid item key={index}>
<Example code={JSON.stringify(examples[index], null, 2)}>
<SectionPlots sectionDef={def} section={section} />
</Example>
</Grid>
))}
<Grid item>
<SectionPlots sectionDef={def} section={section}/>
</Grid>
</Box>
</CardContent>
</Card>
<Card style={{marginTop: 10}}>
<CardContent>
<Box>
<Grid container direction="row" spacing={1}>
<Grid item>
<Box width={600}>
<JsonEditor data={customPlot} onChange={handleJsonChange} />
</Box>
</Grid>
<Grid item>
<SectionPlots sectionDef={customSectionDef} section={section}/>
</Grid>
</Grid>
<Box width={'50%'} marginLeft={6} marginRight={6}>
<JsonEditor
data={plots[index]}
onChange={data => handleJsonChange(data, index)}
/>
</Box>
</CardContent>
</Card>
</Box>
))
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment