1- import * as React from 'react' ;
2- import Tabs from '@mui/material/Tabs' ;
3- import Tab from '@mui/material/Tab' ;
4- import Typography from '@mui/material/Typography' ;
5- import Box from '@mui/material/Box' ;
6- import WorkspaceContainer from "../workspace/WorkspaceContainer" ;
7- import HistoryContainer from '../../components/containers/HistoryContainer' ;
8- import AccessTimeIcon from '@mui/icons-material/AccessTime' ;
9- import WorkIcon from '@mui/icons-material/Work' ;
10-
11- interface TabPanelProps {
12- children ?: React . ReactNode ;
13- index : number ;
14- value : number ;
15- }
16-
17- function TabPanel ( props : TabPanelProps ) {
18- const { children, value, index, ...other } = props ;
19-
20- return (
21- < div
22- role = "tabpanel"
23- hidden = { value !== index }
24- id = { `simple-tabpanel-${ index } }
25- aria-labelledby = { `simple-tab-${ index } }
26- { ...other }
27- >
28- { value === index && (
29- < Box sx = { { p : 3 } } >
30- < Box > { children } </ Box >
31- </ Box >
32- ) }
33- </ div >
34- ) ;
35- }
36-
37- function a11yProps ( index : number ) {
38- return {
39- id : `simple-tab-${ index } ,
40- 'aria-controls' : `simple-tabpanel-${ index } ,
41- } ;
42- }
43-
44- export default function HistoryOrWorkspaceContainer ( ) {
45- const [ value , setValue ] = React . useState ( 0 ) ;
46-
47- const handleChange = ( event : React . SyntheticEvent , newValue : number ) => {
48- setValue ( newValue ) ;
49- } ;
50-
51- return (
52- < Box sx = { { minWidth : '25%' , overflow : 'auto' , maxHeight : '100%' , overflowX : 'auto' } } >
53- < Box sx = { { borderBottom : 1 , borderColor : 'divider' , } } >
54- < Tabs value = { value } onChange = { handleChange } aria-label = "basic tabs example" >
55- < Tab icon = { < WorkIcon /> } label = "Current Workspace" { ...a11yProps ( 0 ) } sx = { { fontSize :'10px' , overflowWrap : "break-word" , maxWidth : '50%' } } />
56- < Tab icon = { < AccessTimeIcon /> } label = 'View History' { ...a11yProps ( 1 ) } sx = { { fontSize :'10px' , overflowWrap : "break-word" , maxWidth : '50%' } } />
57- </ Tabs >
58- </ Box >
59- < TabPanel value = { value } index = { 0 } >
60- < WorkspaceContainer />
61- </ TabPanel >
62- < TabPanel value = { value } index = { 1 } >
63- < HistoryContainer />
64- </ TabPanel >
65- </ Box >
66- ) ;
67- }
1+ import * as React from 'react' ;
2+ import { useSelector , useDispatch } from 'react-redux' ;
3+ import Tabs from '@mui/material/Tabs' ;
4+ import Tab from '@mui/material/Tab' ;
5+ import Typography from '@mui/material/Typography' ;
6+ import Button from '@mui/material/Button' ;
7+ import Box from '@mui/material/Box' ;
8+ import BarGraph from '../../components/display/BarGraph' ;
9+ import ScheduleContainer from '../../components/containers/ScheduleContainer' ;
10+ import WorkspaceContainer from "../workspace/WorkspaceContainer" ;
11+ import HistoryContainer from '../../components/containers/HistoryContainer' ;
12+ import AccessTimeIcon from '@mui/icons-material/AccessTime' ;
13+ import WorkIcon from '@mui/icons-material/Work' ;
14+ import ScheduleSendRoundedIcon from '@mui/icons-material/ScheduleSendRounded' ;
15+
16+ interface TabPanelProps {
17+ children ?: React . ReactNode ;
18+ index : number ;
19+ value : number ;
20+ }
21+
22+ function TabPanel ( props : TabPanelProps ) {
23+ const { children, value, index, ...other } = props ;
24+
25+ return (
26+ < div
27+ role = "tabpanel"
28+ hidden = { value !== index }
29+ id = { `simple-tabpanel-${ index } }
30+ aria-labelledby = { `simple-tab-${ index } }
31+ { ...other }
32+ >
33+ { value === index && (
34+ < Box sx = { { p : 1 } } >
35+ < Box > { children } </ Box >
36+ </ Box >
37+ ) }
38+ </ div >
39+ ) ;
40+ }
41+
42+ function a11yProps ( index : number ) {
43+ return {
44+ id : `simple-tab-${ index } ,
45+ 'aria-controls' : `simple-tabpanel-${ index } ,
46+ } ;
47+ }
48+
49+ export default function HistoryOrWorkspaceContainer ( props ) {
50+ const [ showGraph , setShowGraph ] = React . useState ( false ) ;
51+ const [ value , setValue ] = React . useState ( 0 ) ;
52+
53+ const currentResponse = useSelector ( ( store : any ) => store . business . currentResponse ) ;
54+
55+ const handleChange = ( event : React . SyntheticEvent , newValue : number ) => {
56+ setValue ( newValue ) ;
57+ } ;
58+
59+ return (
60+ < Box sx = { { minWidth : '25%' , overflow : 'auto' , maxHeight : '100%' , overflowX : 'auto' , overflowY : 'scroll' } } >
61+ < Box sx = { { borderBottom : 1 , borderColor : 'divider' } } >
62+ < Tabs value = { value } onChange = { handleChange } aria-label = "basic tabs example" >
63+ < Tab icon = { < WorkIcon fontSize = 'small' /> } { ...a11yProps ( 0 ) } sx = { { fontSize :'10px' , overflowWrap : "break-word" , maxWidth : '50%' } } />
64+ < Tab icon = { < ScheduleSendRoundedIcon fontSize = 'small' /> } { ...a11yProps ( 1 ) } sx = { { fontSize :'10px' , overflowWrap : "break-word" , maxWidth : '50%' } } />
65+ < Tab icon = { < AccessTimeIcon fontSize = 'small' /> } { ...a11yProps ( 2 ) } sx = { { fontSize :'10px' , overflowWrap : "break-word" , maxWidth : '50%' } } />
66+ </ Tabs >
67+ </ Box >
68+ { value === 1 && ( < Box
69+ sx = { {
70+ display : 'flex' ,
71+ flexDirection : 'column' ,
72+ px : 1 ,
73+ py : 1
74+ } }
75+ >
76+ < Button
77+ className = { `is-flex is-align-items-center is-justify-content-center is-graph-footer is-clickable` }
78+ variant = 'outlined'
79+ onClick = { ( ) => setShowGraph ( showGraph === false ) }
80+ >
81+ { showGraph && 'Hide Response Metrics' }
82+ { ! showGraph && 'View Response Metrics' }
83+ </ Button >
84+ { ( showGraph && < Box sx = { {
85+ py : 1
86+ } } >
87+ < BarGraph />
88+ </ Box >
89+ ) }
90+ </ Box >
91+ ) }
92+ < TabPanel value = { value } index = { 0 } >
93+ < WorkspaceContainer { ...props } />
94+ </ TabPanel >
95+ < TabPanel value = { value } index = { 1 } >
96+ < ScheduleContainer />
97+ </ TabPanel >
98+ < TabPanel value = { value } index = { 2 } >
99+ < HistoryContainer />
100+ </ TabPanel >
101+ </ Box >
102+ ) ;
103+ }
0 commit comments