Fixed bugs and update results component

src/js/tabular_comparison/components/styledElements.js

@@ -5,6 +5,7 @@ import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
+import Chip from '@mui/material/Chip';
 
 export const AddFilterButton = styled(Button)(({ theme }) => ({
   width: '100%',
@@ -37,3 +38,32 @@ export const RemoveFilterButton = styled(IconButton)(({ theme }) => ({
       backgroundColor: "#FFF"
     }
 }));
+
+export const UnfoldButton = styled(IconButton)(({ theme }) => ({
+  backgroundColor: "#E7E7E7",
+  marginLeft: "auto",
+  padding: "4px 7px",
+  "&:hover": {
+      backgroundColor: "#E7E7E7"
+    }
+}));
+
+export const CategoryChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: "#E7E7E7",
+  marginTop: "10px",
+  marginRight: "10px",
+  color: "#FFF",
+  fontSize: "10px",
+  borderRadius: "100px",
+  background: "#2F2F2F"
+}));
+
+export const FilterChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: "#E7E7E7",
+  marginTop: "10px",
+  marginRight: "10px",
+  color: "#2F2F2F",
+  fontSize: "10px",
+  borderRadius: "100px",
+  background: "#E1E1E1"
+}));

src/js/tabular_comparison/indicator.js

