@datagrok/eda 1.2.1 → 1.2.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@datagrok/eda",
   "friendlyName": "EDA",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Exploratory Data Analysis Tools",
   "dependencies": {
     "@datagrok-libraries/math": "^1.2.0",
     "@datagrok-libraries/ml": "^6.7.0",
-    "@datagrok-libraries/tutorials": "^1.4.0",
+    "@datagrok-libraries/tutorials": "^1.4.2",
     "@datagrok-libraries/utils": "^4.3.0",
     "@keckelt/tsne": "^1.0.2",
     "@webgpu/types": "^0.1.40",
@@ -16,7 +16,7 @@
     "jstat": "^1.9.6",
     "source-map-loader": "^4.0.1",
     "umap-js": "^1.3.3",
-    "worker-loader": "latest"
+    "worker-loader": "^3.0.8"
   },
   "author": {
     "name": "Viktor Makarichev",
@@ -25,14 +25,14 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
-    "css-loader": "latest",
+    "css-loader": "^7.1.2",
     "eslint": "^8.21.0",
     "eslint-config-google": "^0.14.0",
-    "style-loader": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest",
-    "webpack-cli": "latest"
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
   },
   "scripts": {
     "link-all": "npm link datagrok-api @datagrok-libraries/utils @datagrok-libraries/tutorials",
@@ -40,6 +40,7 @@
     "release-eda": "webpack && grok publish --release",
     "build-eda": "webpack",
     "build": "webpack",
+    "test": "grok test",
     "debug-eda-dev": "webpack && grok publish dev",
     "release-eda-dev": "webpack && grok publish dev --release",
     "debug-eda-local": "webpack && grok publish local",
@@ -92,4 +93,4 @@
       }
     }
   }
-}
+}

package/src/anova/anova-tools.ts

