updated linechart highlighting

2 files changed, 17 insertions, 12 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index c8daf7c90..56fcb1fcf 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -4,29 +4,34 @@
     height: fit-content;
 }
 
-.highlight {
-    // change the color of the circle element to be red
-    fill: red;
-}
-.focus-selected,
+.hoverHighlight-selected,
 .selected {
     // change the color of the circle element to be red
-    fill: lightblue;
+    fill: transparent;
+    outline: lightblue solid 2px;
+    border-radius: 100%;
     position: absolute;
     transform-box: fill-box;
-    scale: 2;
     transform-origin: center;
 }
-.focus {
+.hoverHighlight {
     fill: transparent;
     outline: black solid 1px;
     border-radius: 100%;
 }
-.focus-selected {
+.hoverHighlight-selected {
+    fill: transparent;
     scale: 1;
     outline: black solid 1px;
     border-radius: 100%;
 }
+.datapoint {
+    fill: black;
+}
+.brushed {
+    // change the color of the circle element to be red
+    fill: red;
+}
 .chart-container {
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 6a223e683..308ef4cba 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -110,7 +110,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const elements = document.querySelectorAll('.datapoint');
         for (let i = 0; i < elements.length; i++) {
             const element = elements[i];
-            element.classList.remove('highlight');
+            element.classList.remove('brushed');
             element.classList.remove('selected');
         }
     };
@@ -126,7 +126,7 @@ export class LineChart extends React.Component<LineChartProps> {
             const x = element.getAttribute('data-x');
             const y = element.getAttribute('data-y');
             if (x === dataX.toString() && y === dataY.toString()) {
-                element.classList.add(selected ? 'selected' : 'highlight');
+                element.classList.add(selected ? 'selected' : 'brushed');
             }
             // TODO: nda - this remove highlight code should go where we remove the links
             // } else {
@@ -290,7 +290,7 @@ export class LineChart extends React.Component<LineChartProps> {
         yScale: d3.ScaleLinear<number, number, never>,
         tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>
     ) {
-        higlightFocusPt.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`).attr('class', this._currSelected?.x === d0.x && this._currSelected?.y === d0.y ? 'focus-selected' : 'focus');
+        higlightFocusPt.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`).attr('class', this._currSelected?.x === d0.x && this._currSelected?.y === d0.y ? 'hoverHighlight-selected' : 'hoverHighlight');
         tooltip.transition().duration(300).style('opacity', 0.9);
         // TODO: nda - updating the inner html could be deadly cause injection attacks!
         tooltip