feat: add dynamic algorithm params form and clustering explorer validation

Author: constanzaru

DashAI/front/src/components/configurableObject/Inputs/SelectInput.jsx

@@ -22,6 +22,7 @@ function SelectInput({
   description,
   options,
   optionNames = undefined,
+  optionDescriptions = undefined,
 }) {
   const handleChange = (event) => {
     const inputValue = event.target.value;
@@ -58,12 +59,27 @@ function SelectInput({
                     display: "block",
                   },
                 },
+                secondary: {
+                  sx: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "normal",
+                    maxWidth: "100%",
+                    display: "block",
+                    lineHeight: 1.35,
+                  },
+                },
               }}
               primary={
                 optionNames !== undefined && index < options.length
                   ? optionNames[index]
                   : option
               }
+              secondary={
+                optionDescriptions !== undefined && index < options.length
+                  ? optionDescriptions[index]
+                  : undefined
+              }
             />
           </MenuItem>
         ))}
@@ -80,6 +96,7 @@ SelectInput.propTypes = {
   error: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   optionNames: PropTypes.arrayOf(PropTypes.string),
+  optionDescriptions: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default SelectInput;

DashAI/front/src/components/notebooks/ColumnSelector.jsx

@@ -40,6 +40,7 @@ function ColumnSelector({
   allowedDtypes = [],
   allowedTypes = [],
   typesDtypeRestrictions = {},
+  allowedColumnNames = null,
   onSelectionChange = () => {},
   onValidationChange = () => {},
   columnTypes = null,
@@ -156,6 +157,12 @@ function ColumnSelector({
     if (inputCardinality.exact === 0) return [];
     return rows
       .filter((row) => {
+        if (
+          allowedColumnNames !== null &&
+          !allowedColumnNames.has(row.columnName)
+        ) {
+          return false;
+        }
         if (allowedTypes.length > 0 && !allowedTypes.includes(row.valueType)) {
           return false;
         }
@@ -171,7 +178,13 @@ function ColumnSelector({
         return true;
       })
       .map((row) => row.id);
-  }, [rows, allowedDtypes, allowedTypes, typesDtypeRestrictions]);
+  }, [
+    rows,
+    allowedDtypes,
+    allowedTypes,
+    typesDtypeRestrictions,
+    allowedColumnNames,
+  ]);
 
   // Check if row is selectable - using useCallback for stability
   const isRowSelectable = useCallback(

DashAI/front/src/components/notebooks/RightBar.jsx

@@ -180,6 +180,31 @@ export default function RightBar({ notebook, onToggle }) {
       });
     }
 
+    // Restrict selectable columns to those used by the last converter (if required)
+    if (
+      explorer?.metadata?.restricts_to_converter_columns &&
+      explorer?.metadata?.requires_converter_class
+    ) {
+      const latestConverter = [...explorersAndConverters]
+        .filter(
+          (item) =>
+            item.type === "converter" &&
+            item.status === 3 &&
+            item.converter === explorer.metadata.requires_converter_class,
+        )
+        .sort((a, b) => (b.id || 0) - (a.id || 0))[0];
+      if (latestConverter) {
+        const converterColNames = new Set(
+          (latestConverter?.parameters?.scope?.columns || []).map(
+            (c) => c.columnName,
+          ),
+        );
+        validColumns = validColumns.filter((col) =>
+          converterColNames.has(col.columnName),
+        );
+      }
+    }
+
     // Check cardinality requirements
     if (inputCardinality.exact != null) {
       if (validColumns.length < inputCardinality.exact) {
@@ -218,6 +243,41 @@ export default function RightBar({ notebook, onToggle }) {
       })}`;
     }
 
+    // Check if a required converter class has been run and finished
+    const requiresConverterClass = explorer?.metadata?.requires_converter_class;
+    if (requiresConverterClass) {
+      const finishedConverters = explorersAndConverters.filter(
+        (item) =>
+          item.type === "converter" &&
+          item.status === 3 &&
+          item.converter === requiresConverterClass,
+      );
+      if (finishedConverters.length === 0) {
+        disabled = true;
+        tooltip += `\n\n${t("datasets:error.requiresConverter", {
+          converterClass: requiresConverterClass,
+        })}`;
+      } else {
+        // Check if a specific algorithm is required (e.g. hdbscan, agglomerative)
+        const requiresAlgorithm =
+          explorer?.metadata?.requires_algorithm?.toLowerCase();
+        if (requiresAlgorithm) {
+          const latest = [...finishedConverters].sort(
+            (a, b) => (b.id || 0) - (a.id || 0),
+          )[0];
+          const usedAlgorithm = (
+            latest?.parameters?.params?.algorithm?.toLowerCase() ?? ""
+          ).replace(/clustering$/, "");
+          if (usedAlgorithm !== requiresAlgorithm) {
+            disabled = true;
+            tooltip += `\n\n${t("datasets:error.requiresAlgorithm", {
+              algorithm: requiresAlgorithm,
+            })}`;
+          }
+        }
+      }
+    }
+
     return { disabled, tooltip, validColumns };
   };
 
@@ -273,7 +333,7 @@ export default function RightBar({ notebook, onToggle }) {
           notebook,
         };
       }),
-    [explorers, datasetColumns, notebook?.id],
+    [explorers, datasetColumns, notebook?.id, explorersAndConverters],
   );
 
   const validatedConverters = useMemo(

DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import FormSchemaButtonGroup from "../../shared/FormSchemaButtonGroup";
 import ColumnSelector from "../ColumnSelector";
 import { useTourContext } from "../../tour/TourProvider";
 import { useTranslation } from "react-i18next";
+import { useExplorersAndConverters } from "../context/ExplorersAndConvertersContext";
 
 export default function ScopeStepExplorer({
   notebook,
@@ -21,6 +22,25 @@ export default function ScopeStepExplorer({
   const typesDtypeRestrictions = tool?.metadata?.type_dtype_restrictions || {};
   const tourContext = useTourContext();
   const { t } = useTranslation(["datasets", "common"]);
+  const { explorersAndConverters } = useExplorersAndConverters();
+
+  const allowedColumnNames = useMemo(() => {
+    if (!tool?.metadata?.restricts_to_converter_columns) return null;
+    const requiresClass = tool?.metadata?.requires_converter_class;
+    if (!requiresClass) return null;
+    const latest = [...explorersAndConverters]
+      .filter(
+        (item) =>
+          item.type === "converter" &&
+          item.status === 3 &&
+          item.converter === requiresClass,
+      )
+      .sort((a, b) => (b.id || 0) - (a.id || 0))[0];
+    if (!latest) return null;
+    return new Set(
+      (latest?.parameters?.scope?.columns || []).map((c) => c.columnName),
+    );
+  }, [explorersAndConverters, tool?.metadata]);
 
   const handleSubmit = () => {
     nextStep();
@@ -53,6 +73,7 @@ export default function ScopeStepExplorer({
           allowedTypes={allowedTypes}
           allowedDtypes={allowedDtypes}
           typesDtypeRestrictions={typesDtypeRestrictions}
+          allowedColumnNames={allowedColumnNames}
           onSelectionChange={(selected) => setScopeColumns(selected)}
           onValidationChange={(isValid) => setIsSelectionValid(isValid)}
         />

DashAI/front/src/components/shared/FormSchemaField.jsx

@@ -47,6 +47,7 @@ function FormSchemaField({ objName, paramJsonSchema, field, error }) {
             {...commonProps}
             options={paramJsonSchema.enum}
             optionNames={paramJsonSchema.enumNames}
+            optionDescriptions={paramJsonSchema.optionDescriptions}
           />
         );
       } else {

DashAI/front/src/components/shared/FormSchemaFieldWithCollapse.jsx

@@ -19,8 +19,9 @@ function FormSchemaFieldWithCollapse({
   description,
   errorMessage,
   children,
+  defaultExpanded = false,
 }) {
-  const [showSection, setShowSection] = React.useState(false);
+  const [showSection, setShowSection] = React.useState(defaultExpanded);
   const { t } = useTranslation(["common"]);
 
   const toggleButton = (
@@ -56,6 +57,7 @@ FormSchemaFieldWithCollapse.propTypes = {
   description: PropTypes.string,
   errorMessage: PropTypes.string,
   children: PropTypes.node,
+  defaultExpanded: PropTypes.bool,
 };
 
 export default FormSchemaFieldWithCollapse;