From 9b83472e2d972b216feeb4ea2c32c96acf011f6a Mon Sep 17 00:00:00 2001
From: loi <loi@ipac.caltech.edu>
Date: Tue, 27 Feb 2024 16:05:51 -0800
Subject: [PATCH] TableOptionPanel: revert show/hide toggle to checkboxes

---
 .../js/tables/ui/TablePanelOptions.jsx        | 67 ++++++++-----------
 src/firefly/js/ui/SimpleComponent.jsx         | 14 ++++
 src/firefly/js/ui/Stacker.jsx                 | 21 ++++--
 3 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/firefly/js/tables/ui/TablePanelOptions.jsx b/src/firefly/js/tables/ui/TablePanelOptions.jsx
index 385da6a871..b8833128d8 100644
--- a/src/firefly/js/tables/ui/TablePanelOptions.jsx
+++ b/src/firefly/js/tables/ui/TablePanelOptions.jsx
@@ -2,9 +2,9 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {Box, Button, Stack, ToggleButtonGroup, Typography} from '@mui/joy';
+import {Box, Button, Checkbox, Divider, Stack, Typography} from '@mui/joy';
 import {badgeClasses} from '@mui/joy/Badge';
 
 import {cloneDeep, get, isEmpty} from 'lodash';
@@ -82,22 +82,23 @@ export const TablePanelOptions = React.memo(({tbl_ui_id, tbl_id, onChange, onOpt
     };
 
     const onSqlFilterChanged = ({op, sql}) =>  onChange({sqlFilter: sql ? `${op}::${sql}` : ''});
+    const actions = useCallback(() => <OptionsFilterStats tbl_id={ctm_tbl_id}/>, [ctm_tbl_id]);
 
     return (
-        <Stack height={1} p={1} pt={0} boxSizing='border-box' spacing={1}>
+        <Stack height={1} p={1} pt={0} spacing={1}>
             <Options {...{uiState, tbl_id, tbl_ui_id, ctm_tbl_id, onOptionReset, onChange}} />
-            <StatefulTabs componentKey='TablePanelOptions' defaultSelected={0} actions={() => <OptionsFilterStats tbl_id={ctm_tbl_id}/>}>
-                <Tab name='Column Options'>
-                    <ColumnOptions {...{tbl_id, tbl_ui_id, ctm_tbl_id, onChange}} />
-                </Tab>
-                {showAdvFilter &&
+            <Stack flexGrow={1} overflow='hidden'>
+                <StatefulTabs componentKey={`${tbl_id}-options`} defaultSelected={0} actions={actions}>
+                    <Tab name='Column Options'>
+                        <ColumnOptions {...{tbl_id, tbl_ui_id, ctm_tbl_id, onChange}} />
+                    </Tab>
+                    {showAdvFilter &&
                     <Tab name={advFilterName} label={label()}>
-                        <div style={{display: 'flex', flex: '1 1 0', position: 'relative'}}>
-                            <SqlTableFilter {...{tbl_id, tbl_ui_id, onChange}} onChange={onSqlFilterChanged} />
-                        </div>
+                        <SqlTableFilter {...{tbl_id, tbl_ui_id, onChange}} onChange={onSqlFilterChanged} />
                     </Tab>
-                }
-            </StatefulTabs>
+                    }
+                </StatefulTabs>
+            </Stack>
             {showTblPrefMsg && <TablePrefMsg/>}
             <Stacker endDecorator={<HelpIcon helpId={'tables.options'}/>}>
                 <Button variant='solid' color='primary' onClick={onClose}>Close</Button>
@@ -133,7 +134,7 @@ function OptionsFilterStats({tbl_id}) {
     );
 }
 
-function Options({uiState, tbl_id, tbl_ui_id, ctm_tbl_id, onOptionReset, onChange}) {
+function Options({uiState, onChange}) {
     const {pageSize, showPaging=true, showUnits, allowUnits=true, showTypes, allowTypes=true, showFilters} = uiState || {};
 
     const onPageSize = (pageSize) => {
@@ -141,33 +142,19 @@ function Options({uiState, tbl_id, tbl_ui_id, ctm_tbl_id, onOptionReset, onChang
             onChange && onChange({pageSize: pageSize.value});
         }
     };
-    const [value, setValue] = React.useState([
-                                    showUnits && 'showUnits',
-                                    showTypes && 'showTypes',
-                                    showFilters && 'showFilters'
-                                ].filter((v) => v));
+    const handleChange =(ev) => {
+        const bname = ev.target?.value;
+        onChange({[bname]: ev.target.checked});
+    };
     return (
         <Stack direction='row' alignItems='center' justifyContent='space-between'>
-            <Stack direction='row' spacing={1} alignItems='center'>
+            <Stack direction='row' spacing={2} alignItems='center'>
                 <Typography level='title-md'>Show/Hide:</Typography>
-                <ToggleButtonGroup
-                    variant='outlined'
-                    size='sm'
-                    value={value}
-                    onChange={(ev, val) => {
-                        setValue(val);
-                        const bname = ev.target?.value;
-                        onChange({[bname]: val.includes(bname)});
-                    }}
-                >
-                    {allowUnits &&
-                    <Button value='showUnits' size='sm'>Units</Button>
-                    }
-                    {allowUnits &&
-                    <Button value='showTypes' size='sm'>Data Type</Button>
-                    }
-                    <Button value='showFilters' size='sm'>Filters</Button>
-                </ToggleButtonGroup>
+                <Stack direction='row' spacing={1}>
+                    {allowUnits && <> <Checkbox size='sm' label='Units' value='showUnits' checked={showUnits} onChange={handleChange}/> <Divider orientation='vertical'/></>}
+                    {allowTypes && <> <Checkbox size='sm' label='Data Type' value='showTypes' checked={showTypes} onChange={handleChange}/> <Divider orientation='vertical'/></>}
+                    <Checkbox size='sm' label='Filters' value='showFilters' checked={showFilters} onChange={handleChange}/>
+                </Stack>
             </Stack>
             {showPaging && pageSize !== MAX_ROW &&
             <InputField
@@ -253,7 +240,7 @@ export const ColumnOptions = React.memo(({tbl_id, tbl_ui_id, ctm_tbl_id, onChang
     };
 
     return (
-        <div style={{flex: '1 1 0'}}>
+        <Stack position='relative' flexGrow={1} overflow='hidden'>
             <TablePanel
                 border={false}
                 tbl_ui_id = {cmt_tbl_ui_id}
@@ -267,7 +254,7 @@ export const ColumnOptions = React.memo(({tbl_id, tbl_ui_id, ctm_tbl_id, onChang
                 rowHeight = {26}
                 highlightedRowHandler = {()=>undefined}
             />
-        </div>
+        </Stack>
     );
 });
 
diff --git a/src/firefly/js/ui/SimpleComponent.jsx b/src/firefly/js/ui/SimpleComponent.jsx
index f9e4d539cb..090773df90 100644
--- a/src/firefly/js/ui/SimpleComponent.jsx
+++ b/src/firefly/js/ui/SimpleComponent.jsx
@@ -240,3 +240,17 @@ export function useWatcher(actions, callback, params) {
        };
    },[]);
 }
+
+export function useDebugCycle({id, render=true, mount=true}) {
+
+    useEffect(() => {
+        mount && console.log(id, 'mounting');
+        return () => {
+            mount && console.log(id, 'unmounting');
+        };
+    },[]);
+
+    useEffect(() => {
+        render && console.log(id, 'rendering');
+    });
+}
diff --git a/src/firefly/js/ui/Stacker.jsx b/src/firefly/js/ui/Stacker.jsx
index 03500deb43..5863b0ae3a 100644
--- a/src/firefly/js/ui/Stacker.jsx
+++ b/src/firefly/js/ui/Stacker.jsx
@@ -1,22 +1,31 @@
-import {Stack} from '@mui/joy';
+import {Sheet, Stack} from '@mui/joy';
 import React from 'react';
-import {node, shape, object, number} from 'prop-types';
+import {node, shape, object, number, string} from 'prop-types';
 
-
-export function Stacker({endDecorator, startDecorator, gap=1, slotProps, children, ...props}) {
+/*
+ * A convenience component built around Sheet and Stack to provide a <start main end> layout
+ * with support for variant and color.  Use slopProps to customize
+ */
+export function Stacker({variant, color, endDecorator, startDecorator, gap=1, slotProps, children, ...props}) {
 
     return (
-        <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={gap} {...slotProps?.root}>
+        <Sheet variant={variant} color={color} component={Stack}
+               direction='row' justifyContent='space-between' alignItems='center' spacing={gap}
+               {...slotProps?.root}>
+
             {startDecorator}
             <Stack spacing={1} direction='row' alignItems='center' flexGrow={1} {...props}>
                 {children}
             </Stack>
             {endDecorator}
-        </Stack>
+
+        </Sheet>
     );
 }
 
 Stacker.propTypes = {
+    variant: string,
+    color: string,
     endDecorator: node,
     startDecorator: node,
     gap: number,            // spacing between decorators and the main child