From 4313dfbfabd3bd6f99b5c6654338077260e75b7e Mon Sep 17 00:00:00 2001
From: Emil Balitzki <emil.balitzki@gmail.com>
Date: Tue, 28 May 2024 15:12:31 +0200
Subject: [PATCH 1/2] Fixed linting + moved search at the top

Signed-off-by: Emil Balitzki <emil.balitzki@gmail.com>
---
 .../src/components/DataView/DataPanel.tsx     | 297 +++++++++---------
 frontend/src/components/DataView/DataView.tsx |   4 -
 2 files changed, 151 insertions(+), 150 deletions(-)

diff --git a/frontend/src/components/DataView/DataPanel.tsx b/frontend/src/components/DataView/DataPanel.tsx
index 41a9b433..6e71065b 100644
--- a/frontend/src/components/DataView/DataPanel.tsx
+++ b/frontend/src/components/DataView/DataPanel.tsx
@@ -5,7 +5,6 @@
   Quick filter outside of the grid https://mui.com/x/react-data-grid/filtering-recipes/#quick-filter-outside-of-the-grid
 
 */
-import * as React from 'react';
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
@@ -14,6 +13,7 @@ import { MapTrifold } from "@phosphor-icons/react";
 import "./DataPanel.css";
 import { Tooltip, TextField } from "@mui/material";
 import { GridToolbar, GridToolbarProps } from "@mui/x-data-grid";
+import { useState, Fragment } from "react";
 
 // Returns a button if the "button" value is set to 1
 const renderDetailsButton = (params: GridRenderCellParams) => {
@@ -42,7 +42,13 @@ const columns: GridColDef[] = [
     renderCell: renderDetailsButton,
   },
   { field: "key", headerName: "key", width: 150 },
-  { field: "value", headerName: "value", type: "number", width: 150, getApplyQuickFilterFn: undefined },
+  {
+    field: "value",
+    headerName: "value",
+    type: "number",
+    width: 150,
+    getApplyQuickFilterFn: undefined,
+  },
 ];
 
 // Data
@@ -74,29 +80,21 @@ const rows = [
 ];
 
 function MyCustomToolbar(props: GridToolbarProps) {
-  return (
-    <GridToolbar {...props} />
-  );
+  return <GridToolbar {...props} />;
 }
 
 // All DataGrid options explained https://mui.com/x/api/data-grid/data-grid/