@@ -0,0 +1,308 @@
+// Analysis of Variances (ANOVA): computations
+
+/* REFERENCES
+
+     [1] One-way analysis of variance, https://en.wikipedia.org/wiki/One-way_analysis_of_variance
+
+     [2] G.W. Heiman. Basic Statistics for the Behavioral Sciences, 6th ed. Wadsworth Publishing, 2010
+
+     [3] F-test of equality of variances, https://en.wikipedia.org/wiki/F-test_of_equality_of_variances
+
+     [4] S. McKillup. Statistics Explained, Cambridge University Press, 2005
+
+*/
+
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+//@ts-ignore: no types
+import * as jStat from 'jstat';
+
+import {getNullValue} from '../missing-values-imputation/knn-imputer';
+
+enum ERROR_MSG {
+  NON_EQUAL_FACTORS_VALUES_SIZE = 'non-equal sizes of factor and values arrays',
+  INCORRECT_SIGNIFICANCE_LEVEL = 'incorrect significance level',
+  NON_EQUAL_VARIANCES = 'non-equal variances',
+  NON_NORMAL_DISTRIB = 'non-normal distribution',
+  UNSUPPORTED_COLUMN_TYPE = 'unsupported feature column type',
+  INCORRECT_CATEGORIES_COL_TYPE = 'incorrect categories column type',
+  SINGLE_FACTOR = 'single category features',
+  CATS_EQUAL_SIZE = 'single value in each category',
+  NO_FEATURE_VARIATION = 'no feature variation',
+  NO_FEATURE_VARIATION_WITHIN_GROUPS = 'no feature variation within groups',
+};
+
+type SampleData = {
+  sum: number,
+  sumOfSquares: number,
+  size: number,
+};
+
+/** One-way ANOVA computation results. The classic notations are used (see [2], p. 290). */
+type OneWayAnova = {
+  /** sum of squares between groups, SSbn */
+  ssBn: number,
+  /** sum of squares within groups, SSnn */
+  ssWn: number,
+  /** total sum of squares, SStot */
+  ssTot: number,
+  /** degrees of freedom between groups, DFbn */
+  dfBn: number,
+  /** degrees of freedom within groups, DFwn */
+  dfWn: number,
+  /** total degrees of freedom, DFtot */
+  dfTot: number,
+  /** mean square between groups, MSbn */
+  msBn: number,
+  /** mean square within groups, MSwn */
+  msWn: number,
+  /** Fobt, value of F-statistics, Fstat */
+  fStat: number,
+  /** p-value corresponding to F-statistics, pValue */
+  pValue: number,
+};
+
+/** One-way ANOVA report */
+export type OneWayAnovaReport = {
+  anovaTable: OneWayAnova,
+  fCritical: number,
+  significance: number,
+};
+
+/** Categorical column */
+type CatCol = DG.Column<DG.COLUMN_TYPE.STRING | DG.COLUMN_TYPE.BOOL>;
+
+/** Numerical column */
+type NumCol = DG.Column<DG.COLUMN_TYPE.FLOAT> | DG.Column<DG.COLUMN_TYPE.INT>;
+
+/** Check correctness of significance level. */
+export function checkSignificanceLevel(alpha: number) {
+  if ((alpha <= 0) || (alpha >= 1))
+    throw new Error(ERROR_MSG.INCORRECT_SIGNIFICANCE_LEVEL);
+}
+
+/** Compute unbiased variance.*/
+export function getVariance(data: SampleData): number {
+  // The applied formulas can be found in [4] (see p. 63)
+  const size = data.size;
+
+  if (size <= 1)
+    return 0;
+
+  return (data.sumOfSquares - (data.sum) ** 2 / size) / (size - 1);
+} // getVariance
+
+/** Check equality of variances of 2 samples. F-test is performed.*/
+function areVarsEqual(xData: SampleData, yData: SampleData, alpha: number): boolean {
+  // The applied approach can be found in [3]
+  checkSignificanceLevel(alpha);
+
+  const xVar = getVariance(xData);
+  const yVar = getVariance(yData);
+
+  if ((xVar === 0) || (yVar === 0))
+    return (xVar === yVar);
+
+  const fStat = xVar / yVar;
+  const fCrit = jStat.centralF.inv(1 - alpha, xData.size - 1, yData.size - 1);
+
+  return (fStat < fCrit);
+} // areVarsEqual
+
+export class FactorizedData {
+  private sums!: Float64Array;
+  private sumsOfSquares!: Float64Array;
+  private subSampleSizes!: Int32Array;
+  private size!: number;
+  private catCount!: number;
+  private nullsCount = 0;
+
+  constructor(categories: CatCol, values: NumCol, uniqueCount: number) {
+    if (categories.length !== values.length)
+      throw new Error(ERROR_MSG.NON_EQUAL_FACTORS_VALUES_SIZE);
+
+    if (values.stats.stdev > 0)
+      this.setStats(categories, values, uniqueCount);
+    else
+      throw new Error(ERROR_MSG.NO_FEATURE_VARIATION);
+  }
+
+  /** Check equality of variances of factorized data. */
+  public areVarsEqual(alpha: number): boolean {
+    const K = this.catCount;
+
+    if (K === 1)
+      return true;
+
+    const first: SampleData = {sum: this.sums[0], sumOfSquares: this.sumsOfSquares[0], size: this.subSampleSizes[0]};
+
+    for (let i = 1; i < K; ++i) {
+      if (!areVarsEqual(first, {sum: this.sums[i], sumOfSquares: this.sumsOfSquares[i],
+        size: this.subSampleSizes[i]}, alpha))
+        return false;
+    }
+
+    return true;
+  } // areVarsEqual
+
+  /** Perform one-way ANOVA computations. */
+  public getOneWayAnova(): OneWayAnova {
+    // Further, notations and formulas from (see [2], p. 290) are used.
+
+    let sum = 0;
+    let sumOfSquares = 0;
+    let buf = 0;
+    let K = this.catCount;
+    let nonEmptyCategories = K;
+
+    for (let i = 0; i < K; ++i) {
+      if (this.subSampleSizes[i] !== 0) {
+        sum += this.sums[i];
+        sumOfSquares += this.sumsOfSquares[i];
+        buf += this.sums[i] ** 2 / this.subSampleSizes[i];
+      } else
+        --nonEmptyCategories;
+    }
+
+    K = nonEmptyCategories;
+
+    if (K === 1)
+      throw new Error(ERROR_MSG.SINGLE_FACTOR);
+
+    const N = this.size - this.nullsCount;
+    if (N === K)
+      throw new Error(ERROR_MSG.CATS_EQUAL_SIZE);
+
+    const ssTot = sumOfSquares - sum ** 2 / N;
+    const ssBn = buf - sum ** 2 / N;
+    const ssWn = ssTot - ssBn;
+
+    if (ssWn === 0)
+      throw new Error(ERROR_MSG.NO_FEATURE_VARIATION_WITHIN_GROUPS);
+
+    const dfBn = K - 1;
+    const dfWn = N - K;
+    const dfTot = N - 1;
+
+    const msBn = ssBn / dfBn;
+    const msWn = ssWn / dfWn;
+
+    const fStat = msBn / msWn;
+
+    return {
+      ssBn: ssBn,
+      ssWn: ssWn,
+      ssTot: ssTot,
+      dfBn: dfBn,
+      dfWn: dfWn,
+      dfTot: dfTot,
+      msBn: msBn,
+      msWn: msWn,
+      fStat: fStat,
+      pValue: 1 - jStat.centralF.cdf(fStat, dfBn, dfWn),
+    };
+  } // getOneWayAnova
+
+  /** Compute sum & sums of squares with respect to factor levels. */
+  private setStats(categories: CatCol, features: NumCol, uniqueCount: number): void {
+    const type = features.type;
+    const size = features.length;
+    const featuresNull = getNullValue(features);
+
+    switch (type) {
+    case DG.COLUMN_TYPE.INT:
+    case DG.COLUMN_TYPE.FLOAT:
+      const catCount = uniqueCount;
+      this.catCount = catCount;
+      this.size = size;
+
+      const vals = features.getRawData();
+      const cats = categories.getRawData();
+
+      const sums = new Float64Array(catCount).fill(0);
+      const sumsOfSquares = new Float64Array(catCount).fill(0);
+      const subSampleSizes = new Int32Array(catCount).fill(0);
+
+      let cat: number;
+
+      if (categories.type == DG.COLUMN_TYPE.BOOL) {
+        let catIdx = 0;
+        let shift = 0;
+        let packed = cats[0];
+        const MAX_SHIFT = 8 * cats.BYTES_PER_ELEMENT - 1;
+
+        for (let i = 0; i < size; ++i) {
+          cat = 1 & (packed >> shift);
+
+          if (vals[i] !== featuresNull) {
+            sums[cat] += vals[i];
+            sumsOfSquares[cat] += vals[i] ** 2;
+            ++subSampleSizes[cat];
+          } else
+            ++this.nullsCount;
+
+
+          ++shift;
+
+          if (shift > MAX_SHIFT) {
+            shift = 0;
+            ++catIdx;
+            packed = cats[catIdx];
+          }
+        }
+      } else {
+        const categoriesNull = categories.stats.missingValueCount > 0 ? getNullValue(categories) : -1;
+
+        for (let i = 0; i < size; ++i) {
+          cat = cats[i];
+
+          if ((cat === categoriesNull) || (vals[i] === featuresNull)) {
+            ++this.nullsCount;
+            continue;
+          }
+
+          sums[cat] += vals[i];
+          sumsOfSquares[cat] += vals[i] ** 2;
+          ++subSampleSizes[cat];
+        }
+      }
+
+      this.sums = sums;
+      this.sumsOfSquares = sumsOfSquares;
+      this.subSampleSizes = subSampleSizes;
+
+      break;
+
+    default:
+      throw new Error(ERROR_MSG.UNSUPPORTED_COLUMN_TYPE);
+    }
+  } // setStats
+} // FactorizedData
+
+/** Perform one-way analysis of variances. */
+export function oneWayAnova(categores: CatCol, values: NumCol, alpha: number,
+  toValidate: boolean = true): OneWayAnovaReport {
+  checkSignificanceLevel(alpha);
+
+  const uniqueCount = categores.stats.uniqueCount;
+
+  if (uniqueCount < 2)
+    throw new Error(ERROR_MSG.SINGLE_FACTOR);
+
+  const factorized = new FactorizedData(categores, values, uniqueCount);
+
+  if (toValidate) {
+    if (!factorized.areVarsEqual(alpha))
+      throw new Error(ERROR_MSG.NON_EQUAL_VARIANCES);
+  }
+
+  const anova = factorized.getOneWayAnova();
+
+  return {
+    anovaTable: anova,
+    fCritical: jStat.centralF.inv(1 - alpha, anova.dfBn, anova.dfWn),
+    significance: alpha,
+  };
+} // oneWayAnova

