Fixed issues in tabular comparison UI

OpenUpSA · Jul 7, 2023 · a14a49c · a14a49c
1 parent 559476f
commit a14a49c
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 60 deletions.
diff --git a/src/js/tabular_comparison/components/FilterRow.js b/src/js/tabular_comparison/components/FilterRow.js
@@ -52,37 +52,39 @@ const FilterRow = ({
     )
 
     return (
-      <Grid container item={true} spacing={2} className={'lh-0'}>
-      <Grid xs={2} item={true} className={'m-auto'}>
-        <p className={'font-13'}>Filter {index+1}:</p>
-      </Grid>
-        <Grid xs={4} item={true} className={'m-auto'}>
-          <Dropdown
-            items={groups}
-            label="Group"
-            placeholder="attribute"
-            value={selectedGroup}
-            isDisabled={!canRemove}
-            handleDropdownChange={handleGroupDropdownChange}
-          />
+      <Grid container item={true} className={'lh-0'} sx={{paddingBottom: '5px'}}>
+        <Grid xs={2} item={true} className={'m-auto'}>
+          <p className={'font-13'}>Filter {index+1}:</p>
         </Grid>
-        <Grid xs={4} item={true} className={'m-auto'}>
-          <Dropdown
-            items={selectedGroupValues || []}
-            label="Value"
-            placeholder="value"
-            value={selectedValue}
-            isDisabled={selectedGroup === ''}
-            handleDropdownChange={handleValueDropdownChange}
-          />
+        <Grid xs={9} container item={true} spacing={1}>
+          <Grid xs={6} item={true} className={'m-auto'}>
+            <Dropdown
+              items={groups}
+              label="Group"
+              placeholder="attribute"
+              value={selectedGroup}
+              isDisabled={!canRemove}
+              handleDropdownChange={handleGroupDropdownChange}
+            />
+          </Grid>
+          <Grid xs={6} item={true} className={'m-auto'}>
+            <Dropdown
+              items={selectedGroupValues || []}
+              label="Value"
+              placeholder="value"
+              value={selectedValue}
+              isDisabled={selectedGroup === ''}
+              handleDropdownChange={handleValueDropdownChange}
+            />
+          </Grid>
         </Grid>
 
-        <Grid xs={2} item={true} alignItems="center" className={'m-auto'}>
-        {canRemove &&
-          <RemoveFilterButton aria-label="delete" size="small" onClick={() => removeFilterRow(selectedGroup)}>
-            {RemoveFilterSvg}
-          </RemoveFilterButton>
-        }
+        <Grid xs={1} item={true} alignItems="center" className={'m-auto text-end pr-0'}>
+          {canRemove &&
+            <RemoveFilterButton aria-label="delete" size="small" onClick={() => removeFilterRow(selectedGroup)}>
+              {RemoveFilterSvg}
+            </RemoveFilterButton>
+          }
         </Grid>
       </Grid>
     );

diff --git a/src/js/tabular_comparison/components/styledElements.js b/src/js/tabular_comparison/components/styledElements.js
@@ -48,22 +48,38 @@ export const UnfoldButton = styled(IconButton)(({ theme }) => ({
     }
 }));
 
