add resizable panels #137

Pewillia · 2025-12-08T14:32:00Z

closes(136)

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

Type of change

Bug fix (non-breaking change which fixes an issue)
[ X] New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ X] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

https://pewillia.github.io/geoview-demo/?config=00-basic-footer-appbar-combo.json_

Checklist:

[ X] I have build (npm run build) and deploy (npm run deploy) my PR
[ X] I have connected the issues(s) to this PR
[ X] My code follows the style guidelines of this project
[X ] I have performed a self-review of my own code
[X ] I have commented my code, particularly in hard-to-understand areas
[ X] My changes generate no new warnings
I have created new issue(s) related to the outcome of this PR is needed
~~I have made corresponding changes to the documentation~~
~~I have added tests that prove my fix is effective or that my feature works~~
~~New and existing unit tests pass locally with my changes~~

This change is

closes(136)

jolevesq

@jolevesq reviewed 8 of 8 files at r1, all commit messages.
Reviewable status: all files reviewed, 17 unresolved discussions (waiting on @Pewillia)

src/components/DrawerTabs.tsx line 59 at r1 (raw file):

        </TabPanel>
      </TabContext>

Remove trailing white spaces

src/components/GeoViewMap.tsx line 30 at r1 (raw file):

}

 let mapWidth2=0;

space before and after =

src/components/GeoViewMap.tsx line 47 at r1 (raw file):

    setAnchorEl(null);
  };

Remove trailing white spaces

src/components/GeoViewMap.tsx line 55 at r1 (raw file):

  const {  handleApplyStateToConfigFile
     } = cgpvContext;

Put on same line as the one above

src/components/GeoViewMap.tsx line 63 at r1 (raw file):

  const [isClosing, ] = React.useState(false);

  const {setMapWidth} = cgpvContext;

Can you regroup const by group and add a comment to day they are use for what

src/components/GeoViewMap.tsx line 121 at r1 (raw file):

  return (

Remove trailing white spaces

src/components/GeoViewMap.tsx line 129 at r1 (raw file):

          defaultSize={DEFAULT_LEFT_PANEL_WIDTH} // panel size
          ref={leftPanelRef} 
          onResize={ (number)=> { console.log("left panel resized to:", number) ;

No console log in JSX. Instead of an code inside JSX create a function and call it from JSX

src/components/GeoViewMap.tsx line 135 at r1 (raw file):

               forceUpdate();
           } }

Remove trailing white spaces

src/components/GeoViewMap.tsx line 173 at r1 (raw file):

                 justifyContent: 'left',
              alignItems: 'left',}}>

Remove trailing white spaces

src/components/GeoViewMap.tsx line 184 at r1 (raw file):

                      color: "rgba(0, 0, 0,0.0)"
                    },
                       "&.Mui-disabled": {

Why do you have empty item?

src/components/GeoViewMap.tsx line 193 at r1 (raw file):

                    '& .MuiFormControlLabel-root': {
                         color: itemColor
                    },

Remove trailing white spaces

src/components/GeoViewMap.tsx line 217 at r1 (raw file):

      <img src={`${GEOVIEW_CORE_URL}/img/Logo.png`} alt="GeoView" 
      style={{ height: 0, marginRight: 16 }} />{/* Adjust height and margin as needed */}
      <Typography variant="h6" component="div" sx={{ flexGrow: 1,color: 'white'}}>

Space before }}

src/components/MapBuilder.tsx line 29 at r1 (raw file):

import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
import { useSnackbar } from '@/providers/snackbarProvider';
import React from 'react';

I see you import react but do not see where it is use. Best is to import only what is needed from REact

src/components/MapBuilder.tsx line 470 at r1 (raw file):

                  }
                }/>

Remove trailing white spaces

src/components/MapBuilder.tsx line 490 at r1 (raw file):

                }
             />

Remove trailing white spaces

src/components/MapBuilder.tsx line 505 at r1 (raw file):

           style={{ maxWidth: '30px', maxHeight: '40px', minWidth: '40px', minHeight: '40px' }}
           onClick={(event) => {

Remove trailing white spaces

src/components/MapBuilder.tsx line 506 at r1 (raw file):

           onClick={(event) => {
          
             if ( mapWidth1.current)  {  // update width text field,mapWidth is a hook and is a update delay

Create a function outside the JSX element

jolevesq

@jolevesq reviewed 2 of 3 files at r2, all commit messages.
Reviewable status: 7 of 8 files reviewed, 6 unresolved discussions (waiting on @Pewillia)

closes(136)

Pewillia

Reviewable status: 5 of 8 files reviewed, 6 unresolved discussions (waiting on @jolevesq)

src/components/DrawerTabs.tsx line 59 at r1 (raw file):