-export default function DataPanel({
-  listTitle,
-}: {
-  listTitle: string;
-}) {
-  const [filterValue, setFilterValue] = React.useState('');
+export default function DataPanel({ listTitle }: { listTitle: string }) {
+  const [filterValue, setFilterValue] = useState("");
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
   };
 
   return (
-    <>
-    <div className="data-panel-container">
-      <div className="data-panel-title">{listTitle}</div>
+    <Fragment>
       <Grid item>
-          <Box id="filter-panel" >
+        <Box id="filter-panel">
           <TextField
             label="Filter"
             variant="outlined"
@@ -105,142 +103,149 @@ export default function DataPanel({
             onChange={handleFilterChange}
             fullWidth
           />
-          </Box>
-        </Grid>
-      <Grid container spacing={2} className="data-panel-grid">
-        <Grid item style={{ width: "100%" }}>
-          <DataGrid
-            disableColumnMenu
-            columnHeaderHeight={0}
-            rows={rows}
-            columns={columns}
-            slots={{
-              toolbar: MyCustomToolbar,
-            }}
-            slotProps={{
-              toolbar: {
-                printOptions: { disableToolbarButton: true },
-                csvOptions: { disableToolbarButton: true },
-              },
-            }}
-            disableDensitySelector
-            disableColumnFilter
-            disableColumnSelector
-            disableColumnSorting
-            initialState={{
-              pagination: {
-                paginationModel: { page: 0, pageSize: 5 },
-              },
-              filter: {
-                filterModel: {
-                  items: [],
-                  quickFilterValues: [filterValue],
-                  quickFilterExcludeHiddenColumns: true,
+        </Box>
+      </Grid>
+      <div className="data-panel-container">
+        <div className="data-panel-title">{listTitle}</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
                 },
-              },
-            }}
-            filterModel={{
-              items: [{ field: 'key', operator: 'contains', value: filterValue }],
-            }}
-            pageSizeOptions={[5, 10]}
-            density="compact"
-            disableRowSelectionOnClick
-            autoHeight
-          />
-          </Grid>
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
           </Grid>
-          </div>
-          <div className="data-panel-container">
-      <div className="data-panel-title">General Data</div>
-          <Grid container spacing={2} className="data-panel-grid">
-           <Grid item style={{ width: "100%" }}>
-          <DataGrid
-            disableColumnMenu
-            columnHeaderHeight={0}
-            rows={rows}
-            columns={columns}
-            slots={{
-              toolbar: MyCustomToolbar,
-            }}
-            slotProps={{
-              toolbar: {
-                printOptions: { disableToolbarButton: true },
-                csvOptions: { disableToolbarButton: true },
-              },
-            }}
-            disableDensitySelector
-            disableColumnFilter
-            disableColumnSelector
-            disableColumnSorting
-            initialState={{
-              pagination: {
-                paginationModel: { page: 0, pageSize: 5 },
-              },
-              filter: {
-                filterModel: {
-                  items: [],
-                  quickFilterValues: [filterValue],
-                  quickFilterExcludeHiddenColumns: true,
+        </Grid>
+      </div>
+      <div className="data-panel-container">
+        <div className="data-panel-title">General Data</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
                 },
-              },
-            }}
-            filterModel={{
-              items: [{ field: 'key', operator: 'contains', value: filterValue }],
-            }}
-            pageSizeOptions={[5, 10]}
-            density="compact"
-            disableRowSelectionOnClick
-            autoHeight
-          />
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
+          </Grid>
         </Grid>
-      </Grid>
-    </div>
-    <div className="data-panel-container">
-      <div className="data-panel-title">Extra Capabilities</div>
-          <Grid container spacing={2} className="data-panel-grid">
-           <Grid item style={{ width: "100%" }}>
-          <DataGrid
-            disableColumnMenu
-            columnHeaderHeight={0}
-            rows={rows}
-            columns={columns}
-            slots={{
-              toolbar: MyCustomToolbar,
-            }}
-            slotProps={{
-              toolbar: {
-                printOptions: { disableToolbarButton: true },
-                csvOptions: { disableToolbarButton: true },
-              },
-            }}
-            disableDensitySelector
-            disableColumnFilter
-            disableColumnSelector
-            disableColumnSorting
-            initialState={{
-              pagination: {
-                paginationModel: { page: 0, pageSize: 5 },
-              },
-              filter: {
-                filterModel: {
-                  items: [],
-                  quickFilterValues: [filterValue],
-                  quickFilterExcludeHiddenColumns: true,
+      </div>
+      <div className="data-panel-container">
+        <div className="data-panel-title">Extra Capabilities</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
                 },
-              },
-            }}
-            filterModel={{
-              items: [{ field: 'key', operator: 'contains', value: filterValue }],
-            }}
-            pageSizeOptions={[5, 10]}
-            density="compact"
-            disableRowSelectionOnClick
-            autoHeight
-          />
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
+          </Grid>
         </Grid>
-      </Grid>
-    </div>
-    </>
+      </div>
+    </Fragment>
   );
 }
-
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
index df038b6e..db65cc98 100644
--- a/frontend/src/components/DataView/DataView.tsx
+++ b/frontend/src/components/DataView/DataView.tsx
@@ -30,7 +30,6 @@ function DataView() {
     setIfOpenedDialog(!ifOpenedDialog);
   };
 
-  
   return (
     <div className="dataview-container">
       <TabContext value="1">
@@ -63,13 +62,10 @@ function DataView() {
             ></Tab>
           </TabList>
         </div>
-
         <TabPanel value="1" className="tab dataview-tab">
           <div className="datapanels-container">
             <div className="data-panels-container">
-
               <DataPanel listTitle={getCurrentTabTitle()} />
-
             </div>
             <Button variant="outlined">Load data</Button>
           </div>

From 578e4e973eb14ca8ff4b6a20bd643ea68ea82c64 Mon Sep 17 00:00:00 2001
From: Emil Balitzki <emil.balitzki@gmail.com>
Date: Tue, 28 May 2024 15:17:48 +0200
Subject: [PATCH 2/2] Added icon to the search bar

Signed-off-by: Emil Balitzki <emil.balitzki@gmail.com>
---
 frontend/src/components/DataView/DataPanel.css | 7 +++++++
 frontend/src/components/DataView/DataPanel.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DataView/DataPanel.css b/frontend/src/components/DataView/DataPanel.css
index f897b984..1652ba9f 100644
--- a/frontend/src/components/DataView/DataPanel.css
+++ b/frontend/src/components/DataView/DataPanel.css
@@ -20,3 +20,10 @@
 .MuiGrid-item {
   padding: 1rem !important;
 }
+
+.search-box-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+}
diff --git a/frontend/src/components/DataView/DataPanel.tsx b/frontend/src/components/DataView/DataPanel.tsx
index 6e71065b..8c33e837 100644
--- a/frontend/src/components/DataView/DataPanel.tsx
+++ b/frontend/src/components/DataView/DataPanel.tsx
@@ -9,7 +9,7 @@ import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { MapTrifold } from "@phosphor-icons/react";
+import { Funnel, MapTrifold } from "@phosphor-icons/react";
 import "./DataPanel.css";
 import { Tooltip, TextField } from "@mui/material";
 import { GridToolbar, GridToolbarProps } from "@mui/x-data-grid";
@@ -96,7 +96,11 @@ export default function DataPanel({ listTitle }: { listTitle: string }) {
       <Grid item>
         <Box id="filter-panel">
           <TextField
-            label="Filter"
+            label={
+              <div className="search-box-label">
+                <Funnel size={20} /> Search
+              </div>
+            }
             variant="outlined"
             size="small"
             value={filterValue}