package/src/anova/anova-ui.ts

@@ -0,0 +1,258 @@
+// Analysis of Variances (ANOVA): UI
+
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {oneWayAnova, OneWayAnovaReport} from './anova-tools';
+
+const FEATURE_TYPES = [DG.COLUMN_TYPE.INT, DG.COLUMN_TYPE.FLOAT] as string[];
+const FACTOR_TYPES = [DG.COLUMN_TYPE.STRING, DG.COLUMN_TYPE.BOOL] as string[];
+
+const ANOVA_HELP_URL = '/help/explore/anova';
+
+/** Significance const */
+enum SIGNIFICANCE {
+  DEFAULT = 0.05,
+  MIN = 0.01,
+  MAX = 0.99,
+  INFIMUM = 0,
+  SUPREMUM = 1,
+};
+
+/** Default names */
+enum DEFAULT {
+  FACTOR = 'race',
+  FEATURE = 'age',
+};
+
+/** Add one-way ANOVA results */
+function addVizualization(df: DG.DataFrame, factorsName: string, featuresName: string, report: OneWayAnovaReport) {
+  const test = report.anovaTable.fStat > report.fCritical;
+
+  const shortConclusion = test ?
+    `"${factorsName}" affects the "${featuresName}"` :
+    `"${factorsName}" doesn't affect the "${featuresName}"`;
+
+  const view = grok.shell.getTableView(df.name);
+  const boxPlot = DG.Viewer.boxPlot(df, {
+    categoryColumnNames: [factorsName],
+    valueColumnName: featuresName,
+    showPValue: false,
+    showStatistics: false,
+    description: shortConclusion,
+    showColorSelector: false,
+  });
+  const boxPlotNode = view.dockManager.dock(boxPlot.root, DG.DOCK_TYPE.RIGHT, null, 'ANOVA');
+
+  const hypoMd = ui.markdown(`**H0:** the "${factorsName}" 
+  factor does not produce a significant difference in the "${featuresName}" feature.`);
+  ui.tooltip.bind(hypoMd, 'Null hypothesis');
+
+  const testMd = ui.markdown(`**Test result:** ${test ?
+    'means differ significantly.' :
+    'means do not differ significantly.'}`,
+  );
+
+  const tooltipDiv = test ?
+    ui.divV([
+      ui.p(`Reject the null hypothesis, since F > F-critical: 
+      ${report.anovaTable.fStat.toFixed(2)} > ${report.fCritical.toFixed(2)}.`),
+      ui.h2('There is a significant difference among sample averages.'),
+    ]) :
+    ui.divV([
+      ui.p(`Fail to reject the null hypothesis, since F < F-critical: 
+      ${report.anovaTable.fStat.toFixed(2)} < ${report.fCritical.toFixed(2)}.`),
+      ui.h2('There is no significant difference among sample averages.'),
+    ]);
+
+  ui.tooltip.bind(testMd, () => tooltipDiv);
+
+  const divResult = ui.divV([
+    hypoMd,
+    testMd,
+    ui.link('Learn more',
+      () => window.open('https://en.wikipedia.org/wiki/F-test', '_blank'),
+      'Click to open in a new tab',
+    ),
+  ]);
+  divResult.style.marginLeft = '20px';
+
+  const hypoNode = grok.shell.dockManager.dock(divResult, DG.DOCK_TYPE.DOWN, boxPlotNode, 'F-test', 0.3);
+
+  const reportViewer = getAnovaGrid(report);
+  grok.shell.dockManager.dock(reportViewer.root, DG.DOCK_TYPE.FILL, hypoNode, 'Analysis');
+}
+
+/** Create dataframe with one-way ANOVA results. */
+function getAnovaGrid(report: OneWayAnovaReport): DG.Grid {
+  const anova = report.anovaTable;
+
+  const grid = DG.Viewer.grid(DG.DataFrame.fromColumns([
+    DG.Column.fromStrings('Source of variance', ['Between groups', 'Within groups', 'Total']),
+    DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'SS', [anova.ssBn, anova.ssWn, anova.ssTot]),
+    DG.Column.fromList(DG.COLUMN_TYPE.INT, 'DF', [anova.dfBn, anova.dfWn, anova.dfTot]),
+    DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'MS', [anova.msBn, anova.msWn, null]),
+    DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'F', [anova.fStat, null, null]),
+    DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'F-critical', [report.fCritical, null, null]),
+    DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'p-value', [anova.pValue, null, null]),
+  ]));
+
+  const tooltip = new Map([
+    ['Source of variance', 'List of the explored variation sources'],
+    ['SS', 'Sum of squares (SS)'],
+    ['DF', 'Degrees of freedom (DF)'],
+    ['MS', 'Mean square (MS)'],
+    ['F', 'F-statistics (F)'],
+    ['F-critical', `${report.significance}-critical value of F-statistics (F)`],
+    ['p-value', `Probability to obtain F-statistics (F) greater than the actual observation.`],
+  ]);
+
+  grid.onCellTooltip(function(cell, x, y) {
+    if (cell.isColHeader) {
+      ui.tooltip.show(ui.divV([ui.p(tooltip.get(cell.tableColumn!.name)!)]), x, y);
+      return true;
+    }
+  });
+
+  grid.helpUrl = ANOVA_HELP_URL;
+
+  return grid;
+} // getOneWayAnovaDF
+
+/** Return warning div */
+function getWarning(msg: string): HTMLElement {
+  return ui.divV([
+    ui.markdown(`ANOVA cannot be performed:
+        
+    ${msg}`),
+    ui.link('Learn more',
+      () => window.open('https://en.wikipedia.org/wiki/Analysis_of_variance#Assumptions', '_blank'),
+      'Click to open in a new tab',
+    ),
+  ]);
+}
+
+/** Run one-way analysis of variances */
+export function runOneWayAnova(): void {
+  /** current dataframe */
+  const df: DG.DataFrame | null = grok.shell.t;
+
+  if (df === null) {
+    grok.shell.warning('No dataframe is opened');
+    return;
+  }
+
+  const columns = df.columns;
+  const factorColNames = [] as string[];
+  const featureColNames = [] as string[];
+
+  for (const col of columns) {
+    if (FEATURE_TYPES.includes(col.type))
+      featureColNames.push(col.name);
+    else if (FACTOR_TYPES.includes(col.type))
+      factorColNames.push(col.name);
+  }
+
+  const factorColsCount = factorColNames.length;
+  if (factorColsCount < 1) {
+    grok.shell.warning(ui.markdown(`No acceptable factor columns:
+
+    - type: ${FACTOR_TYPES.join(', ')} 
+    - at least two categories`,
+    ));
+    return;
+  };
+
+  let factor = df.col(DEFAULT.FACTOR);
+
+  if (factor === null) {
+    let minIdx = 0;
+    let minCount = columns.byName(factorColNames[0]).categories.length;
+    let current: number;
+
+    for (let i = 1; i < factorColsCount; ++i) {
+      current = columns.byName(factorColNames[i]).categories.length;
+      if (current < minCount) {
+        minCount = current;
+        minIdx = i;
+      }
+    }
+
+    factor = columns.byName(factorColNames[minIdx]);
+  }
+
+  if (featureColNames.length < 1) {
+    grok.shell.warning(ui.markdown(`No acceptable feature columns:
+    
+    - type: ${FEATURE_TYPES.join(', ')}`,
+    ));
+    return;
+  }
+
+  const factorInput = ui.input.column('Category', {
+    table: df,
+    value: factor,
+    tooltipText: 'Column with factor values',
+    onValueChanged: (col) => factor = col,
+    filter: (col: DG.Column) => factorColNames.includes(col.name),
+    nullable: false,
+  });
+
+  let feature = df.col(DEFAULT.FEATURE);
+  if (feature === null)
+    feature = columns.byName(featureColNames[0]);
+
+  const featureInput = ui.input.column('Feature', {
+    table: df,
+    value: feature,
+    tooltipText: 'Column with feature values',
+    onValueChanged: (col) => feature = col,
+    filter: (col: DG.Column) => featureColNames.includes(col.name),
+    nullable: false,
+  });
+
+  let significance = SIGNIFICANCE.DEFAULT;
+  const signInput = ui.input.float('Alpha', {
+    min: SIGNIFICANCE.MIN,
+    max: SIGNIFICANCE.MAX,
+    value: significance,
+    nullable: false,
+    tooltipText: 'Significance level',
+    onValueChanged: (value) => {
+      significance = value;
+      runBtn.disabled = (significance <= SIGNIFICANCE.INFIMUM) || (significance >= SIGNIFICANCE.SUPREMUM);
+    },
+  });
+
+  const dlg = ui.dialog({title: 'ANOVA', helpUrl: ANOVA_HELP_URL});
+  const view = grok.shell.getTableView(df.name);
+  view.root.appendChild(dlg.root);
+  dlg.addButton('Run', () => {
+    dlg.close();
+
+    try {
+      const res = oneWayAnova(factor!, feature!, significance);
+      addVizualization(df, factor!.name, feature!.name, res);
+    } catch (error) {
+      if (error instanceof Error) {
+        grok.shell.warning(getWarning(error.message));
+
+        view.addViewer(DG.VIEWER.BOX_PLOT, {
+          categoryColumnNames: [factor!.name],
+          valueColumnName: feature!.name,
+          showStatistics: false,
+          showPValue: false,
+        });
+      } else
+        grok.shell.error('ANOVA fails: the platform issue');
+    }
+  }, undefined, 'Perform analysis of variances');
+
+  const runBtn = dlg.getButton('Run');
+
+  dlg.add(factorInput)
+    .add(featureInput)
+    .add(signInput)
+    .show();
+} // runOneWayAnova

