Merge pull request #63 from yeri918/main-jp

yeri918 · Oct 1, 2024 · 8b4910f · 8b4910f
2 parents fa22977 + 2ed6504
commit 8b4910f
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 76 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -7,6 +7,7 @@ import {
   IconButton,
   ThemeProvider,
   createTheme,
+  Tooltip,
 } from "@mui/material";
 import "react-tabs/style/react-tabs.css";
 import "./App.css";
@@ -137,8 +138,8 @@ function App() {
     const tableName = `table${newIndex + 1}`;
 
     // Reset the input value to allow getting the same file
-    event.target.value = '';    
-    
+    event.target.value = "";
+
     // Only action if file exists
     if (file && file.name.endsWith(".csv")) {
       loadCSVFile(file).then(async (data) => {
@@ -219,33 +220,43 @@ function App() {
         onChange={handleChange}
         aria-label="basic tabs example"
       >
-        <IconButton
-          onClick={onClickAddTab}
-          aria-label="add tab"
-          style={{
-            height: "40px",
-            outline: "none",
-            marginTop: "5px",
-          }}
-        >
-          <AddIcon style={{ color: darkMode ? "white" : "gray" }} />
-        </IconButton>
+        <Tooltip title="Import an Excel or CSV file" arrow>
+          <IconButton
+            onClick={onClickAddTab}
+            aria-label="add tab"
+            style={{
+              height: "40px",
+              outline: "none",
+              marginTop: "5px",
+            }}
+          >
+            <AddIcon style={{ color: darkMode ? "white" : "gray" }} />
+          </IconButton>
+        </Tooltip>
         {tabData.map((tab, index) => (
           <Tab
             key={index}
             style={{ outline: "none" }}
             label={
               <div>
                 {tab.label}
-                <IconButton
-                  size="small"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleCloseTab(index);
-                  }}
-                >
-                  <CloseIcon fontSize="small" />
-                </IconButton>
+                <Tooltip title="Close tab" arrow>
+                  <IconButton
+                    style={{
+                      color: darkMode ? "white" : "gray",
+                      outline: "none",
+                      borderRadius: "50%",
+                      padding: "0px",
+                      marginLeft: "10px",
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleCloseTab(index);
+                    }}
+                  >
+                    <CloseIcon style={{ fontSize: "20px" }} />
+                  </IconButton>
+                </Tooltip>
               </div>
             }
             {...a11yProps(index)}

diff --git a/app/src/components/grid/stdGrid.tsx b/app/src/components/grid/stdGrid.tsx
@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { Grid2, Button } from "@mui/material";
+import { Grid2, Button, Tooltip } from "@mui/material";
 
 // grid Folder
 import {
@@ -237,14 +237,11 @@ const StdAgGrid: React.FC<StdAgGridProps> = (props) => {
             customProps: CountStatusBarComponentType<any, any>,
             tableName: string,
           ) => (
-            console.log("pjulie check", props.tableName),
-            (
-              <CustomCountBar
-                context={undefined}
-                {...customProps}
-                tableName={props.tableName}
-              />
-            )
+            <CustomCountBar
+              context={undefined}
+              {...customProps}
+              tableName={props.tableName}
+            />
           ),
         },
         {
@@ -311,7 +308,7 @@ const StdAgGrid: React.FC<StdAgGridProps> = (props) => {
 
       if (params.rowNode) {
         return params.rowNode.id
-          ? (openGroups?.includes(params.rowNode.id) ?? false) // Only return true if not undefined and is in openGroups
+          ? openGroups?.includes(params.rowNode.id) ?? false // Only return true if not undefined and is in openGroups
           : false;
       } else {
         return false;
@@ -411,54 +408,62 @@ const StdAgGrid: React.FC<StdAgGridProps> = (props) => {
           */}
           <Grid2 container justifyContent="flex-start" spacing={2}>
             <Grid2>
-              <Button
-                style={{ outline: "none" }}
-                variant="contained"
-                onClick={resetTable}
-              >
-                Reset Table
-              </Button>
+              <Tooltip title="Removes the row groups and filters.">
+                <Button
+                  style={{ outline: "none" }}
+                  variant="contained"
+                  onClick={resetTable}
+                >
+                  Reset Table
+                </Button>
+              </Tooltip>
             </Grid2>
             <Grid2>
-              <Button
-                style={{ outline: "none" }}
-                variant="contained"
-                onClick={autoSizeColumns}
-              >
-                Autosize Columns
-              </Button>
+              <Tooltip title="Autosizes the columns.">
+                <Button
+                  style={{ outline: "none" }}
+                  variant="contained"
+                  onClick={autoSizeColumns}
+                >
+                  Autosize Columns
+                </Button>
+              </Tooltip>
             </Grid2>
             <Grid2>
-              <Button
-                style={{ outline: "none" }}
-                variant="contained"
-                onClick={() => saveState(gridApi, props.tableName, "manual")}
-              >
-                M+
-              </Button>
+              <Tooltip title="Saves the current view with row groups and filters.">
+                <Button
+                  style={{ outline: "none" }}
+                  variant="contained"
+                  onClick={() => saveState(gridApi, props.tableName, "manual")}
+                >
+                  Save View
+                </Button>
+              </Tooltip>
             </Grid2>
             <Grid2>
-              <Button
-                style={{ outline: "none" }}
-                variant="contained"
-                onClick={() => {
-                  // Might need to refactor too.
-                  applySavedState(gridApi, props.tableName, "manual");
-                  fetchPreviousState(props.tableName, "manual").then(
-                    (result: any) => {
-                      console.log("leudom result", result);
-                      const gridState = JSON.parse(result[0].state);
-                      if (gridState) {
-                        setOpenGroups(
-                          gridState.rowGroupExpansion?.expandedRowGroupIds,
-                        );
-                      }
-                    },
-                  );
-                }}
-              >
-                MR
-              </Button>
+              <Tooltip title="Retrieve the saved view.">
+                <Button
+                  style={{ outline: "none" }}
+                  variant="contained"
+                  onClick={() => {
+                    // Might need to refactor too.
+                    applySavedState(gridApi, props.tableName, "manual");
+                    fetchPreviousState(props.tableName, "manual").then(
+                      (result: any) => {
+                        console.log("leudom result", result);
+                        const gridState = JSON.parse(result[0].state);
+                        if (gridState) {
+                          setOpenGroups(
+                            gridState.rowGroupExpansion?.expandedRowGroupIds,
+                          );
+                        }
+                      },
+                    );
+                  }}
+                >
+                  Retrieve View
+                </Button>
+              </Tooltip>
             </Grid2>
           </Grid2>
         </Grid2>
@@ -492,8 +497,8 @@ const StdAgGrid: React.FC<StdAgGridProps> = (props) => {
                 ? "ag-theme-alpine-dark"
                 : "ag-theme-alpine"
               : props.darkMode
-                ? "ag-theme-alpine-dark"
-                : "ag-theme-alpine"
+              ? "ag-theme-alpine-dark"
+              : "ag-theme-alpine"
           }
         >
           <AgGridReact