From 24b546c83774b03d65f25b9ca320b1f835753cfe Mon Sep 17 00:00:00 2001
From: Mariano Gonzalez Salazar <mariano.gonzalez@intelygenz.com>
Date: Wed, 7 Oct 2020 10:22:34 +0200
Subject: [PATCH] feat(admin-ui): make confusion matrix X labels diagonal and
 ellipse them when too long. (#364)

---
 .../ConfusionMatrix/ConfusionMatrixChart.tsx  | 12 ++++++--
 .../ConfusionMatrix/ConfusionMatrixViz.tsx    | 29 ++++++++++++++++---
 .../ConfusionMatrixBox/ConfusionMatrixBox.tsx |  4 ++-
 .../Metrics/components/Charts/Charts.tsx      |  1 +
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixChart.tsx b/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixChart.tsx
index b40e06c7e..955a949b6 100644
--- a/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixChart.tsx
+++ b/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixChart.tsx
@@ -10,9 +10,16 @@ type Props = {
   width: number;
   height: number;
   margin: Margin;
+  ellipseLabels: boolean;
 };
 
-function ConfusionMatrixChart({ data, width, height, margin }: Props) {
+function ConfusionMatrixChart({
+  data,
+  width,
+  height,
+  margin,
+  ellipseLabels
+}: Props) {
   const viz = useRef<ConfusionMatrixViz | null>(null);
   const svg = useRef<SVGSVGElement>(null);
   const tooltip = useRef<HTMLDivElement>(null);
@@ -29,7 +36,8 @@ function ConfusionMatrixChart({ data, width, height, margin }: Props) {
         width,
         height,
         data,
-        margin
+        margin,
+        ellipseLabels
       };
       viz.current = new ConfusionMatrixViz(
         svg.current,
diff --git a/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixViz.tsx b/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixViz.tsx
index a222f6c04..454125322 100644
--- a/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixViz.tsx
+++ b/admin/admin-ui/src/Components/Chart/ConfusionMatrix/ConfusionMatrixViz.tsx
@@ -36,6 +36,7 @@ const TEXT_COLOR = {
   DARK: '#00252E',
   LIGHT: '#CCF5FF'
 };
+const X_AXIS_MAX_LABEL_LENGTH = 20;
 
 function getTooltipContent(d: D) {
   return (
@@ -57,6 +58,7 @@ type Props = {
   height: number;
   margin: Margin;
   data: D[];
+  ellipseLabels: boolean;
 };
 
 class ConfusionMatrixViz {
@@ -157,9 +159,11 @@ class ConfusionMatrixViz {
   };
 
   createAxes = () => {
-    const { xScale, yScale, g, innerHeight, axisBoxSide } = this;
+    const { xScale, yScale, g, innerHeight, axisBoxSide, ellipseLabel } = this;
 
-    const xAxis = axisBottom(xScale).tickSize(0);
+    const xAxis = axisBottom(xScale)
+      .tickSize(0)
+      .tickFormat(ellipseLabel);
     const yAxis = axisLeft(yScale)
       .ticks(0)
       .tickSize(0);
@@ -179,11 +183,19 @@ class ConfusionMatrixViz {
       .attr('transform', `translate(${-axisBoxSide - AXIS_PADDING},0)`)
       .call(yAxis);
 
-    rotateAxis(xAxisG, -90);
+    rotateAxis(xAxisG, -45);
 
     // Remove unwanted axes lines
     yAxisG.select('.domain').remove();
     xAxisG.select('.domain').remove();
+
+    // Better aligns the X axis labels and adds a title
+    xAxisG
+      .selectAll('text')
+      .attr('dx', 0)
+      .attr('dy', 0)
+      .append('svg:title')
+      .text(d => `${d}`);
   };
 
   createAxisBoxes = () => {
@@ -340,16 +352,25 @@ class ConfusionMatrixViz {
     }
   };
 
+  ellipseLabel = (label: string) => {
+    if (!this.props.ellipseLabels) return label;
+
+    return label.length > X_AXIS_MAX_LABEL_LENGTH
+      ? `${label.slice(0, X_AXIS_MAX_LABEL_LENGTH)}...`
+      : label;
+  };
+
   getPaddings = () => {
     const {
       svg,
       xDomain,
       yDomain,
       axisBoxSide,
+      ellipseLabel,
       props: { width }
     } = this;
 
-    let xAxisHeight = getAxisHeight(svg, xDomain, -90);
+    let xAxisHeight = getAxisHeight(svg, xDomain.map(ellipseLabel), -45);
     let yAxisWidth = getAxisWidth(svg, yDomain);
 
     const leftAxisPadding = axisBoxSide + yAxisWidth + AXIS_PADDING;
diff --git a/admin/admin-ui/src/Pages/Version/pages/Metrics/boxes/ConfusionMatrixBox/ConfusionMatrixBox.tsx b/admin/admin-ui/src/Pages/Version/pages/Metrics/boxes/ConfusionMatrixBox/ConfusionMatrixBox.tsx
index 779d12b78..9b0c7b901 100644
--- a/admin/admin-ui/src/Pages/Version/pages/Metrics/boxes/ConfusionMatrixBox/ConfusionMatrixBox.tsx
+++ b/admin/admin-ui/src/Pages/Version/pages/Metrics/boxes/ConfusionMatrixBox/ConfusionMatrixBox.tsx
@@ -23,8 +23,9 @@ type Props = {
   nodeId?: string;
   data: GetMetrics_metrics_charts_confusionMatrix[];
   info: string;
+  expanded: boolean;
 };
-function ConfusionMatrixBox({ toggleExpanded, nodeId, data, info }: Props) {
+function ConfusionMatrixBox({ toggleExpanded, nodeId, data, info, expanded }: Props) {
   const container = useRef(null);
   const { width, height } = useRenderOnResize({ container });
   return (
@@ -47,6 +48,7 @@ function ConfusionMatrixBox({ toggleExpanded, nodeId, data, info }: Props) {
             left: 14
           }}
           data={formatData(data)}
+          ellipseLabels={!expanded}
         />
       </div>
     </Box>
diff --git a/admin/admin-ui/src/Pages/Version/pages/Metrics/components/Charts/Charts.tsx b/admin/admin-ui/src/Pages/Version/pages/Metrics/components/Charts/Charts.tsx
index df963772d..c428207c0 100644
--- a/admin/admin-ui/src/Pages/Version/pages/Metrics/components/Charts/Charts.tsx
+++ b/admin/admin-ui/src/Pages/Version/pages/Metrics/components/Charts/Charts.tsx
@@ -102,6 +102,7 @@ function Charts({ data, expanded, toggleExpanded, viewAllData }: Props) {
               toggleExpanded={toggleExpanded}
               nodeId={'r2'}
               data={data.metrics.charts.confusionMatrix}
+              expanded={nodesToExpand.includes('r2')}
               info={INFO.CONFUSION_MATRIX}
             />
           </Row>