package/src/eda-ui.ts

@@ -131,12 +131,3 @@ export function addPLSvisualization(
   // 4. Scores Scatter Plot
   view.addViewer(scoresScatterPlot(samplesNames, plsOutput[2], plsOutput[3]));
 }
-
-// Add one-way ANOVA results
-export function addOneWayAnovaVizualization(
-  table: DG.DataFrame, factors: DG.Column, values: DG.Column, anova: DG.DataFrame,
-) {
-  const view = grok.shell.getTableView(table.name);
-  view.addViewer(DG.Viewer.boxPlot(DG.DataFrame.fromColumns([factors, values])));
-  view.addViewer(DG.Viewer.grid(anova));
-}

package/src/global.d.ts

@@ -0,0 +1,13 @@
+import * as grokNamespace from 'datagrok-api/grok';
+import * as uiNamespace from 'datagrok-api/ui';
+import * as DGNamespace from 'datagrok-api/dg';
+import * as rxjsNamespace from 'rxjs';
+import $Namespace from 'cash-dom';
+
+declare global {
+    const grok: typeof grokNamespace;
+    const ui: typeof uiNamespace;
+    const DG: typeof DGNamespace;
+    const rjxs: typeof rxjsNamespace;
+    const $: typeof $Namespace;
+}

package/src/missing-values-imputation/ui-constants.ts

