UI update to save callbacks table column widths

its-a-feature · Oct 16, 2024 · f7cd34d · f7cd34d
1 parent db37b43
commit f7cd34d
Show file tree

Hide file tree

Showing 13 changed files with 196 additions and 494 deletions.
diff --git a/MythicReactUI/CHANGELOG.MD b/MythicReactUI/CHANGELOG.MD
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.50] - 2024-10-16
+
+### Changed
+
+- Updated the tab-complete ability for a parameter's `choices` to support partial context
+- Updated callbacks table to locally save column widths locally
+
 ## [0.2.49] - 2024-10-14
 
 ### Changed

diff --git a/MythicReactUI/src/components/App.js b/MythicReactUI/src/components/App.js
@@ -168,7 +168,7 @@ export function App(props) {
                                     onClose={()=>{setOpenRefreshDialog(false);}} />}
                             />
                         }
-                        <div style={{ margin: '0px 2px 0px 5px', flexGrow: 1, flexDirection: 'column', height: "calc(100% - 4rem)",  }}>
+                        <div style={{ margin: '0px 2px 0px 5px', flexGrow: 1, flexDirection: 'column', height: "calc(100% - 5rem)",  }}>
                             <Routes>
                                 <Route path='/new/login' element={<LoginForm me={me}/>}/>
                                 <Route path='/new/invite' element={<InviteForm me={me}/>}/>

diff --git a/MythicReactUI/src/components/MythicComponents/MythicResizableGrid/MythicResizableGrid.js b/MythicReactUI/src/components/MythicComponents/MythicResizableGrid/MythicResizableGrid.js
@@ -7,6 +7,7 @@ import HeaderCell from './HeaderCell';
 import Cell from './Cell';
 import DraggableHandles from './DraggableHandles';
 import {classes} from './styles';
+import {GetMythicSetting, SetMythicSetting} from "../MythicSavedUserSetting";
 const HeaderCellContext = createContext({});
 
 const MIN_COLUMN_WIDTH = 50;
