fixed more unique key errors

AFP-Medialab · Aug 20, 2024 · a66fdfd · a66fdfd
1 parent 89b7df1
commit a66fdfd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextClassification.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextClassification.jsx
@@ -24,6 +24,7 @@ import {
   wrapPlainTextSpan,
 } from "./assistantUtils";
 import ColourGradientTooltipContent from "./ColourGradientTooltipContent";
+import { v4 as uuidv4 } from "uuid";
 
 import "./assistantTextResultStyle.css";
 
@@ -257,7 +258,7 @@ export function ClassifiedText({
     if (bgLuminance > 0.7) textColour = "black";
 
     return (
-      <Tooltip title={tooltipText}>
+      <Tooltip key={uuidv4()} title={tooltipText}>
         <span
           style={{
             background: rgbToString(backgroundRgb),

diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextSpanClassification.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextSpanClassification.jsx
@@ -22,6 +22,7 @@ import {
 } from "./assistantUtils";
 import ColourGradientTooltipContent from "./ColourGradientTooltipContent";
 import { styled } from "@mui/system";
+import { v4 as uuidv4 } from "uuid";
 
 // Had to create a custom styled span as the default style attribute does not support
 // :hover metaclass
@@ -51,9 +52,17 @@ export default function AssistantTextSpanClassification({
   const tooltipTextLowThreshold = keyword("low_confidence");
   const tooltipTextHighThreshold = keyword("high_confidence");
 
+  // console.log("keyword(helpDescription)=", keyword(helpDescription));
+  // console.log("keyword(\"colour_scale\")=", keyword("colour_scale"));
+  // console.log("tooltipTextLowThreshold=", tooltipTextLowThreshold);
+  // console.log("tooltipTextHighThreshold=", tooltipTextHighThreshold);
+  // console.log("configs.confidenceRgbLow=", configs.confidenceRgbLow);
+  // console.log("configs.confidenceRgbHigh=", configs.confidenceRgbHigh);
+
   const confidenceTooltipContent = (
     <ColourGradientTooltipContent
       description={keyword(helpDescription)}
+      colourScaleText={keyword("colour_scale")}
       textLow={tooltipTextLowThreshold}
       textHigh={tooltipTextHighThreshold}
       rgbLow={configs.confidenceRgbLow}
@@ -115,7 +124,9 @@ export default function AssistantTextSpanClassification({
     let textColour = "black";
 
     let techniqueContent = [];
-    techniqueContent.push(<h2>{keyword("detected_techniques")}</h2>);
+    techniqueContent.push(
+      <h2 key={uuidv4()}>{keyword("detected_techniques")}</h2>,
+    );
 
     for (let persuasionTechnique in spanInfo.techniques) {
       const techniqueScore = spanInfo.techniques[persuasionTechnique];
@@ -168,6 +179,7 @@ export default function AssistantTextSpanClassification({
     let techniquesTooltip = (
       <ColourGradientTooltipContent
         description={techniqueContent}
+        colourScaleText={keyword("colour_scale")}
         textLow={tooltipTextLowThreshold}
         textHigh={tooltipTextHighThreshold}
         rgbLow={configs.confidenceRgbLow}
@@ -177,7 +189,7 @@ export default function AssistantTextSpanClassification({
 
     // Append highlighted text
     return (
-      <Tooltip title={techniquesTooltip}>
+      <Tooltip key={uuidv4()} title={techniquesTooltip}>
         <StyledSpan
           sx={{
             background: rgbToString(backgroundRgb),