-export const CategoryChip = styled(Chip)(({ theme }) => ({
-  backgroundColor: "#E7E7E7",
-  marginTop: "10px",
-  marginRight: "10px",
+export const CategoryChip = styled('div')(({ theme }) => ({
+  display: "flex",
+  padding: "2px 6px",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "10px",
+  borderRadius: "100px",
+  background: "#2F2F2F",
   color: "#FFF",
   fontSize: "10px",
-  borderRadius: "100px",
-  background: "#2F2F2F"
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "100%",
+  height: "fit-content",
+  marginRight: "4px",
+  marginBottom: "4px",
 }));
 
-export const FilterChip = styled(Chip)(({ theme }) => ({
-  backgroundColor: "#E7E7E7",
-  marginTop: "10px",
-  marginRight: "10px",
+export const FilterChip = styled('div')(({ theme }) => ({
+  display: "flex",
+  padding: "2px 6px",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "10px",
+  borderRadius: "100px",
+  background: "#E1E1E1",
   color: "#2F2F2F",
   fontSize: "10px",
-  borderRadius: "100px",
-  background: "#E1E1E1"
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "100%",
+  height: "fit-content",
+  marginRight: "4px",
+  marginBottom: "4px",
 }));
diff --git a/src/js/tabular_comparison/indicator-filters.js b/src/js/tabular_comparison/indicator-filters.js
@@ -92,7 +92,7 @@ const IndicatorFilters = ({
 
     return (
         <div>
-          <Grid container spacing={2}>
+          <Grid container>
             {selectedFilters && selectedFilters.map((filter, index) => (
               <FilterRow
                 key={index}

diff --git a/src/js/tabular_comparison/indicator.js b/src/js/tabular_comparison/indicator.js
@@ -45,6 +45,7 @@ const Indicator = (props) => {
         const metadata = selectedIndicator.indicatorDetail.metadata;
         const primaryGroup = metadata.primary_group;
         const groups = metadata.groups.filter(item => item.name !== primaryGroup);
+        const defaultFilters = selectedIndicator.indicatorDetail?.chart_configuration?.filter?.defaults || [];
         let filters = [];
         groups.map(
           item => {
@@ -58,18 +59,21 @@ const Indicator = (props) => {
           }
         )
 
-        const defaultFilters = selectedIndicator.indicatorDetail?.chart_configuration?.filter?.defaults || [];
         defaultFilters.map(
           filter => {
             let group = groups.find(item => item.name === filter.name);
-            const isNewFilter = filters.find(item => item.group === filter.name) === undefined;
-            if (group !== undefined && isNewFilter){
+            const nonAggFilter = filters.find(item => item.group === filter.name);
+            if (group !== undefined){
               if (group.subindicators.includes(filter.value)) {
-                filters.push({
-                  group: filter.name,
-                  value: filter.value,
-                  canRemove: true,
-                })
+                if (nonAggFilter === undefined){
+                  filters.push({
+                    group: filter.name,
+                    value: filter.value,
+                    canRemove: true,
+                  })
+                } else {
+                  nonAggFilter.value = filter.value;
+                }
               }
             }
           }

diff --git a/src/js/tabular_comparison/result.js b/src/js/tabular_comparison/result.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useState, useCallback} from "react";
 import {Card, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
 
 import {format as d3format} from "d3-format";
@@ -10,6 +10,7 @@ import {fillMissingKeys, getColorRange} from "../utils";
 import {ResultArrowSvg, ResultArrowSvg2, UnfoldMoreSvg, FoldMoreSvg} from "./svg-icons";
 import {UnfoldButton, CategoryChip, FilterChip} from './components/styledElements';
 import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 
 //components
 import SectionTitle from "./section-title";
@@ -166,6 +167,25 @@ const Result = (props) => {
         }
     }
 
+    const getCategoryChipText = useCallback(
+      (category) => {
+        if (category === null){
+          return "No category selected"
+        }
+        return isResultHeaderFolded ? category : `Category: ${category}`;
+      }, [
+        isResultHeaderFolded
+      ]
+    )
+
+    const getFilterChipText = useCallback(
+      (filter) => {
+        return isResultHeaderFolded ? filter.value : `${filter.group}: ${filter.value}`;
+      }, [
+        isResultHeaderFolded
+      ]
+    )
+
     const renderTable = () => {
         return <TableContainer
             component={Paper}
@@ -181,6 +201,7 @@ const Result = (props) => {
                     <TableRow>
                         <TableCell
                           data-testid={'table-header-0'}
+                          sx={{padding: "9px 10px"}}
                         ><b>Geography</b></TableCell>
                         {
                             props.indicatorObjs.map((column) => {
@@ -191,23 +212,20 @@ const Result = (props) => {
                                             key={column.index}
                                             className={isResultHeaderFolded ? 'truncate-table-cell': 'untruncate-table-cell'}
                                             title={column.indicator + ' : ' + column.category}
+                                            sx={{padding: "9px 10px"}}
                                         >
                                           <>
                                           <b>{column.indicator}</b>
-                                          {!isResultHeaderFolded &&
                                             <Stack useFlexGap flexWrap="wrap" direction="row">
-                                              {column.category !== null && <CategoryChip label={"Category: "+ column.category} sx={{ marginBottom: '10px' }} />}
+                                              <CategoryChip>{getCategoryChipText(column.category)}</CategoryChip>
                                               {column.category !== null && column.filters.map(
                                                 (item) => {
                                                   if (item.group.length > 0 && item.value.length > 0){
-                                                    return <FilterChip label={item.group +": "+ item.value} sx={{ marginBottom: '10px' }} />
+                                                    return <FilterChip>{getFilterChipText(item)}</FilterChip>
                                                   }
                                                 })
                                               }
                                             </Stack>
-                                          }
-
-
                                           </>
                                         </TableCell>
                                     )
@@ -297,10 +315,19 @@ const Result = (props) => {
             >
                 <SectionTitle>Resulting comparison</SectionTitle>
                 {props.indicatorObjs.length > 0 &&
-                  <UnfoldButton aria-label="delete" size="small" onClick={() => setIsResultHeaderFolded(!isResultHeaderFolded)}>
-                    {isResultHeaderFolded && UnfoldMoreSvg}
-                    {!isResultHeaderFolded && FoldMoreSvg}
-                  </UnfoldButton>
+
+                  <Tooltip
+                    title={isResultHeaderFolded ? "Expand header row" : "Collapse header row"}
+                    arrow
+                  >
+                    <UnfoldButton
+                      aria-label="delete"
+                      size="small"
+                      onClick={() => setIsResultHeaderFolded(!isResultHeaderFolded)}
+                    >
+                      {isResultHeaderFolded ? UnfoldMoreSvg : FoldMoreSvg}
+                    </UnfoldButton>
+                  </Tooltip>
                 }
 
             </Grid>

diff --git a/src/js/tabular_comparison/tabular-comparison.module.css b/src/js/tabular_comparison/tabular-comparison.module.css
@@ -188,6 +188,7 @@ body {
     max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: baseline !important;
 }
 
 .untruncate-table-cell {
@@ -231,6 +232,14 @@ body {
   line-height: 0px !important;
 }
 
+.text-end{
+  text-align: end;
+}
+
+.pr-0 {
+  padding-right: 0px;
+}
+
 /*scroll*/
 /* width */
 ::-webkit-scrollbar {