@@ -62,7 +62,8 @@ const Indicator = (props) => {
         defaultFilters.map(
           filter => {
             let group = groups.find(item => item.name === filter.name);
-            if (group !== undefined){
+            const isNewFilter = filters.find(item => item.group === filter.name) === undefined;
+            if (group !== undefined && isNewFilter){
               if (group.subindicators.includes(filter.value)) {
                 filters.push({
                   group: filter.name,

src/js/tabular_comparison/result.js

@@ -1,12 +1,15 @@
 import React, {useEffect, useState} from "react";
 import {Card, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
+
 import {format as d3format} from "d3-format";
 import {scaleSequential as d3scaleSequential} from 'd3-scale';
 import {max as d3max, min as d3min} from 'd3-array';
 import {defaultValues} from "../defaultValues";
 import {Config as SAConfig} from '../configurations/geography_sa';
 import {fillMissingKeys, getColorRange} from "../utils";
-import {ResultArrowSvg, ResultArrowSvg2} from "./svg-icons";
+import {ResultArrowSvg, ResultArrowSvg2, UnfoldMoreSvg, FoldMoreSvg} from "./svg-icons";
+import {UnfoldButton, CategoryChip, FilterChip} from './components/styledElements';
+import Stack from '@mui/material/Stack';
 
 //components
 import SectionTitle from "./section-title";
@@ -16,6 +19,7 @@ const Result = (props) => {
     const arrowSvg = ResultArrowSvg;
     const arrowSvg2 = ResultArrowSvg2;
     const defaultConfig = new SAConfig();
+    const [isResultHeaderFolded, setIsResultHeaderFolded] = useState(true);
 
     useEffect(() => {
         populateRows();
@@ -185,9 +189,27 @@ const Result = (props) => {
                                         <TableCell
                                             data-testid={`table-header-${column.index}`}
                                             key={column.index}
-                                            className={'truncate-table-cell'}
+                                            className={isResultHeaderFolded ? 'truncate-table-cell': 'untruncate-table-cell'}
                                             title={column.indicator + ' : ' + column.category}
-                                        ><b>{column.indicator} : {column.category}</b></TableCell>
+                                        >
+                                          <>
+                                          <b>{column.indicator}</b>
+                                          {!isResultHeaderFolded &&
+                                            <Stack useFlexGap flexWrap="wrap" direction="row">
+                                              {column.category !== null && <CategoryChip label={"Category: "+ column.category} sx={{ marginBottom: '10px' }} />}
+                                              {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' }} />
+                                                  }
+                                                })
+                                              }
+                                            </Stack>
+                                          }
+
+
+                                          </>
+                                        </TableCell>
                                     )
                                 }
                             })
@@ -270,10 +292,17 @@ const Result = (props) => {
         <Grid
             container
         >
-            <Grid
+            <Grid container
                 className={'margin-bottom-20'}
             >
                 <SectionTitle>Resulting comparison</SectionTitle>
+                {props.indicatorObjs.length > 0 &&
+                  <UnfoldButton aria-label="delete" size="small" onClick={() => setIsResultHeaderFolded(!isResultHeaderFolded)}>
+                    {isResultHeaderFolded && UnfoldMoreSvg}
+                    {!isResultHeaderFolded && FoldMoreSvg}
+                  </UnfoldButton>
+                }
+
             </Grid>
             <Grid container>
                 <Card

src/js/tabular_comparison/svg-icons.js

@@ -57,3 +57,17 @@ export const RemoveFilterSvg =
       <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M11.7206 6.05801C12.0737 5.70493 12.0737 5.13247 11.7206 4.77938C11.3675 4.4263 10.7951 4.4263 10.442 4.77938L8 7.22137L5.5581 4.77946C5.20501 4.42638 4.63255 4.42638 4.27946 4.77946C3.92638 5.13255 3.92638 5.70501 4.27946 6.0581L6.72137 8.5L4.27953 10.9418C3.92645 11.2949 3.92645 11.8674 4.27953 12.2205C4.63262 12.5736 5.20508 12.5736 5.55817 12.2205L8 9.77863L10.4419 12.2205C10.795 12.5736 11.3675 12.5736 11.7205 12.2205C12.0736 11.8675 12.0736 11.295 11.7205 10.9419L9.27863 8.5L11.7206 6.05801Z" fill="white"/>
       </g>
     </svg>;
+
+export const UnfoldMoreSvg =
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="unfold_more_FILL0_wght400_GRAD0_opsz48 1">
+      <path id="Vector" d="M7.82322 14.1768L8 14.3535L8.17678 14.1768L11.1768 11.1768L11.3536 11L11.1768 10.8232L10.4434 10.0899L10.2667 9.9131L10.0899 10.0899L8 12.1798L5.91011 10.0899L5.73333 9.9131L5.55656 10.0899L4.82322 10.8232L4.64645 11L4.82322 11.1768L7.82322 14.1768ZM5.55656 5.97676L5.73333 6.15354L5.91011 5.97676L8 3.88687L10.0899 5.97676L10.2667 6.15354L10.4434 5.97676L11.1768 5.24343L11.3536 5.06665L11.1768 4.88987L8.17678 1.88987L8 1.7131L7.82322 1.88987L4.82322 4.88987L4.64645 5.06665L4.82322 5.24343L5.55656 5.97676Z" fill="#808080" stroke="#808080" strokeWidth="0.5"/>
+      </g>
+    </svg>;
+
+export const FoldMoreSvg =
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="unfold_less_FILL0_wght400_GRAD0_opsz48 1">
+      <path id="Vector" d="M5.53989 13.5101L5.71667 13.6868L5.89344 13.5101L8 11.4035L10.1066 13.5101L10.2833 13.6868L10.4601 13.5101L11.1768 12.7934L11.3536 12.6166L11.1768 12.4398L8.17678 9.43985L8 9.26307L7.82322 9.43985L4.82322 12.4398L4.64645 12.6166L4.82322 12.7934L5.53989 13.5101ZM7.82322 6.56007L8 6.73685L8.17678 6.56007L11.1768 3.56007L11.3536 3.38329L11.1768 3.20652L10.4601 2.48985L10.2833 2.31307L10.1066 2.48985L8 4.59641L5.89344 2.48985L5.71667 2.31307L5.53989 2.48985L4.82322 3.20652L4.64645 3.38329L4.82322 3.56007L7.82322 6.56007Z" fill="#808080" stroke="#808080" strokeWidth="0.5"/>
+      </g>
+    </svg>;

src/js/tabular_comparison/tabular-comparison.module.css

@@ -183,6 +183,20 @@ body {
     text-overflow: ellipsis;
 }
 
+.truncate-table-cell {
+    white-space: nowrap;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.untruncate-table-cell {
+  white-space: break-spaces;
+  max-width: 100px;
+  overflow: visible;
+  vertical-align: baseline !important;
+}
+
 .geography-empty-state {
     text-align: center;
     margin-top: 22px;