feat(ui): add logLoss to modelQuality binary (#135)

radicalbit · Jul 25, 2024 · c9d407a · c9d407a
1 parent 1bd820d
commit c9d407a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {