feat(ui): regression scaffolding

ui/src/container/models/Details/index.jsx

@@ -3,6 +3,7 @@ import { modelsApiSlice } from '@State/models/api';
 import { useParams } from 'react-router-dom';
 import BinaryClassificationMetrics from './binary-classification';
 import MultiClassificationMetrics from './multi-classification';
+import RegressionMetrics from './regression';
 
 const { useGetModelByUUIDQuery } = modelsApiSlice;
 
@@ -13,6 +14,9 @@ export function ModelDetails() {
   const modelType = data?.modelType;
 
   switch (modelType) {
+    case ModelTypeEnum.REGRESSION:
+      return <RegressionMetrics />;
+
     case ModelTypeEnum.BINARY_CLASSIFICATION:
       return <BinaryClassificationMetrics />;
 

ui/src/container/models/Details/regression/current/data-drift/header/index.jsx

@@ -0,0 +1,180 @@
+import { DRIFT_TEST_ENUM } from '@Src/constants';
+import { useGetCurrentDriftQueryWithPolling } from '@Src/store/state/models/polling-hook';
+import { Board, SectionTitle } from '@radicalbit/radicalbit-design-system';
+
+function DataDriftHeader() {
+  return (
+    <div className="flex gap-4 mt-4">
+      <div className="basis-1/3">
+        <TotalFeaturesCounter />
+      </div>
+
+      <div className="basis-1/3">
+        <CategoricalFeaturesCounter />
+      </div>
+
+      <div className="basis-1/3">
+        <NumericalFeaturesCounter />
+      </div>
+    </div>
+  );
+}
+
+function TotalFeaturesCounter() {
+  const { data } = useGetCurrentDriftQueryWithPolling();
+  const featureMetrics = data?.drift.featureMetrics.filter((feature) => feature.driftCalc.hasDrift) ?? [];
+  const featuresWithDriftCounter = featureMetrics.length;
+  const featuresCounter = data?.drift.featureMetrics.length;
+
+  if (featuresCounter === 0) {
+    return (
+      <Board
+        header={<SectionTitle size="small" />}
+        main={(
+          <div className="flex flex-col h-full items-center justify-center gap-4">
+            {/* FIXME: inline style */}
+            <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>--</div>
+
+            <div>Features with drift</div>
+          </div>
+          )}
+        modifier="h-full shadow"
+        size="small"
+      />
+    );
+  }
+
+  return (
+    <Board
+      header={<SectionTitle size="small" />}
+      main={(
+        <div className="flex flex-col h-full items-center justify-center gap-4">
+          {/* FIXME: inline style */}
+          <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>
+            {featuresWithDriftCounter}
+
+            <small>
+              /
+              {featuresCounter}
+            </small>
+          </div>
+
+          <div>Features with drift</div>
+        </div>
+        )}
+      modifier="h-full shadow"
+      size="small"
+      type="primary"
+    />
+
+  );
+}
+
+function CategoricalFeaturesCounter() {
+  const { data } = useGetCurrentDriftQueryWithPolling();
+
+  const featureMetrics = data?.drift.featureMetrics ?? [];
+  const categoricalWithDriftCounter = featureMetrics.filter((feature) => feature.driftCalc.type === DRIFT_TEST_ENUM.CHI2 && feature.driftCalc.hasDrift).length;
+  const categoricalCounter = featureMetrics.filter((feature) => feature.driftCalc.type === DRIFT_TEST_ENUM.CHI2).length;
+
+  if (categoricalCounter === 0) {
+    return (
+      <Board
+        header={<SectionTitle size="small" />}
+        main={(
+          <div className="flex flex-col h-full items-center">
+
+            {/* FIXME: inline style */}
+            <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>--</div>
+
+            <div>Categorical with drift</div>
+          </div>
+          )}
+        modifier="h-full"
+        size="small"
+      />
+    );
+  }
+
+  return (
+    <Board
+      header={<SectionTitle size="small" />}
+      main={(
+        <div className="flex flex-col h-full items-center justify-center gap-4">
+          <div className="flex items-end">
+            {/* FIXME: inline style */}
+            <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>
+              {categoricalWithDriftCounter}
+
+              <small>
+                /
+                {categoricalCounter}
+              </small>
+            </div>
+
+          </div>
+
+          <div>Categorical with drift</div>
+        </div>
+        )}
+      modifier="h-full"
+      size="small"
+    />
+  );
+}
+
+function NumericalFeaturesCounter() {
+  const { data } = useGetCurrentDriftQueryWithPolling();
+
+  const featureMetrics = data?.drift.featureMetrics ?? [];
+
+  const numericalWithDriftCounter = featureMetrics.filter((feature) => feature.driftCalc.type === DRIFT_TEST_ENUM.KS && feature.driftCalc.hasDrift).length;
+  const numericalCounter = featureMetrics.filter((feature) => feature.driftCalc.type === DRIFT_TEST_ENUM.KS).length;
+
+  if (numericalCounter === 0) {
+    return (
+      <Board
+        header={<SectionTitle size="small" />}
+        main={(
+          <div className="flex flex-col h-full items-center gap-4">
+
+            {/* FIXME: inline style */}
+            <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>--</div>
+
+            <div>Numerical with drift</div>
+          </div>
+          )}
+        modifier="h-full shadow"
+        size="small"
+      />
+    );
+  }
+
+  return (
+    <Board
+      header={<SectionTitle size="small" />}
+      main={(
+        <div className="flex flex-col h-full items-center justify-center gap-4">
+          <div className="flex items-center">
+            {/* FIXME: inline style */}
+            <div className="font-bold text-6xl" style={{ fontFamily: 'var(--coo-header-font)' }}>
+              {numericalWithDriftCounter}
+
+              <small>
+                /
+                {numericalCounter}
+              </small>
+            </div>
+
+          </div>
+
+          <div>Numerical with drift</div>
+        </div>
+        )}
+      modifier="h-full shadow"
+      size="small"
+    />
+  );
+}
+
+export default DataDriftHeader;

ui/src/container/models/Details/regression/current/data-drift/index.jsx

@@ -0,0 +1,54 @@
+import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
+import JobStatus from '@Components/JobStatus';
+import { JOB_STATUS } from '@Src/constants';
+import { useGetCurrentDriftQueryWithPolling } from '@State/models/polling-hook';
+import { FormbitContextProvider } from '@radicalbit/formbit';
+import { Spinner } from '@radicalbit/radicalbit-design-system';
+
+import DataDriftList from './list';
+import DataDriftHeader from './header';
+import SearchFeatureList from './search-filter';
+
+const initialValues = {
+  __metadata: {
+    selectedFeatures: [],
+    isNumericalSelected: true,
+    isCategoricalSelected: true,
+  },
+};
+
+function MultiClassificationDataDriftMetrics() {
+  const { data, isError, isLoading } = useGetCurrentDriftQueryWithPolling();
+
+  const jobStatus = data?.jobStatus;
+
+  if (isLoading) {
+    return <Spinner spinning />;
+  }
+
+  if (isError) {
+    return <SomethingWentWrong />;
+  }
+
+  if (!data) {
+    return <JobStatus jobStatus={JOB_STATUS.MISSING_CURRENT} />;
+  }
+
+  if (jobStatus === JOB_STATUS.SUCCEEDED) {
+    return (
+      <FormbitContextProvider initialValues={initialValues}>
+        <div className="flex flex-col gap-4 h-full">
+          <DataDriftHeader />
+
+          <SearchFeatureList />
+
+          <DataDriftList />
+        </div>
+      </FormbitContextProvider>
+    );
+  }
+
+  return (<JobStatus jobStatus={jobStatus} />);
+}
+
+export default MultiClassificationDataDriftMetrics;

ui/src/container/models/Details/regression/current/data-drift/list/index.jsx

@@ -0,0 +1,114 @@
+import {
+  DRIFT_FEATURE_TYPE_ENUM, DRIFT_TEST_ENUM, DRIFT_TEST_ENUM_LABEL, numberFormatter,
+} from '@Src/constants';
+import { fa1, faC } from '@fortawesome/free-solid-svg-icons';
+import {
+  Board,
+  Button,
+  FontAwesomeIcon,
+  NewHeader,
+  Pin,
+  SectionTitle,
+  Spinner,
+  Tag,
+} from '@radicalbit/radicalbit-design-system';
+import { Virtuoso } from 'react-virtuoso';
+import useGetFilteredFeatures from '../use-get-filtered-features';
+
+function DataDriftList() {
+  const items = useGetFilteredFeatures();
+
+  return (
+    <Spinner fullHeight fullWidth>
+      <CountLabel />
+
+      <Virtuoso
+        data={items}
+        itemContent={(idx, item) => (<FeatureRow key={idx} item={item} />)}
+        totalCount={items.length}
+      />
+    </Spinner>
+  );
+}
+
+function CountLabel() {
+  const items = useGetFilteredFeatures();
+  const label = items.length <= 1 ? 'Record' : 'Records';
+
+  return (
+    <label>
+      {`${label} ${items.length}`}
+    </label>
+  );
+}
+
+function FeatureRow({ item }) {
+  const pinType = (item.driftCalc.hasDrift) ? 'filled-error' : 'filled';
+  const isError = (item.driftCalc.hasDrift) ? 'is-error' : '';
+  const value = (item.driftCalc.value > 0) ? numberFormatter().format(item.driftCalc.value) : '--';
+  const buttonIcon = getButtonIcon(item.driftCalc.type);
+
+  return (
+    <Board
+      key={item.featureName}
+      header={(
+        <NewHeader
+          details={{
+            one: (
+              <div className="flex gap-4 justify-start">
+
+                {DRIFT_TEST_ENUM_LABEL[item.driftCalc.type]}
+
+                <p className={`${isError} m-0`}>
+                  <b className="font-[var(--coo-font-weight-bold)]">
+                    {value}
+
+                    {' '}
+                  </b>
+
+                </p>
+              </div>
+            ),
+            two: (
+              <Button
+                shape="circle"
+                size="small"
+                type="primary"
+              >
+                <FontAwesomeIcon icon={buttonIcon} />
+              </Button>
+            ),
+          }}
+          title={(
+            <div className="flex gap-2">
+              <Pin type={pinType} />
+
+              <SectionTitle
+                size="small"
+                title={item.featureName}
+                titleSuffix={<Tag mode="text" type="secondary-light">{DRIFT_FEATURE_TYPE_ENUM[item.driftCalc.type].toUpperCase()}</Tag>}
+              />
+            </div>
+          )}
+        />
+      )}
+      modifier="my-4 "
+      size="small"
+    />
+  );
+}
+
+const getButtonIcon = (value) => {
+  switch (value) {
+    case DRIFT_TEST_ENUM.KS:
+      return fa1;
+
+    case DRIFT_TEST_ENUM.CHI2:
+      return faC;
+
+    default:
+      return '';
+  }
+};
+
+export default DataDriftList;