From e60e4065f147feaa303112815ec31273a53c3a66 Mon Sep 17 00:00:00 2001
From: Michael Foster <m.foster@sheffield.ac.uk>
Date: Mon, 16 Dec 2024 17:22:15 +0000
Subject: [PATCH 1/5] Toggle text entities

---
 .../AssistantNEResult.jsx                     | 163 +++++++++---------
 src/redux/sagas/assistantSaga.jsx             |   1 +
 2 files changed, 86 insertions(+), 78 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
index c26a03cba..44a9d6116 100644
--- a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { useSelector } from "react-redux";
 
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import Card from "@mui/material/Card";
 import { CardHeader, Grid2, ListItemButton } from "@mui/material";
 import CardContent from "@mui/material/CardContent";
@@ -31,11 +33,22 @@ const AssistantNEResult = () => {
   const neLoading = useSelector((state) => state.assistant.neLoading);
 
   const [selectedIndex, setSelectedIndex] = useState(null);
-  //console.log("neResult ", neResult);
-  //console.log("neResultCount ", neResultCount);
   const handleCollapse = (index) => {
     index === selectedIndex ? setSelectedIndex(null) : setSelectedIndex(index);
   };
+  const [visibleCategories, setVisibleCategories] = useState(
+    neResult.reduce((acc, key) => {
+      acc[key.category.toLowerCase()] = false;
+      return acc;
+    }, {}),
+  );
+
+  const toggleCategory = (category) => {
+    setVisibleCategories({
+      ...visibleCategories,
+      [category]: !visibleCategories[category],
+    });
+  };
 
   function getCallback(callback) {
     return function (word, event) {
@@ -61,16 +74,16 @@ const AssistantNEResult = () => {
 
   const callbacks = {
     getWordColor: (word) => {
-      switch (word.category) {
-        case "Person":
+      switch (word.category.toLowerCase()) {
+        case "person":
           return "blue";
-        case "Location":
+        case "location":
           return "red";
-        case "Organization":
+        case "organization":
           return "green";
-        case "Hashtag":
+        case "hashtag":
           return "orange";
-        case "UserId":
+        case "userid":
           return "purple";
         default:
           return "black";
@@ -84,20 +97,36 @@ const AssistantNEResult = () => {
     onWordMouseOver: getCallback("onWordMouseOver"),
   };
 
-  function getWordColor(tag) {
-    switch (tag.category) {
-      case "Person":
-        return "blue";
-      case "Location":
-        return "red";
-      case "Organization":
-        return "green";
-      case "Hashtag":
-        return "orange";
-      case "UserId":
-        return "purple";
+  function getWordColor(tag, active = true) {
+    if (active) {
+      switch (tag.category.toLowerCase()) {
+        case "person":
+          return "blue";
+        case "location":
+          return "red";
+        case "organization":
+          return "green";
+        case "hashtag":
+          return "orange";
+        case "userid":
+          return "purple";
+        default:
+          return "black";
+      }
+    }
+    switch (tag.category.toLowerCase()) {
+      case "person":
+        return "darkblue";
+      case "location":
+        return "darkred";
+      case "organization":
+        return "darkgreen";
+      case "hashtag":
+        return "darkorange";
+      case "userid":
+        return "darkpurple";
       default:
-        return "black";
+        return "gray";
     }
   }
 
@@ -106,6 +135,7 @@ const AssistantNEResult = () => {
     verticalAlign: "middle",
     display: "inline-block",
   };
+
   const customRenderer = (tag, size, color) => {
     const { className, style, ...props } = tag.props || {};
     const fontSize = size + "px";
@@ -113,19 +143,31 @@ const AssistantNEResult = () => {
     const tagStyle = {
       ...styles,
       color: getWordColor(tag),
+      textDecorationColor: getWordColor(tag),
+      visibility: visibleCategories[tag.category.toLowerCase()]
+        ? "hidden"
+        : "visible",
       fontSize,
       ...style,
     };
 
+    console.log(tag.value, tag.category, tagStyle);
     let tagClassName = "tag-cloud-tag";
     if (className) {
       tagClassName += " " + className;
     }
 
     return (
-      <span key={key} style={tagStyle} className={tagClassName}>
+      <Link
+        key={key}
+        style={tagStyle}
+        className={tagClassName}
+        href={"https://www.google.com/search?q=" + tag.value}
+        rel="noopener noreferrer"
+        target={"_blank"}
+      >
         {tag.value}
-      </span>
+      </Link>
     );
   };
 
@@ -138,64 +180,29 @@ const AssistantNEResult = () => {
         />
         {neLoading && <LinearProgress />}
         <CardContent>
+          <ButtonGroup>
+            {neResult.map((tag, index) => (
+              <Button
+                style={{
+                  color: "white",
+                  border: "none",
+                  backgroundColor: getWordColor(
+                    tag,
+                    !visibleCategories[tag.category.toLowerCase()],
+                  ),
+                }}
+                onClick={() => toggleCategory(tag.category.toLowerCase())}
+              >
+                {tag.category}
+              </Button>
+            ))}
+          </ButtonGroup>
           <Grid2 container>
-            <Grid2
-              size={{ xs: 4 }}
-              style={{ maxHeight: 300, overflowY: "auto" }}
-            >
-              <List>
-                {neResult.map((value, index) => (
-                  <Box key={index}>
-                    <ListItemButton
-                      key={index}
-                      onClick={() => handleCollapse(index)}
-                    >
-                      <ListItemText
-                        primary={
-                          <Typography component={"div"} align={"left"}>
-                            <Box fontWeight="fontWeightBold">
-                              {value["category"]}
-                            </Box>
-                          </Typography>
-                        }
-                      />
-                      {index === selectedIndex ? (
-                        <ExpandLess />
-                      ) : (
-                        <ExpandMore />
-                      )}
-                    </ListItemButton>
-                    <Collapse in={index === selectedIndex}>
-                      <List component="div" disablePadding>
-                        {value["words"].map((v, k) => (
-                          <ListItem key={k}>
-                            <ListItemText>
-                              <Link
-                                href={
-                                  "https://www.google.com/search?q=" + v.value
-                                }
-                                rel="noopener noreferrer"
-                                target={"_blank"}
-                              >
-                                {v.value} &nbsp;
-                              </Link>
-                              ({v.count})
-                            </ListItemText>
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Collapse>
-                  </Box>
-                ))}
-              </List>
-            </Grid2>
-            <Grid2 size={{ xs: 1 }} align={"center"}>
-              <Divider orientation="vertical" />
-            </Grid2>
-            <Grid2 size={{ xs: 7 }} align={"center"}>
-              {/*<ReactWordcloud words={neResultCount} callbacks={callbacks} options={options}/>*/}
+            <Grid2 align={"center"}>
               <TagCloud
                 tags={neResultCount}
+                shuffle={false}
+                key={JSON.stringify(visibleCategories)} // This key will change when filteredData changes
                 minSize={20}
                 maxSize={45}
                 renderer={customRenderer}
diff --git a/src/redux/sagas/assistantSaga.jsx b/src/redux/sagas/assistantSaga.jsx
index 2772a627c..3c45fd7f7 100644
--- a/src/redux/sagas/assistantSaga.jsx
+++ b/src/redux/sagas/assistantSaga.jsx
@@ -560,6 +560,7 @@ function* handleNamedEntityCall(action) {
             return b.value - a.value;
           });
         });
+        categoryList.sort();
         yield put(
           setNeDetails(categoryList, wordCloudList, false, true, false),
         );

From e1ac3569aa3494eabea83ece556e442fd5d6bb4c Mon Sep 17 00:00:00 2001
From: Michael <jmafoster1@gmail.com>
Date: Tue, 17 Dec 2024 11:57:05 +0000
Subject: [PATCH 2/5] added a key for the buttons

---
 .../Assistant/AssistantCheckResults/AssistantNEResult.jsx    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
index 44a9d6116..7207778c9 100644
--- a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
@@ -13,9 +13,6 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
-import ListItem from "@mui/material/ListItem";
-import List from "@mui/material/List";
-import ListItemText from "@mui/material/ListItemText";
 //import ReactWordcloud from "react-wordcloud";
 import { TagCloud } from "react-tagcloud";
 import { select } from "d3-selection";
@@ -151,7 +148,6 @@ const AssistantNEResult = () => {
       ...style,
     };
 
-    console.log(tag.value, tag.category, tagStyle);
     let tagClassName = "tag-cloud-tag";
     if (className) {
       tagClassName += " " + className;
@@ -191,6 +187,7 @@ const AssistantNEResult = () => {
                     !visibleCategories[tag.category.toLowerCase()],
                   ),
                 }}
+                key={tag.category}
                 onClick={() => toggleCategory(tag.category.toLowerCase())}
               >
                 {tag.category}

From e254323bae52d9c072a0d3369ffe76ba092f421b Mon Sep 17 00:00:00 2001
From: Michael <jmafoster1@gmail.com>
Date: Mon, 6 Jan 2025 13:49:41 +0000
Subject: [PATCH 3/5] Wordcloud new colours with overlay when hidden

---
 .../AssistantNEResult.jsx                     | 93 ++++---------------
 .../Shared/MaterialUiStyles/useMyStyles.jsx   | 25 +++++
 2 files changed, 44 insertions(+), 74 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
index d369a2ff6..5a0bd9956 100644
--- a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
@@ -56,83 +56,26 @@ const AssistantNEResult = () => {
     });
   };
 
-  function getCallback(callback) {
-    return function (word, event) {
-      const isActive = callback !== "onWordMouseOut";
-      const element = event.target;
-      const text = select(element);
-      text
-        .on("click", () => {
-          if (isActive) {
-            window.open(`https://google.com/search?q=${word.text}`, "_blank");
-          }
-        })
-        .transition()
-        .attr("text-decoration", isActive ? "underline" : "none");
-    };
-  }
-
-  const options = {
-    rotations: 1,
-    rotationAngles: [0],
-    fontSizes: [15, 60],
-  };
-
-  const callbacks = {
-    getWordColor: (word) => {
-      switch (word.category.toLowerCase()) {
-        case "person":
-          return "blue";
-        case "location":
-          return "red";
-        case "organization":
-          return "green";
-        case "hashtag":
-          return "orange";
-        case "userid":
-          return "purple";
-        default:
-          return "black";
-      }
-    },
-    getWordTooltip: (word) => {
-      return word.text + " (" + word.category + "): " + word.value;
-    },
-    onWordClick: getCallback("onWordClick"),
-    onWordMouseOut: getCallback("onWordMouseOut"),
-    onWordMouseOver: getCallback("onWordMouseOver"),
-  };
-
-  function getWordColor(tag, active = true) {
-    if (active) {
-      switch (tag.category.toLowerCase()) {
-        case "person":
-          return "blue";
-        case "location":
-          return "red";
-        case "organization":
-          return "green";
-        case "hashtag":
-          return "orange";
-        case "userid":
-          return "purple";
-        default:
-          return "black";
-      }
-    }
+  function getWordColor(tag) {
     switch (tag.category.toLowerCase()) {
       case "person":
-        return "darkblue";
+        return "#648FFF";
+      // return "blue";
       case "location":
-        return "darkred";
+        return "#DC267F";
+      // return "red";
       case "organization":
-        return "darkgreen";
+        return "#FFB000";
+      // return "green";
       case "hashtag":
-        return "darkorange";
+        return "#FE6100";
+      // return "orange";
       case "userid":
-        return "darkpurple";
+        return "#785EF0";
+      // return "purple";
       default:
-        return "gray";
+        return "black";
+      // return "black";
     }
   }
 
@@ -203,13 +146,15 @@ const AssistantNEResult = () => {
           <ButtonGroup>
             {neResult.map((tag, index) => (
               <Button
+                className={
+                  visibleCategories[tag.category.toLowerCase()]
+                    ? classes.namedEntityButtonHidden
+                    : ""
+                }
                 style={{
                   color: "white",
                   border: "none",
-                  backgroundColor: getWordColor(
-                    tag,
-                    !visibleCategories[tag.category.toLowerCase()],
-                  ),
+                  backgroundColor: getWordColor(tag),
                 }}
                 key={tag.category}
                 onClick={() => toggleCategory(tag.category.toLowerCase())}
diff --git a/src/components/Shared/MaterialUiStyles/useMyStyles.jsx b/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
index 4331944bc..ae831e875 100644
--- a/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
+++ b/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
@@ -11,6 +11,31 @@ const styles = (theme) => ({
     textAlign: "center",
   },
 
+  namedEntityButtonHidden: {
+    "text-decoration": "line-through !important",
+    "&:after": {
+      background: "rgba(0, 0, 0, 0.3)",
+      content: '" "',
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    "&.MuiButtonGroup-firstButton": {
+      "&:after": {
+        "border-top-left-radius": "4px",
+        "border-bottom-left-radius": "4px",
+      },
+    },
+    "&.MuiButtonGroup-lastButton": {
+      "&:after": {
+        "border-top-right-radius": "4px",
+        "border-bottom-right-radius": "4px",
+      },
+    },
+  },
+
   rootNoCenter: {
     padding: theme.spacing(2),
   },

From 595e23c9ff4c1da7ec0d4d132e5b72d3ff560e57 Mon Sep 17 00:00:00 2001
From: Michael <jmafoster1@gmail.com>
Date: Mon, 6 Jan 2025 15:05:47 +0000
Subject: [PATCH 4/5] Using css filters for the tag cloud and tooltips to show
 count on hover

---
 .../AssistantNEResult.jsx                     | 28 ++++++++++---------
 .../Shared/MaterialUiStyles/useMyStyles.jsx   | 28 +++++--------------
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
index 5a0bd9956..6582590da 100644
--- a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
@@ -88,9 +88,11 @@ const AssistantNEResult = () => {
   const customRenderer = (tag, size, color) => {
     const { className, style, ...props } = tag.props || {};
     const fontSize = size + "px";
-    const key = tag.key || tag.value;
     const tagStyle = {
       ...styles,
+      "&:hover": {
+        color: "red !important",
+      },
       color: getWordColor(tag),
       textDecorationColor: getWordColor(tag),
       visibility: visibleCategories[tag.category.toLowerCase()]
@@ -100,22 +102,23 @@ const AssistantNEResult = () => {
       ...style,
     };
 
-    let tagClassName = "tag-cloud-tag";
+    let tagClassName = classes.tagCloudTag;
     if (className) {
       tagClassName += " " + className;
     }
 
     return (
-      <Link
-        key={key}
-        style={tagStyle}
-        className={tagClassName}
-        href={"https://www.google.com/search?q=" + tag.value}
-        rel="noopener noreferrer"
-        target={"_blank"}
-      >
-        {tag.value}
-      </Link>
+      <Tooltip key={tag.key || tag.value} title={tag.count} arrow>
+        <Link
+          style={tagStyle}
+          className={tagClassName}
+          href={"https://www.google.com/search?q=" + tag.value}
+          rel="noopener noreferrer"
+          target={"_blank"}
+        >
+          {tag.value}
+        </Link>
+      </Tooltip>
     );
   };
 
@@ -168,7 +171,6 @@ const AssistantNEResult = () => {
               <TagCloud
                 tags={neResultCount}
                 shuffle={false}
-                key={JSON.stringify(visibleCategories)} // This key will change when filteredData changes
                 minSize={20}
                 maxSize={45}
                 renderer={customRenderer}
diff --git a/src/components/Shared/MaterialUiStyles/useMyStyles.jsx b/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
index ae831e875..9a31198ec 100644
--- a/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
+++ b/src/components/Shared/MaterialUiStyles/useMyStyles.jsx
@@ -12,27 +12,13 @@ const styles = (theme) => ({
   },
 
   namedEntityButtonHidden: {
-    "text-decoration": "line-through !important",
-    "&:after": {
-      background: "rgba(0, 0, 0, 0.3)",
-      content: '" "',
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-    },
-    "&.MuiButtonGroup-firstButton": {
-      "&:after": {
-        "border-top-left-radius": "4px",
-        "border-bottom-left-radius": "4px",
-      },
-    },
-    "&.MuiButtonGroup-lastButton": {
-      "&:after": {
-        "border-top-right-radius": "4px",
-        "border-bottom-right-radius": "4px",
-      },
+    textDecoration: "line-through !important",
+    filter: "brightness(80%)",
+  },
+
+  tagCloudTag: {
+    "&:hover": {
+      filter: "brightness(80%)",
     },
   },
 

From 177ad05084d52adf34b6327810c573153126a77e Mon Sep 17 00:00:00 2001
From: Michael Foster <m.foster@sheffield.ac.uk>
Date: Thu, 16 Jan 2025 10:44:16 +0000
Subject: [PATCH 5/5] Added some padding

---
 .../Assistant/AssistantCheckResults/AssistantNEResult.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
index 6582590da..68462555b 100644
--- a/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
@@ -146,7 +146,7 @@ const AssistantNEResult = () => {
         />
         {neLoading && <LinearProgress />}
         <CardContent>
-          <ButtonGroup>
+          <ButtonGroup sx={{ paddingBottom: "15px" }}>
             {neResult.map((tag, index) => (
               <Button
                 className={