@@ -62,3 +62,5 @@ export enum HINT {
   IMPUTATION_SETTINGS = 'Simple imputation settings',
   KEEP_EMPTY = 'Defines whether to keep empty missing values failed to be imputed OR fill them using simple imputation',
 };
+
+export const MAX_INPUT_NAME_LENGTH = 15;

package/src/missing-values-imputation/ui.ts

@@ -2,7 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {TITLE, KNN_IMPUTER, ERROR_MSG, HINT} from './ui-constants';
+import {TITLE, KNN_IMPUTER, ERROR_MSG, HINT, MAX_INPUT_NAME_LENGTH} from './ui-constants';
 import {SUPPORTED_COLUMN_TYPES, METRIC_TYPE, DISTANCE_TYPE, MetricInfo, DEFAULT, MIN_NEIGHBORS,
   impute, getMissingValsIndices, areThereFails, imputeFailed} from './knn-imputer';
 
@@ -190,7 +190,7 @@ export async function runKNNImputer(df?: DG.DataFrame): Promise<void> {
 
   // Metrics components
   const featuresMetrics = new Map<string, MetricInfo>();
-  const metricInfoInputs = new Map<string, HTMLDivElement>();
+  const metricInfoInputs = new Map<string, HTMLElement>();
   const metricsDiv = ui.divV([]);
   metricsDiv.style.overflow = 'auto';
 
@@ -214,7 +214,7 @@ export async function runKNNImputer(df?: DG.DataFrame): Promise<void> {
 
     // The following should provide a slider (see th bug https://reddata.atlassian.net/browse/GROK-14431)
     const prop = DG.Property.fromOptions({
-      'name': name,
+      'name': name.length < MAX_INPUT_NAME_LENGTH ? name : name.slice(0, MAX_INPUT_NAME_LENGTH).concat('...'),
       'inputType': 'Float',
       'min': 0,
       'max': 10,
@@ -229,11 +229,11 @@ export async function runKNNImputer(df?: DG.DataFrame): Promise<void> {
       distInfo.weight = value ?? settings.defaultWeight;
       featuresMetrics.set(name, distInfo);
     });
-    weightInput.setTooltip(HINT.WEIGHT);
+    ui.tooltip.bind(weightInput.captionLabel, name);
+    ui.tooltip.bind(weightInput.input, HINT.WEIGHT);
 
-    const div = ui.divH([distTypeInput.root, weightInput.root]);
-    metricInfoInputs.set(name, div);
-    metricsDiv.append(div);
+    metricInfoInputs.set(name, weightInput.root);
+    metricsDiv.append(weightInput.root);
   });
 
   // The main dialog