From 7749aeb9291a64a56d42031cdcef7b03afbc8b0f Mon Sep 17 00:00:00 2001
From: Tony Bentley <tonybentley@Tonys-MacBook-Pro-3.local>
Date: Sat, 30 Dec 2023 20:09:49 -0800
Subject: [PATCH] fix:style and layout

---
 package-lock.json |  28 ++++++++++-
 package.json      |   6 ++-
 src/App.css       |  38 ---------------
 src/App.tsx       | 120 ++++++++++++++++++++++++++++++++--------------
 4 files changed, 117 insertions(+), 75 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4d1231..02d2c50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,10 +6,11 @@
   "packages": {
     "": {
       "name": "signalk-multiplex-viewer",
-      "version": "0.1.0",
+      "version": "0.0.1",
       "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.15.2",
         "@mui/material": "^5.15.2",
         "@mui/x-data-grid": "^6.18.6",
         "@testing-library/jest-dom": "^5.17.0",
@@ -3703,6 +3704,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.2.tgz",
+      "integrity": "sha512-Vs0Z6cd6ieTavMjqPvIJJfwsKaCLdRSErk5LjKdZlBqk7r2SR6roDyhVTQuZOeCzjEFj0qZ4iVPp2DJZRwuYbw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.15.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.2.tgz",
diff --git a/package.json b/package.json
index 3e4600e..54de27a 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,15 @@
     "signalk-webapp"
   ],
   "release": {
-    "branches": ["master", "main"]
+    "branches": [
+      "master",
+      "main"
+    ]
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",
     "@mui/x-data-grid": "^6.18.6",
     "@testing-library/jest-dom": "^5.17.0",
diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index 081103c..6e2bf36 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,23 @@
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { Grid, List, ListItem, Checkbox } from '@mui/material';
+import { 
+  DataGrid,
+  GridToolbarColumnsButton, 
+  GridToolbarContainer,
+  GridToolbarExport,
+  GridToolbarFilterButton 
+} from '@mui/x-data-grid';
+
+import {
+  Grid,
+  List,
+  ListItem,
+  Checkbox,
+  Accordion,
+  AccordionSummary,
+  Typography, 
+  AccordionDetails
+} from '@mui/material';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Data, Event, EventData, EEListItem, EListItem, EventItem } from './interfaces';
 import { v4 as uuid } from 'uuid';
@@ -11,6 +29,17 @@ const getData = async () => {
   return await res.json();
 }
 
+const CustomToolbar = () => {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  );
+}
+
+
 function App() {
   
   const [data] = useState(Array<Event>());
@@ -177,50 +206,71 @@ function App() {
   }, [emitters]);
   
   return (
-    <div className="App" style={{margin: '10px'}}>
-      <Grid container spacing={2} ml={4} mt={10}>
-        <Grid xs={3} item>
-          <h3 style={{float: 'left'}}>Emitters</h3>
-          <List>
-            { emitters.map((emitter: EListItem) => 
-              <ListItem  sx={{p:0}} key={emitter.id}>
-                <Checkbox 
-                  sx={{p:0}} 
-                  checked={emitter.checked} 
-                  onChange={updateEmittersChecked} 
-                  size="small" value={emitter.value}/> 
-                <span>{emitter.value}</span>
-              </ListItem>)}
-          </List>
-          <h3 style={{float: 'left'}}>Events</h3>
-          <List>
-            { events
-              .filter((event: EEListItem) => event.visible)
-              .map((event: EEListItem) => 
-                <ListItem  sx={{p:0}} key={event.id}>
-                  <Checkbox 
-                    sx={{p:0}} 
-                    checked={event.checked} 
-                    onChange={updateEventsChecked} 
-                    size="small" 
-                    value={event.value}/> 
-                  <span>{event.value}</span>
-                </ListItem>)}
-          </List>
+    <div className="App" style={{marginTop: 10}}>
+      <Grid container spacing={2} mt={5} pl={0}>
+        <Grid xs={3} item p={0}  style={{overflow:'scroll', height: 650}} mt={5}>
+        <Accordion defaultExpanded={true} disableGutters style={{boxShadow:'none'}}>
+            <AccordionSummary sx={{pt:0, mt:0, mb:0, pb:0}}
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1a-content"
+              aria-expanded={true}
+              id="emitters">
+                <Typography variant="body1">Emitters ({emitters.length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails sx={{pt:0, mt:0,  mb:0, pb:0}}>
+              <List sx={{pt:0, mt:0}}>
+                { emitters.map((emitter: EListItem) => 
+                  <ListItem  sx={{p:.2}} key={emitter.id}>
+                    <Checkbox 
+                      sx={{p:0, mr:.08}} 
+                      checked={emitter.checked} 
+                      onChange={updateEmittersChecked} 
+                      size="small" value={emitter.value}/> 
+                      <label style={{marginLeft:8}}>{emitter.value}</label>
+                  </ListItem>)}
+              </List>
+            </AccordionDetails>
+          </Accordion>
+         
+          <Accordion defaultExpanded={true} style={{boxShadow:'none'}}>
+            <AccordionSummary  sx={{pt:0, mt:0, mb:0, pb:0}}
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1a-content"
+              aria-expanded={true}
+              id="events">
+                <Typography variant="body1">Events ({events.filter(item=>item.visible).length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails  sx={{pt:0, mt:0, mb:0, pb:0}}>
+              <List sx={{pt:0, mt:0}}>
+                { events
+                  .filter((event: EEListItem) => event.visible)
+                  .map((event: EEListItem) => 
+                    <ListItem  sx={{p:0}} key={event.id}>
+                      <Checkbox 
+                        sx={{p:0, mr:.08}} 
+                        checked={event.checked} 
+                        onChange={updateEventsChecked} 
+                        size="small" 
+                        value={event.value}/> 
+                        <label style={{marginLeft:8}}>{event.value}</label>
+                    </ListItem>)}
+              </List>
+            </AccordionDetails>
+          </Accordion>
         </Grid>
         <Grid xs={8} item style={{ height: 700, width: '100%', marginTop: 16 }}>
         <DataGrid
-          rowCount={eventItems.length}
-          slots={{ toolbar: GridToolbar }}
+          slots={{ toolbar: CustomToolbar }}
+          hideFooter={true} 
           slotProps={{
             toolbar: {
               showQuickFilter: true,
             },
           }}
-          hideFooter={true}
           rows={eventItems}
           density='compact'
           columns={columnHeader} />
+          <Typography variant='body2' style={{float:'right', paddingTop:4}}>Total Rows: {eventItems.length}</Typography>
         </Grid>
       </Grid>
     </div>