Tab change bug, DataView show/hide, bold titles (#255)

amosproj · Jun 11, 2024 · 787d543 · 787d543
2 parents 5212fc5 + 6d35f0e
commit 787d543
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 33 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,24 +1,85 @@
 .app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100svh;
-  max-height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%; 
+  height: 100%;
+  overflow: hidden;
 }
 
 .content-container {
   display: flex;
-  flex-direction: row;
-  height: 100vh;
-  padding: 1rem 2rem 1rem 2rem;
-  gap: 1rem;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+
+.multi-map {
+  position: relative;
+  width: 50%;
+  transition: width 0.5s; 
+  padding-top: 10px;
+  padding-left: 0px;
+  padding-bottom: 10px;
+}
+
+.data-view {
+  width: 50%;
+  position: relative;
+  transition: width 0.5s; 
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right:10px;
+}
+
+.hidden {
+  width: 0; 
+  overflow: hidden;
+  padding: 0px;
+}
+
+.full-width {
+  width: 100%;
 }
 
-.toggle-work {
+.multimap-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
 }
 
-.secondary-text {
-  color: rgb(40, 40, 40);
-  font-size: 0.9rem;
+.toggle-button {
+  position: absolute;
+  z-index: 5;
+  top: 13px; 
+  right: 0px; 
+  align-self: end; 
+  padding: 0;
+  padding-top:3px;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  width: 2rem;
+  height: 2rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: white;
+  border-color: gray;
+  color: gray;
+  border-right: 0;
 }
+
+.toggle-button:hover {
+  background-color: rgb(245, 245, 245);
+  border-color: black;
+  color: black;
+}
+
+.toggle-button:focus {
+  color: black;
+  border-color: black;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,23 +6,56 @@ import "./App.css";
 
 import DataView from "./components/DataView/DataView";
 import MultiMap from "./components/MultiMap/MultiMap";
-import { Fragment, useContext } from "react";
+import { Fragment, useContext, useState } from "react";
 import { TabsContext } from "./contexts/TabsContext";
 import MainMenu from "./components/MainMenu/MainMenu";
 import ErrorAlert from "./components/Alerts/ErrorAlert";
 
+import Tooltip from '@mui/material/Tooltip';
+import { CaretDoubleLeft, CaretDoubleRight } from "@phosphor-icons/react";
+
+import { MapContext } from "./contexts/MapContext";
+
 function App() {
+
+  const { currentMapCache } = useContext(MapContext);
+
   const { currentTabsCache } = useContext(TabsContext);
 
+  const [dataViewVisible, setDataViewVisible] = useState(true);
+
+  const toggleDataView = () => {
+    setDataViewVisible((prevVisible) => !prevVisible);
+    const { mapInstance } = currentMapCache;
+    setTimeout(function(){ mapInstance?.invalidateSize()}, 400);
+  };
+
   return (
     <div className="app-container">
       {currentTabsCache.openedTabs.length === 0 ? (
         <MainMenu />
       ) : (
         <Fragment>
           <div className="content-container">
+          <div className={`multi-map ${!dataViewVisible ? "full-width" : ""}`}>
+          <div className="multimap-container">
+
+          <Tooltip title={dataViewVisible ? "Hide Data View" : "Show Data View"} arrow>
+                  <button onClick={toggleDataView} className="toggle-button">
+                    {dataViewVisible ? (
+                      <CaretDoubleRight/>
+                    ) : (
+                      <CaretDoubleLeft />
+                    )}
+                  </button>
+                </Tooltip>
+
             <MultiMap />
+            </div>
+            </div>
+            <div className={`data-view ${!dataViewVisible ? "hidden" : ""}`}>
             <DataView />
+            </div>
           </div>
         </Fragment>
       )}

diff --git a/frontend/src/components/DataView/DataPanel.css b/frontend/src/components/DataView/DataPanel.css
@@ -19,6 +19,7 @@
   gap: 0.5rem;
   align-items: center;
   cursor: pointer;
+  font-weight: bold;
 }
 
 .data-panel-grid {

diff --git a/frontend/src/components/DataView/DataView.css b/frontend/src/components/DataView/DataView.css
@@ -1,5 +1,5 @@
 .dataview-container {
-  width: 50%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   height: 100%;

diff --git a/frontend/src/components/MultiMap/MultiMap.css b/frontend/src/components/MultiMap/MultiMap.css
@@ -1,9 +1,12 @@
 .multimap-container {
   height: 100%;
-  width: 50%;
-  max-width: 50%;
+  width: 100%;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
+  padding-left:20px;
+  padding-right:10px;
+  padding-top: 3px;
 }
 
 .tab-list-container {
@@ -85,6 +88,7 @@
   min-height: 2rem;
   width: 2rem;
   height: 2rem;
+  margin-right: 2rem;
 }
 
 .add-tab-button:hover {
@@ -109,6 +113,10 @@
   padding: 1.1rem 1rem 0.8rem 1rem !important;
 }
 
+.MuiTab-root:focus {
+  outline: none;
+}
+
 .MuiTab-root + .MuiTab-root {
   border-left: none !important;
 }

diff --git a/frontend/src/components/MultiMap/MultiMap.tsx b/frontend/src/components/MultiMap/MultiMap.tsx
@@ -18,17 +18,24 @@ const MultiMap = () => {
   // Dropdown menu for the tab options
   const [anchorElementTabOptions, setAnchorElementTabOptions] =
     useState<null | HTMLElement>(null);
+
   const handleMenuClick = (
-    event: React.MouseEvent<SVGSVGElement, MouseEvent>
+    event: React.MouseEvent<SVGSVGElement, MouseEvent>,   tabId: string
   ) => {
+    event.stopPropagation();
     setAnchorElementTabOptions(event.currentTarget as unknown as HTMLElement);
+    setSelectedTabId(tabId);
   };
+
   const handleMenuClose = () => {
     setAnchorElementTabOptions(null);
+    setSelectedTabId(null);
   };
 
+  const [selectedTabId, setSelectedTabId] = useState<string | null>(null);
+
   // Handles the change of the current tab id
-  const handleChange = (_event: React.SyntheticEvent, newTabID: string) => {
+  const handleChange = (newTabID: string) => {
     setCurrentTabsCache({ ...currentTabsCache, currentTabID: newTabID });
   };
 
@@ -39,11 +46,11 @@ const MultiMap = () => {
           <TabList
             variant="scrollable"
             scrollButtons="auto"
-            onChange={handleChange}
             aria-label="lab API multimap tabs"
             selectionFollowsFocus
           >
             {currentTabsCache.openedTabs.map((tab) => {
+              const isMenuOpen = anchorElementTabOptions && tab.id === selectedTabId;
               return (
                 <Tab
                   label={
@@ -53,16 +60,15 @@ const MultiMap = () => {
                         <span>{tab.dataset.displayName}</span>
                       </div>
                       <div className="tab-icons-container">
-                        {tab.ifPinned && !anchorElementTabOptions ? (
+                        {tab.ifPinned && !isMenuOpen ? (
                           <PushPinSimple
                             weight="fill"
                             className="pinned-tab-icon"
                           />
                         ) : (
                           <Fragment />
                         )}
-                        {anchorElementTabOptions &&
-                        tab.id === currentTabsCache.currentTabID ? (
+                        {isMenuOpen ? (
                           <DotsThreeOutline
                             weight="fill"
                             className="options-tab-icon-inverted"
@@ -71,11 +77,14 @@ const MultiMap = () => {
                           <Fragment />
                         )}
                         <Tooltip title="Tab Options" arrow>
-                          <DotsThreeOutline
+                          <span><DotsThreeOutline
                             weight="fill"
-                            className="options-tab-icon"
-                            onClick={handleMenuClick}
-                          />
+                            className={`options-tab-icon ${isMenuOpen ? 'options-tab-icon-inverted' : ''}`}
+                            onClick={(event) => {
+                                handleMenuClick(event, tab.id);
+                              }
+                            }
+                          /></span>
                         </Tooltip>
                       </div>
                     </div>
@@ -84,6 +93,7 @@ const MultiMap = () => {
                   key={tab.id}
                   disableRipple
                   disableFocusRipple
+                  onClick={() => handleChange(tab.id)} 
                 ></Tab>
               );
             })}
@@ -104,7 +114,7 @@ const MultiMap = () => {
         anchorElementTabOptions={anchorElementTabOptions}
         handleClose={handleMenuClose}
         currentTab={currentTabsCache.openedTabs.find(
-          (tab) => tab.id === currentTabsCache.currentTabID
+          (tab) => tab.id === selectedTabId
         )}
       />
     </div>

diff --git a/frontend/src/components/MultiMap/TabOptions.tsx b/frontend/src/components/MultiMap/TabOptions.tsx
@@ -21,14 +21,16 @@ const TabOptions: React.FC<TabOptionsProps> = ({
   // Tab Info Popup
   // Stores the state of if the search popup is open
   const [ifOpenedDialog, setIfOpenedDialog] = useState(false);
+
   const toggleIfOpenedDialog = () => {
-    if (!ifOpenedDialog) {
+    if (ifOpenedDialog === true) {
       // Handle the closing of the menu
       handleClose();
-    }
+   }
     setIfOpenedDialog(!ifOpenedDialog);
   };
 
+
   // Access the tabs context
   const { currentTabsCache, setCurrentTabsCache } = useContext(TabsContext);
   // Alert
@@ -108,15 +110,18 @@ const TabOptions: React.FC<TabOptionsProps> = ({
           >
             <MenuItem
               className="tab-options-item-container"
-              onClick={toggleIfOpenedDialog}
+              onClick={() => {
+                toggleIfOpenedDialog();
+              }
+              }
             >
               <Info size={18} />
               Info
             </MenuItem>
             <MenuItem
               className="tab-options-item-container"
               onClick={() => {
-                toggleTabPinned(currentTabsCache.currentTabID);
+                toggleTabPinned(currentTab.id);
               }}
             >
               {currentTab.ifPinned ? (
@@ -133,7 +138,7 @@ const TabOptions: React.FC<TabOptionsProps> = ({
             <MenuItem
               className="tab-options-item-container"
               onClick={() => {
-                closeTab(currentTabsCache.currentTabID);
+                closeTab(currentTab.id);
               }}
             >
               <X size={18} />