Skip to content
Snippets Groups Projects
Commit 3db3c0e0 authored by Eskild Hein Trøen's avatar Eskild Hein Trøen
Browse files

Merge branch 'layout-better-organized-resultview' into 'dev'

Organize layout in ResultView better

See merge request erlenyd/mysql-query-profiler!52
parents ecca3af9 478782f8
Branches
Tags
No related merge requests found
...@@ -26,7 +26,6 @@ const useStyles = makeStyles((theme) => ({ ...@@ -26,7 +26,6 @@ const useStyles = makeStyles((theme) => ({
display: 'flex', display: 'flex',
flexFlow: 'column nowrap', flexFlow: 'column nowrap',
flexGrow: 1, flexGrow: 1,
width: '600px',
}, },
result: { result: {
userSelect: 'none', userSelect: 'none',
......
...@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
column: { column: {
display: 'flex', display: 'flex',
flexFlow: 'column nowrap', flexFlow: 'column nowrap',
maxHeight: '100vh', maxHeight: '98vh',
height: '100%', height: '100%',
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
width: '100%', width: '100%',
......
/* eslint-disable react/jsx-wrap-multilines */ /* eslint-disable react/jsx-wrap-multilines */
import { makeStyles, Checkbox, FormControlLabel } from '@material-ui/core'; import {
makeStyles,
Checkbox,
FormControlLabel,
Paper,
} from '@material-ui/core';
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import MemoryChart from '../components/MemoryChart'; import MemoryChart from '../components/MemoryChart';
import OptimizerTrace from '../components/OptimizerTrace'; import OptimizerTrace from '../components/OptimizerTrace';
...@@ -13,13 +18,18 @@ const useStyles = makeStyles((theme) => ({ ...@@ -13,13 +18,18 @@ const useStyles = makeStyles((theme) => ({
flexFlow: 'column nowrap', flexFlow: 'column nowrap',
alignContent: 'center', alignContent: 'center',
}, },
item: {
margin: `${theme.spacing(1)}px ${theme.spacing(0)}`,
},
})); }));
export default function ResultView() { export default function ResultView() {
const [showMemoryChart, setShowMemoryChart] = useState(true); const [showMemoryChart, setShowMemoryChart] = useState(true);
const [showOptimizerTrace, setShowOptimizerTrace] = useState(true); const [showOptimizerTrace, setShowOptimizerTrace] = useState(false);
const [showResultTable, setShowResultTable] = useState(true); const [showResultTable, setShowResultTable] = useState(false);
const [showExplainAnalyze, setShowExplainAnalyze] = useState(true); const [showExplainAnalyze, setShowExplainAnalyze] = useState(false);
const recordingContext = useContext(RecordingContext);
const classes = useStyles(); const classes = useStyles();
...@@ -27,32 +37,32 @@ export default function ResultView() { ...@@ -27,32 +37,32 @@ export default function ResultView() {
<div className={classes.wrapper} style={{ minWidth: '200px' }}> <div className={classes.wrapper} style={{ minWidth: '200px' }}>
<div> <div>
<FormControlLabel <FormControlLabel
label="Show memory chart" label="Show result table"
control={ control={
<Checkbox <Checkbox
color="primary" color="primary"
checked={showMemoryChart} checked={showResultTable}
onChange={(event) => setShowMemoryChart(event.target.checked)} onChange={(event) => setShowResultTable(event.target.checked)}
/> />
} }
/> />
<FormControlLabel <FormControlLabel
label="Show optimizer trace" label="Show memory chart"
control={ control={
<Checkbox <Checkbox
color="primary" color="primary"
checked={showOptimizerTrace} checked={showMemoryChart}
onChange={(event) => setShowOptimizerTrace(event.target.checked)} onChange={(event) => setShowMemoryChart(event.target.checked)}
/> />
} }
/> />
<FormControlLabel <FormControlLabel
label="Show result table" label="Show optimizer trace"
control={ control={
<Checkbox <Checkbox
color="primary" color="primary"
checked={showResultTable} checked={showOptimizerTrace}
onChange={(event) => setShowResultTable(event.target.checked)} onChange={(event) => setShowOptimizerTrace(event.target.checked)}
/> />
} }
/> />
...@@ -67,11 +77,29 @@ export default function ResultView() { ...@@ -67,11 +77,29 @@ export default function ResultView() {
} }
/> />
</div> </div>
{showResultTable && (
{showMemoryChart && <MemoryChart />} <Paper className={classes.item}>
{showOptimizerTrace && <OptimizerTrace />} <ResultTable />
{showResultTable && <ResultTable />} </Paper>
{showExplainAnalyze && <TreeViewExplainAnalyze />} )}
{showMemoryChart && (
<Paper
className={classes.item}
style={{ paddingBottom: 80, paddingTop: 8 }}
>
<MemoryChart />
</Paper>
)}
{showOptimizerTrace && recordingContext?.optimizerTrace && (
<Paper className={classes.item} style={{ padding: 8 }}>
<OptimizerTrace />
</Paper>
)}
{showExplainAnalyze && (
<Paper className={classes.item}>
<TreeViewExplainAnalyze />
</Paper>
)}
</div> </div>
); );
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment