connect timeline component

bldrs-ai · Oct 8, 2023 · d9595df · d9595df
1 parent 61f2aac
commit d9595df
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/src/Components/ControlsGroup.jsx b/src/Components/ControlsGroup.jsx
@@ -3,7 +3,7 @@ import ButtonGroup from '@mui/material/ButtonGroup'
 import OpenModelControl from './OpenModelControl'
 import useStore from '../store/useStore'
 import {TooltipIconButton} from './Buttons'
-// import HistoryIcon from '@mui/icons-material/History'
+import HistoryIcon from '@mui/icons-material/History'
 import SearchIcon from '@mui/icons-material/Search'
 import TreeIcon from '../assets/icons/Tree.svg'
 
@@ -16,10 +16,13 @@ import TreeIcon from '../assets/icons/Tree.svg'
  * @return {React.Component}
  */
 export default function OperationsGroup({fileOpen}) {
-  const toggleIsNavigationVisible = useStore((state) => state.toggleIsNavigationVisible)
   const isNavigationVisible = useStore((state) => state.isNavigationVisible)
-  const toggleIsSearchVisible = useStore((state) => state.toggleIsSearchVisible)
+  const toggleIsNavigationVisible = useStore((state) => state.toggleIsNavigationVisible)
   const isSearchVisible = useStore((state) => state.isSearchVisible)
+  const toggleIsSearchVisible = useStore((state) => state.toggleIsSearchVisible)
+  const isVersionHistoryVisible = useStore((state) => state.isVersionHistoryVisible)
+  const toggleIsVersionHistoryVisible = useStore((state) => state.toggleIsVersionHistoryVisible)
+
 
   return (
     <ButtonGroup
@@ -43,13 +46,13 @@ export default function OperationsGroup({fileOpen}) {
         selected={isNavigationVisible}
         onClick={toggleIsNavigationVisible}
       />
-      {/* <TooltipIconButton
+      <TooltipIconButton
         title='Project History'
         icon={<HistoryIcon className='icon-share' color='secondary'/>}
         placement='bottom'
-        selected={false}
-        onClick={toggleIsNavigationVisible}
-      /> */}
+        selected={isVersionHistoryVisible}
+        onClick={toggleIsVersionHistoryVisible}
+      />
     </ButtonGroup>
   )
 }
diff --git a/src/Components/NavPanel.jsx b/src/Components/NavPanel.jsx
@@ -1,7 +1,10 @@
 import React from 'react'
 import AccountTreeIcon from '@mui/icons-material/AccountTree'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
 import ListIcon from '@mui/icons-material/List'
 import Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import Tooltip from '@mui/material/Tooltip'
@@ -15,7 +18,7 @@ import {assertDefined} from '../utils/assert'
 import {useExistInFeature} from '../hooks/useExistInFeature'
 import NodeClosedIcon from '../assets/icons/NodeClosed.svg'
 import NodeOpenIcon from '../assets/icons/NodeOpened.svg'
-import {Typography} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
 
 
 /**
@@ -49,6 +52,7 @@ export default function NavPanel({
   // nodes besides hardcoding.
 
   const elementTypesMap = useStore((state) => state.elementTypesMap)
+  const toggleIsNavigationVisible = useStore((state) => state.toggleIsVersionHistoryVisible)
 
   const existNavTypesInFeature = useExistInFeature('navtypes')
 
@@ -106,12 +110,6 @@ export default function NavPanel({
         }}
       >
         <div>
-          <Typography
-            variant='overline'
-            sx={{marginLeft: '10px'}}
-          >
-            Project Navigation
-          </Typography>
           {existNavTypesInFeature &&
           <StyledToggleButtonGroup
             exclusive
@@ -154,7 +152,18 @@ export default function NavPanel({
               </Tooltip>
             </ToggleButton>
           </StyledToggleButtonGroup>}
-          <Typography variant='overline' sx={{marginLeft: '1em'}}>Spatial Navigation</Typography>
+          <Stack
+            direction='row'
+            justifyContent='space-between'
+            alignItems='center'
+          >
+            <Typography variant='overline' sx={{marginLeft: '1em'}}>Spatial Navigation</Typography>
+            <Box sx={{marginRight: '.5em'}}>
+              <IconButton aria-label="delete" size="small" onClick={toggleIsNavigationVisible}>
+                <CloseIcon fontSize="inherit"/>
+              </IconButton>
+            </Box>
+          </Stack>
           <TreeView
             aria-label={isNavTree ? 'IFC Navigator' : 'IFC Types Navigator'}
             defaultCollapseIcon={<NodeOpenIcon className='icon-share icon-nav-caret'/>}

diff --git a/src/Components/Timeline.jsx b/src/Components/Timeline.jsx
@@ -29,6 +29,7 @@ export default function VersionsTimeline({versionHistory, branch}) {
   const [commitData, setCommitData] = useState([])
   const accessToken = useStore((state) => state.accessToken)
   const repository = useStore((state) => state.repository)
+  const toggleIsVersionHistoryVisible = useStore((state) => state.toggleIsVersionHistoryVisible)
 
   useEffect(() => {
     const fetchCommits = async () => {
@@ -49,20 +50,22 @@ export default function VersionsTimeline({versionHistory, branch}) {
   // console.log('commitData', commitData)
   return (
     <Paper
+      variant='control'
       sx={{
         overflowY: 'scroll',
         height: '200px',
         marginTop: '14px',
+        width: '100%',
       }}
     >
       <Stack
         direction='row'
         justifyContent='space-between'
         alignItems='center'
       >
-        <Typography variant='overline' sx={{marginLeft: '10px'}}>Version History</Typography>
-        <Box>
-          <IconButton aria-label="delete" size="small">
+        <Typography variant='overline' sx={{marginLeft: '1em'}}>Version History</Typography>
+        <Box sx={{marginRight: '.5em'}}>
+          <IconButton aria-label="delete" size="small" onClick={toggleIsVersionHistoryVisible}>
             <CloseIcon fontSize="inherit"/>
           </IconButton>
         </Box>

diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -123,6 +123,7 @@ export default function CadView({
   const isNavigationPanelVisible = useStore((state) => state.isNavigationPanelVisible)
   const isSearchVisible = useStore((state) => state.isSearchVisible)
   const isNavigationVisible = useStore((state) => state.isNavigationVisible)
+  const isVersionHistoryVisible = useStore((state) => state.isVersionHistoryVisible)
 
 
   // Place Mark
@@ -674,13 +675,6 @@ export default function CadView({
             <SearchBar fileOpen={() => loadLocalFile(navigate, appPrefix, handleBeforeUnload)}/>
           </Box>
           }
-          {
-            modelPath.repo !== undefined &&
-            <>
-              <BranchesControl location={location}/>
-              <Timeline versionHistory={versions} branch={modelPath.branch}/>
-            </>
-          }
           {isNavPanelOpen &&
             isNavigationPanelVisible &&
             isNavigationVisible &&
@@ -701,6 +695,13 @@ export default function CadView({
               }
             />
           }
+          {
+            modelPath.repo !== undefined && isVersionHistoryVisible &&
+            <>
+              <BranchesControl location={location}/>
+              <Timeline versionHistory={versions} branch={modelPath.branch}/>
+            </>
+          }
         </Box>
       )}
       <Logo onClick={() => navToDefault(navigate, appPrefix)}/>

diff --git a/src/store/UISlice.js b/src/store/UISlice.js
@@ -16,6 +16,7 @@ export default function createUISlice(set, get) {
     isNavPanelOpen: true,
     isNavigationVisible: false,
     isSearchVisible: false,
+    isVersionHistoryVisible: false,
     isOpenControlHighlighted: true,
     isPropertiesOn: false,
     snackMessage: null,
@@ -62,6 +63,7 @@ export default function createUISlice(set, get) {
     setSidebarHeight: (newSidebarHeight) => set(() => ({sidebarHeight: newSidebarHeight})),
     setDrawer: (newDrawer) => set(() => ({drawer: newDrawer})),
     toggleAppStoreDrawer: () => set((state) => ({isAppStoreOpen: !state.isAppStoreOpen})),
+    toggleIsVersionHistoryVisible: () => set((state) => ({isVersionHistoryVisible: !state.isVersionHistoryVisible})),
     toggleIsNavigationVisible: () => set((state) => ({isNavigationVisible: !state.isNavigationVisible})),
     toggleIsSearchVisible: () => set((state) => ({isSearchVisible: !state.isSearchVisible})),
     setAppStoreSidebarWidth: (newSidebarWidth) => set(() => ({appStoreSidebarWidth: newSidebarWidth})),