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 ...@@ -1098,7 +1098,7 @@ export const SectionPlots = React.memo(function SectionPlots({section, sectionDe
const plot = sectionDef.m_annotations?.plot const plot = sectionDef.m_annotations?.plot
const [selected, setSelected] = useState([0]) const [selected, setSelected] = useState([0])
const plots = useMemo(() => { const plots = useMemo(() => {
let plots = (Array.isArray(plot) ? plot : [plot]) let plots = (Array.isArray(plot) ? [...plot] : [{...plot}])
plots.forEach(plot => { plots.forEach(plot => {
if (!('label' in plot)) { if (!('label' in plot)) {
const pathParts = Array.isArray(plot.y) ? ['unnamed'] : plot.y.split('/') const pathParts = Array.isArray(plot.y) ? ['unnamed'] : plot.y.split('/')
......
...@@ -48,17 +48,15 @@ Example.propTypes = { ...@@ -48,17 +48,15 @@ Example.propTypes = {
children: PropTypes.any children: PropTypes.any
} }
const customPlotInit = { const examples = [{
a_plot: { a_plot: {
label: 'T_substrate', label: 'T_substrate',
x: 'process_time', x: 'process_time',
y: './substrate_temperature' y: './substrate_temperature'
} }
} }, {
const examples = [{
a_plot: { a_plot: {
label: 'T_substrate', label: 'Temperature',
x: 'process_time', x: 'process_time',
y: ['./set_substrate_temperature', './substrate_temperature'] y: ['./set_substrate_temperature', './substrate_temperature']
} }
...@@ -95,51 +93,38 @@ const examples = [{ ...@@ -95,51 +93,38 @@ const examples = [{
export function PlotExamples() { export function PlotExamples() {
const [metainfo, setMetainfo] = useState() const [metainfo, setMetainfo] = useState()
const [customPlot, setCustomPlot] = useState(customPlotInit) const [plots, setPlots] = useState(examples)
useEffect(() => { useEffect(() => {
createGlobalMetainfo(metainfoData).then(setMetainfo) createGlobalMetainfo(metainfoData).then(setMetainfo)
}, [customPlot]) }, [])
const sectionDef = useMemo(() => metainfo ? resolveRef('/packages/7/section_definitions/4', metainfo._data) : undefined, [metainfo]) // Path for PVDEvaporation 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 exampleSectionDefs = useMemo(() => plots.map(example => ({...sectionDef, m_annotations: {plot: example.a_plot}})), [plots, sectionDef])
const customSectionDef = useMemo(() => ({...sectionDef, m_annotations: {plot: customPlot.a_plot}}), [customPlot, sectionDef])
const handleJsonChange = useCallback((data) => { const handleJsonChange = useCallback((data, index) => {
setCustomPlot(data) let newPlots = [...plots]
}, []) newPlots[index] = data
setPlots(newPlots)
}, [plots])
return <Box margin={3}> return exampleSectionDefs.map((def, index) => (
<Card> <Box key={index} display='flex' marginTop={3} width={'100%'} >
<CardContent> <Box width={'50%'} marginLeft={6} marginRight={6}>
<Box> <Card>
<Grid container direction="column" spacing={1}> <CardContent>
{exampleSectionDefs.map((def, index) => (
<Grid item key={index}>
<Example code={JSON.stringify(examples[index], null, 2)}>
<SectionPlots sectionDef={def} section={section} />
</Example>
</Grid>
))}
</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> <Grid item>
<SectionPlots sectionDef={customSectionDef} section={section}/> <SectionPlots sectionDef={def} section={section}/>
</Grid> </Grid>
</Grid> </CardContent>
</Box> </Card>
</CardContent> </Box>
</Card> <Box width={'50%'} marginLeft={6} marginRight={6}>
</Box> <JsonEditor
data={plots[index]}
onChange={data => handleJsonChange(data, index)}
/>
</Box>
</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