From c9d407ac47f2f0611d80ea8f00bfe3582f70d9d6 Mon Sep 17 00:00:00 2001
From: Davide Valleri <146823822+dvalleri@users.noreply.github.com>
Date: Thu, 25 Jul 2024 15:43:29 +0200
Subject: [PATCH] feat(ui): add logLoss to modelQuality binary (#135)

---
 .../current/model-quality/charts.jsx          | 25 ++++++++++++++++++-
 .../current/model-quality/columns.jsx         |  2 +-
 .../current/model-quality/index.jsx           | 10 ++++++++
 .../reference/model-quality/columns.jsx       |  2 +-
 .../reference/model-quality/index.jsx         |  1 +
 ui/src/container/models/Details/constants.js  |  1 +
 6 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx b/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx
index b73b3d94..603c6075 100644
--- a/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx
+++ b/ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx
@@ -193,8 +193,31 @@ function AreaUnderPrChart() {
   return false;
 }
 
+function LogLossChart() {
+  const { uuid } = useParams();
+  const { data: currentData } = useGetCurrentModelQualityQueryWithPolling();
+  const { data: referenceData } = useGetReferenceModelQualityQuery({ uuid });
+
+  const referenceAreaUnderPr = referenceData?.modelQuality?.logLoss;
+  const currentSeries = currentData?.modelQuality?.groupedMetrics?.logLoss;
+
+  if (currentSeries && currentSeries !== null) {
+    const referenceSeries = currentSeries.map((o) => ({ ...o, value: referenceAreaUnderPr }));
+
+    return (
+      <LineChart
+        color={CHART_COLOR.CURRENT}
+        currentData={currentSeries}
+        referenceData={referenceSeries}
+        title={MODEL_QUALITY_FIELD.LOG_LOSS}
+      />
+    );
+  }
+  return false;
+}
+
 export {
   AccuracyChart, AreaUnderPrChart, AreaUnderRocChart, F1Chart,
   FalsePositiveRateChart, PrecisionChart,
-  RecallChart, TruePositiveRateChart,
+  RecallChart, TruePositiveRateChart, LogLossChart,
 };
diff --git a/ui/src/container/models/Details/binary-classification/current/model-quality/columns.jsx b/ui/src/container/models/Details/binary-classification/current/model-quality/columns.jsx
index af9e84cf..8e3f02d1 100644
--- a/ui/src/container/models/Details/binary-classification/current/model-quality/columns.jsx
+++ b/ui/src/container/models/Details/binary-classification/current/model-quality/columns.jsx
@@ -12,7 +12,7 @@ export default [
     key: 'currentValue',
     dataIndex: 'currentValue',
     align: 'right',
-    render: (currentValue) => numberFormatter().format(currentValue),
+    render: (currentValue) => (currentValue) ? numberFormatter().format(currentValue) : '--',
   },
   {
     title: 'Reference',
diff --git a/ui/src/container/models/Details/binary-classification/current/model-quality/index.jsx b/ui/src/container/models/Details/binary-classification/current/model-quality/index.jsx
index 0e9109f3..576aa344 100644
--- a/ui/src/container/models/Details/binary-classification/current/model-quality/index.jsx
+++ b/ui/src/container/models/Details/binary-classification/current/model-quality/index.jsx
@@ -17,6 +17,7 @@ import {
   AreaUnderRocChart,
   F1Chart,
   FalsePositiveRateChart,
+  LogLossChart,
   PrecisionChart,
   RecallChart,
   TruePositiveRateChart,
@@ -70,6 +71,8 @@ function BinaryClassificationModelQualityMetrics() {
 
           <FalsePositiveRateChart />
 
+          <LogLossChart />
+
           <ConfusionMatrix
             colors={[CHART_COLOR.WHITE, CHART_COLOR.CURRENT]}
             dataset={confusionMatrixData}
@@ -101,6 +104,7 @@ function PerformanceBoard() {
   const referenceTruePositiveRate = referenceData?.modelQuality?.truePositiveRate;
   const referenceAreaUnderRoc = referenceData?.modelQuality?.areaUnderRoc;
   const referenceAreaUnderPr = referenceData?.modelQuality?.areaUnderPr;
+  const referenceLogLoss = referenceData?.modelQuality?.logLoss;
 
   const leftTableData = currentData ? [
     {
@@ -136,6 +140,12 @@ function PerformanceBoard() {
       referenceValue: referenceTruePositiveRate,
       currentValue: currentData.modelQuality.globalMetrics.truePositiveRate,
     },
+    {
+      label: MODEL_QUALITY_FIELD.LOG_LOSS,
+      referenceValue: referenceLogLoss,
+      currentValue: currentData.modelQuality.globalMetrics.logLoss,
+    },
+
   ] : [];
 
   const rightTableData = currentData ? [
diff --git a/ui/src/container/models/Details/binary-classification/reference/model-quality/columns.jsx b/ui/src/container/models/Details/binary-classification/reference/model-quality/columns.jsx
index bc485a55..fd098b46 100644
--- a/ui/src/container/models/Details/binary-classification/reference/model-quality/columns.jsx
+++ b/ui/src/container/models/Details/binary-classification/reference/model-quality/columns.jsx
@@ -12,6 +12,6 @@ export default [
     key: 'value',
     dataIndex: 'value',
     align: 'right',
-    render: (value) => numberFormatter().format(value),
+    render: (value) => (value) ? numberFormatter().format(value) : '--',
   },
 ];
diff --git a/ui/src/container/models/Details/binary-classification/reference/model-quality/index.jsx b/ui/src/container/models/Details/binary-classification/reference/model-quality/index.jsx
index 0a0abd4f..fb3642ce 100644
--- a/ui/src/container/models/Details/binary-classification/reference/model-quality/index.jsx
+++ b/ui/src/container/models/Details/binary-classification/reference/model-quality/index.jsx
@@ -26,6 +26,7 @@ function BinaryClassificationModelQualityMetrics() {
     const centerTableData = data ? [
       { label: 'False positive rate', value: data.modelQuality.falsePositiveRate },
       { label: 'True positive rate', value: data.modelQuality.truePositiveRate },
+      { label: 'Log loss', value: data.modelQuality.logLoss },
     ] : [];
 
     const rightTableData = data ? [
diff --git a/ui/src/container/models/Details/constants.js b/ui/src/container/models/Details/constants.js
index 8ad518f6..8f31e7c3 100644
--- a/ui/src/container/models/Details/constants.js
+++ b/ui/src/container/models/Details/constants.js
@@ -45,6 +45,7 @@ export const MODEL_QUALITY_FIELD = {
   R2: 'R-squared',
   ADJ_R2: 'Adjusted R-squared',
   VARIANCE: 'Variance',
+  LOG_LOSS: 'Log loss',
 };
 
 export const TABLE_COLOR = {