@@ -65,6 +66,7 @@ const getShortRandomString = () => {
     return (Math.random() + 1).toString(36).substring(2);
 }
 const ResizableGridWrapper = ({
+    name,
     columns,
     sortIndicatorIndex,
     sortDirection,
@@ -84,8 +86,12 @@ const ResizableGridWrapper = ({
 }) => {
     /* Hooks */
     const { width: scrollbarWidth } = useScrollbarSize();
-
-    const [columnWidths, setColumnWidths] = useState(columns.map((column) => {
+    const localColumnsRef = React.useRef(columns);
+    const initialSavedWidths = name === undefined ? [] : GetMythicSetting({setting_name: `${name}_column_widths`, default_value: {}, output: "json-array"});
+    const [columnWidths, setColumnWidths] = useState(columns.map((column, index) => {
+        if(initialSavedWidths.length > 0){
+            return initialSavedWidths[index];
+        }
         if(column.fillWidth){
             return Math.max(column?.width || 0, MIN_FLEX_COLUMN_WIDTH);
         }
@@ -109,10 +115,15 @@ const ResizableGridWrapper = ({
         },
         [rowHeight, headerRowHeight]
     );
-
     useEffect(() => {
+        if(initialSavedWidths.length > 0 && localColumnsRef.current.length === columns.length){
+            return;
+        }
+        localColumnsRef.current = columns;
         const totalWidth = AutoSizerProps.width - scrollbarWidth;
-        const updatedColumnWidths = columns.map((column) => column.width || MIN_COLUMN_WIDTH);
+        const updatedColumnWidths = columns.map((column, index) => {
+            return column.width || MIN_COLUMN_WIDTH
+        });
         const totalWidthDiff = totalWidth - updatedColumnWidths.reduce((a, b) => a + b, 0);
         if (totalWidthDiff !== 0) {
             let updatedWidthIndexs = [];
@@ -131,7 +142,8 @@ const ResizableGridWrapper = ({
             //updatedColumnWidths[updatedWidthIndex] += totalWidthDiff;
         }
         setColumnWidths(updatedColumnWidths);
-    }, [scrollbarWidth, columns, AutoSizerProps.width]); // eslint-disable-line react-hooks/exhaustive-deps
+        SetMythicSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, output: "json-array"});
+    }, [scrollbarWidth, columns, AutoSizerProps.width, localColumnsRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         gridRef.current.resetAfterColumnIndex(0, true);
@@ -140,15 +152,15 @@ const ResizableGridWrapper = ({
     /* Event Handlers */
 
     const resizeColumn = (x, columnIndex) => {
-        const updatedWidths = columnWidths.map((columnWidth, index) => {
+        const updatedColumnWidths = columnWidths.map((columnWidth, index) => {
             if (columnIndex === index) {
                 return Math.floor(Math.max(columnWidth + x, MIN_COLUMN_WIDTH));
             }
             return Math.floor(columnWidth);
         });
-        setColumnWidths(updatedWidths);
+        setColumnWidths(updatedColumnWidths);
+        SetMythicSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, output: "json-array"});
     };
-
     const autosizeColumn =  ({columnIndex}) => {
         if(columns[columnIndex].disableDoubleClick){
             return
@@ -211,7 +223,7 @@ const ResizableGridWrapper = ({
             }
 
         }));
-        const updatedWidths = columnWidths.map((columnWidth, index) => {
+        const updatedColumnWidths = columnWidths.map((columnWidth, index) => {
             if (columnIndex === index) {
                 if(isNaN(longestElementInColumn)){
                     return MIN_COLUMN_WIDTH;
@@ -221,8 +233,10 @@ const ResizableGridWrapper = ({
             return Math.floor(columnWidth);
         });
         //console.log(updatedWidths, longestElementInColumn);
-        setColumnWidths(updatedWidths);
+        setColumnWidths(updatedColumnWidths);
+        SetMythicSetting({setting_name: `${name}_column_widths`, value: updatedColumnWidths, output: "json-array"});
     };
+
     useEffect( () => {
         if(callbackTableGridRef){
             callbackTableGridRef.current = gridRef.current;
@@ -298,11 +312,13 @@ const MythicResizableGrid = ({
     headerRowHeight = 20,
     callbackTableGridRef,
     onRowClick,
+    name,
 }) => {
     return (
         <AutoSizer style={{height: "100%"}}>
             {(AutoSizerProps) => (
                 <ResizableGridWrapper
+                    name={name}
                     columns={columns}
                     callbackTableGridRef={callbackTableGridRef}
                     headerNameKey={headerNameKey}

diff --git a/MythicReactUI/src/components/MythicComponents/MythicSavedUserSetting.js b/MythicReactUI/src/components/MythicComponents/MythicSavedUserSetting.js
@@ -28,7 +28,6 @@ export function useMythicSetting({setting_name, default_value, output="boolean"}
             break;
         case "json-array":
             try{
-
                 initialStorageSetting = JSON.parse(initialStorageSetting);
             }catch(error){
                 console.log(initialStorageSetting);
@@ -81,11 +80,44 @@ export function useMythicSetting({setting_name, default_value, output="boolean"}
     }, [me]);
     return setting;
 }
+export function GetMythicSetting({setting_name, default_value, output="boolean"}){
+    const me = meState();
+    // get the initial value we have stored
+    const localStorageSetting = localStorage.getItem(`${me?.user?.user_id || 0}-${setting_name}`);
+    let initialStorageSetting = localStorageSetting === null ? default_value : localStorageSetting;
+    switch(output){
+        case "boolean":
+            initialStorageSetting = (initialStorageSetting.toLowerCase() === "true");
+            break;
+        case "number":
+            initialStorageSetting = Number(initialStorageSetting);
+            break;
+        case "json-array":
+            try{
+                initialStorageSetting = JSON.parse(initialStorageSetting);
+            }catch(error){
+                console.log(initialStorageSetting);
+            }
+            break;
+        case "json":
+            try{
+                initialStorageSetting = JSON.parse(initialStorageSetting);
+            }catch(error){
+                console.log(initialStorageSetting);
+            }
+            break;
+        case "string":
+            break;
+        default:
+            console.log("unknown output type", output);
+    }
+    return initialStorageSetting;
+}
 export function SetMythicSetting({setting_name, value, output = "boolean"}) {
     let newSetting = value;
     switch(output){
         case "json-array":
-                newSetting = JSON.stringify(value);
+            newSetting = JSON.stringify(value);
             break;
         case "json":
             newSetting = JSON.stringify(value);