@finos/legend-lego 2.0.192 → 2.0.194

package/src/legend-ai/components/LegendAIAnalysisUtils.ts

@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type LegendAIKeyMetric,
+  type LegendAIChartDataPoint,
+  LegendAIChartType,
+} from '../LegendAI_LegendApplicationPlugin_Extension.js';
+import type { LegendAIGridData } from '../LegendAITypes.js';
+import { isNonNullable, isNumber, isString } from '@finos/legend-shared';
+
+const CHART_PALETTE_COUNT = 10;
+const MAX_CHART_ITEMS = 10;
+const TOP_N_ITEMS = 5;
+const MAX_PROFILE_SAMPLE = 1000;
+const MAX_KEY_METRICS = 4;
+const MAX_METRIC_COLUMNS = 5;
+const MAX_BAR_CHART_ROWS = 20;
+const MAX_PIE_CHART_ROWS = 6;
+
+interface ColumnProfile {
+  name: string;
+  isNumeric: boolean;
+  isString: boolean;
+  uniqueCount: number;
+  values: unknown[];
+  numericValues: number[];
+}
+
+function profileColumns(gridData: LegendAIGridData): ColumnProfile[] {
+  const rows =
+    gridData.rowData.length > MAX_PROFILE_SAMPLE
+      ? gridData.rowData.slice(0, MAX_PROFILE_SAMPLE)
+      : gridData.rowData;
+
+  return gridData.columnDefs.map((col) => {
+    const field = col.field ?? col.colId ?? '';
+    const values = rows.map((r) => r[field]).filter(isNonNullable);
+    const numericValues = values.filter(isNumber);
+    const unique = new Set(values.map(String));
+    return {
+      name: field,
+      isNumeric: numericValues.length === values.length && values.length > 0,
+      isString: values.length > 0 && values.every(isString),
+      uniqueCount: unique.size,
+      values,
+      numericValues,
+    };
+  });
+}
+
+function formatNumber(n: number): string {
+  if (Number.isInteger(n) && Math.abs(n) < 1_000_000) {
+    return n.toLocaleString();
+  }
+  if (Math.abs(n) >= 1_000_000) {
+    return `${(n / 1_000_000).toFixed(1)}M`;
+  }
+  if (Math.abs(n) >= 1_000) {
+    return `${(n / 1_000).toFixed(1)}K`;
+  }
+  return n.toFixed(2);
+}
+
+function computeNumericMetrics(
+  col: ColumnProfile,
+  metrics: LegendAIKeyMetric[],
+): void {
+  let sum = 0;
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const n of col.numericValues) {
+    sum += n;
+    if (n < min) {
+      min = n;
+    }
+    if (n > max) {
+      max = n;
+    }
+  }
+  const avg = sum / col.numericValues.length;
+
+  if (col.uniqueCount > 1) {
+    metrics.push({
+      label: `Avg ${col.name}`,
+      value: formatNumber(avg),
+      ...(min === max
+        ? {}
+        : { detail: `${formatNumber(min)} – ${formatNumber(max)}` }),
+    });
+  }
+
+  if (col.uniqueCount > 2 && metrics.length < MAX_METRIC_COLUMNS) {
+    metrics.push({
+      label: `Total ${col.name}`,
+      value: formatNumber(sum),
+    });
+  }
+}
+
+export function computeKeyMetrics(
+  gridData: LegendAIGridData,
+): LegendAIKeyMetric[] {
+  const profiles = profileColumns(gridData);
+  const metrics: LegendAIKeyMetric[] = [];
+  const rowCount = gridData.rowData.length;
+
+  metrics.push({
+    label: 'Total Rows',
+    value: rowCount.toLocaleString(),
+  });
+
+  const numericCol = profiles.find(
+    (c) => c.isNumeric && c.numericValues.length > 0,
+  );
+  if (numericCol) {
+    computeNumericMetrics(numericCol, metrics);
+  }
+
+  const stringCol = profiles.find(
+    (c) => c.isString && c.uniqueCount > 1 && c.uniqueCount <= rowCount,
+  );
+  if (stringCol) {
+    metrics.push({
+      label: `Unique ${stringCol.name}`,
+      value: stringCol.uniqueCount.toLocaleString(),
+    });
+  }
+
+  return metrics.slice(0, MAX_KEY_METRICS);
+}
+
+export function inferChartType(gridData: LegendAIGridData): LegendAIChartType {
+  const profiles = profileColumns(gridData);
+  const numericCols = profiles.filter((c) => c.isNumeric);
+  const stringCols = profiles.filter((c) => c.isString && c.uniqueCount > 1);
+
+  if (
+    stringCols.length >= 1 &&
+    numericCols.length >= 1 &&
+    gridData.rowData.length <= MAX_BAR_CHART_ROWS
+  ) {
+    if (gridData.rowData.length <= MAX_PIE_CHART_ROWS) {
+      return LegendAIChartType.PIE;
+    }
+    return LegendAIChartType.BAR;
+  }
+
+  if (numericCols.length >= 1 && gridData.rowData.length > 1) {
+    return LegendAIChartType.BAR;
+  }
+
+  return LegendAIChartType.NONE;
+}
+
+export function computeChartData(
+  gridData: LegendAIGridData,
+): LegendAIChartDataPoint[] {
+  const profiles = profileColumns(gridData);
+  const numericCol = profiles.find((c) => c.isNumeric);
+  const labelCol = profiles.find((c) => c.isString && c.uniqueCount > 1);
+
+  if (!numericCol) {
+    return [];
+  }
+
+  const field = numericCol.name;
+  const labelField = labelCol?.name;
+  const rows =
+    gridData.rowData.length > MAX_PROFILE_SAMPLE
+      ? gridData.rowData.slice(0, MAX_PROFILE_SAMPLE)
+      : gridData.rowData;
+
+  const entries = rows
+    .map((row) => {
+      const rawValue = row[field];
+      return {
+        label: labelField
+          ? String(row[labelField] ?? '')
+          : String(row[gridData.columnDefs[0]?.field ?? ''] ?? ''),
+        value: typeof rawValue === 'number' ? rawValue : 0,
+      };
+    })
+    .filter((e) => e.label.length > 0)
+    .sort((a, b) => b.value - a.value)
+    .slice(0, MAX_CHART_ITEMS);
+
+  return entries.map((e, i) => ({
+    label: e.label,
+    value: e.value,
+    colorIndex: i % CHART_PALETTE_COUNT,
+  }));
+}
+
+export function computeTopItems(
+  gridData: LegendAIGridData,
+): LegendAIChartDataPoint[] {
+  return computeChartData(gridData).slice(0, TOP_N_ITEMS);
+}
+
+export function findNumericColumnName(
+  gridData: LegendAIGridData,
+): string | undefined {
+  const profiles = profileColumns(gridData);
+  const numericCol = profiles.find((c) => c.isNumeric);
+  if (!numericCol) {
+    return undefined;
+  }
+  const colDef = gridData.columnDefs.find(
+    (c) => (c.field ?? c.colId ?? '') === numericCol.name,
+  );
+  return colDef?.headerName ?? colDef?.field;
+}

package/src/legend-ai/components/LegendAICharts.tsx

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import type { LegendAIChartDataPoint } from '../LegendAI_LegendApplicationPlugin_Extension.js';
+
+const CHART_PALETTE_SIZE = 10;
+const DONUT_SIZE = 160;
+const DONUT_STROKE = 24;
+const DONUT_RADIUS = (DONUT_SIZE - DONUT_STROKE) / 2;
+const DONUT_CIRCUMFERENCE = 2 * Math.PI * DONUT_RADIUS;
+
+function getChartColor(index: number): string {
+  return `var(--ai-chart-color-${(index % CHART_PALETTE_SIZE) + 1})`;
+}
+
+function resolveColor(item: LegendAIChartDataPoint, index: number): string {
+  return item.color ?? getChartColor(item.colorIndex ?? index);
+}
+
+export const LegendAIBarChart = (props: {
+  data: LegendAIChartDataPoint[];
+  title?: string;
+}): React.ReactNode => {
+  const { data, title } = props;
+
+  const maxValue = useMemo(
+    () => data.reduce((m, d) => Math.max(m, d.value), 0) || 1,
+    [data],
+  );
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="legend-ai-chart legend-ai-chart--bar">
+      {title !== undefined && title.length > 0 && (
+        <div className="legend-ai-chart__title">{title}</div>
+      )}
+      <div className="legend-ai-chart__bars">
+        {data.map((item, idx) => {
+          const pct = (item.value / maxValue) * 100;
+          return (
+            <div key={item.label} className="legend-ai-chart__bar-row">
+              <span className="legend-ai-chart__bar-label" title={item.label}>
+                {item.label}
+              </span>
+              <div className="legend-ai-chart__bar-track">
+                <div
+                  className="legend-ai-chart__bar-fill"
+                  style={{
+                    width: `${pct}%`,
+                    backgroundColor: resolveColor(item, idx),
+                    animationDelay: `${idx * 60}ms`,
+                  }}
+                />
+              </div>
+              <span className="legend-ai-chart__bar-value">
+                {Number.isInteger(item.value)
+                  ? item.value.toLocaleString()
+                  : item.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const LegendAIDonutChart = (props: {
+  data: LegendAIChartDataPoint[];
+  title?: string;
+}): React.ReactNode => {
+  const { data, title } = props;
+
+  const total = useMemo(
+    () => data.reduce((s, d) => s + d.value, 0) || 1,
+    [data],
+  );
+
+  const segments = useMemo(() => {
+    let offset = 0;
+    return data.map((item) => {
+      const pct = item.value / total;
+      const dashLen = pct * DONUT_CIRCUMFERENCE;
+      const seg = {
+        ...item,
+        dashLen,
+        dashOffset: -offset,
+        pct,
+      };
+      offset += dashLen;
+      return seg;
+    });
+  }, [data, total]);
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  const center = DONUT_SIZE / 2;
+
+  return (
+    <div className="legend-ai-chart legend-ai-chart--donut">
+      {title !== undefined && title.length > 0 && (
+        <div className="legend-ai-chart__title">{title}</div>
+      )}
+      <div className="legend-ai-chart__donut-wrapper">
+        <svg
+          viewBox={`0 0 ${DONUT_SIZE} ${DONUT_SIZE}`}
+          className="legend-ai-chart__donut-svg"
+        >
+          {segments.map((seg, idx) => (
+            <circle
+              key={seg.label}
+              cx={center}
+              cy={center}
+              r={DONUT_RADIUS}
+              fill="none"
+              stroke={resolveColor(seg, idx)}
+              strokeWidth={DONUT_STROKE}
+              strokeDasharray={`${seg.dashLen} ${DONUT_CIRCUMFERENCE - seg.dashLen}`}
+              strokeDashoffset={seg.dashOffset}
+              className="legend-ai-chart__donut-segment"
+            />
+          ))}
+        </svg>
+        <div className="legend-ai-chart__donut-center">
+          <span className="legend-ai-chart__donut-total">
+            {total.toLocaleString()}
+          </span>
+          <span className="legend-ai-chart__donut-total-label">total</span>
+        </div>
+      </div>
+      <div className="legend-ai-chart__legend">
+        {data.map((item, idx) => (
+          <div key={item.label} className="legend-ai-chart__legend-item">
+            <span
+              className="legend-ai-chart__legend-dot"
+              style={{ backgroundColor: resolveColor(item, idx) }}
+            />
+            <span className="legend-ai-chart__legend-label">{item.label}</span>
+            <span className="legend-ai-chart__legend-value">
+              {item.value.toLocaleString()}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/legend-ai/components/LegendAIChat.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import {
+  useMemo,
+  useCallback,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import {
   SendIcon,
   LoadingIcon,
@@ -23,6 +30,11 @@ import {
   TableIcon,
   CopyIcon,
   RefreshIcon,
+  CheckIcon,
+  TimesIcon,
+  CaretDownIcon,
+  CaretRightIcon,
+  DotIcon,
   MarkdownTextViewer,
 } from '@finos/legend-art';
 import { noop } from '@finos/legend-shared';
@@ -172,13 +184,17 @@ export function buildSuggestedQueries(
   ].slice(0, MAX_SUGGESTED_QUERIES);
 }
 
-function renderStepStatusIcon(
+export function renderStepStatusIcon(
   status: LegendAIThinkingStepStatus,
 ): React.ReactNode {
   if (status === LegendAIThinkingStepStatus.ACTIVE) {
     return <LoadingIcon isLoading={true} />;
   }
-  return status === LegendAIThinkingStepStatus.DONE ? '\u2713' : '\u2717';
+  return status === LegendAIThinkingStepStatus.DONE ? (
+    <CheckIcon />
+  ) : (
+    <TimesIcon />
+  );
 }
 
 const AssistantMessageView = (props: {
@@ -186,9 +202,15 @@ const AssistantMessageView = (props: {
   isThinkingVisible: boolean;
   onToggleThinking: () => void;
   onSuggestedQueryClick?: (query: string) => void;
+  onFallbackAction?: (messageId: string) => void;
 }): React.ReactNode => {
-  const { msg, isThinkingVisible, onToggleThinking, onSuggestedQueryClick } =
-    props;
+  const {
+    msg,
+    isThinkingVisible,
+    onToggleThinking,
+    onSuggestedQueryClick,
+    onFallbackAction,
+  } = props;
 
   const [sqlCopied, setSqlCopied] = useState(false);
   const copyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -233,7 +255,7 @@ const AssistantMessageView = (props: {
                 onClick={onToggleThinking}
               >
                 <span className="legend-ai__thinking-toggle-icon">
-                  {isThinkingVisible ? '\u25BC' : '\u25B6'}
+                  {isThinkingVisible ? <CaretDownIcon /> : <CaretRightIcon />}
                 </span>
                 Thought for {msg.thinkingDuration ?? '...'}s
               </button>
@@ -242,7 +264,7 @@ const AssistantMessageView = (props: {
               <div className="legend-ai__thinking-steps">
                 {msg.thinkingSteps.map((step) => (
                   <div
-                    key={step.label}
+                    key={step.id}
                     className={`legend-ai__thinking-step legend-ai__thinking-step--${step.status}`}
                   >
                     <span className="legend-ai__thinking-step-icon">
@@ -277,7 +299,7 @@ const AssistantMessageView = (props: {
               >
                 {sqlCopied ? (
                   <span className="legend-ai__sql-copy-btn--copied">
-                    \u2713
+                    <CheckIcon />
                   </span>
                 ) : (
                   <CopyIcon />
@@ -297,6 +319,33 @@ const AssistantMessageView = (props: {
           </div>
         )}
 
+        {msg.error && <div className="legend-ai__exec-error">{msg.error}</div>}
+
+        {msg.gridData && (
+          <div className="legend-ai__results-block">
+            <div className="legend-ai__results-header">
+              <span className="legend-ai__results-header-icon">
+                <TableIcon />
+              </span>
+              <span>Results</span>
+              <span className="legend-ai__results-meta">
+                {msg.gridData.rowData.length} row
+                {msg.gridData.rowData.length === 1 ? '' : 's'}
+                {msg.execTime ? (
+                  <>
+                    {' '}
+                    <DotIcon className="legend-ai__results-meta-dot" />{' '}
+                    {msg.execTime}s
+                  </>
+                ) : (
+                  ''
+                )}
+              </span>
+            </div>
+            <LegendAIResultGrid data={msg.gridData} />
+          </div>
+        )}
+
         {msg.textAnswer && (
           <div className="legend-ai__text-answer">
             <MarkdownTextViewer
@@ -306,8 +355,6 @@ const AssistantMessageView = (props: {
           </div>
         )}
 
-        {msg.error && <div className="legend-ai__exec-error">{msg.error}</div>}
-
         {!msg.isProcessing &&
           msg.suggestedQueries.length > 0 &&
           onSuggestedQueryClick && (
@@ -328,21 +375,19 @@ const AssistantMessageView = (props: {
             </div>
           )}
 
-        {msg.gridData && (
-          <div className="legend-ai__results-block">
-            <div className="legend-ai__results-header">
-              <span className="legend-ai__results-header-icon">
-                <TableIcon />
-              </span>
-              <span>Results</span>
-              <span className="legend-ai__results-meta">
-                {msg.gridData.rowData.length} row
-                {msg.gridData.rowData.length === 1 ? '' : 's'}
-                {msg.execTime ? ` \u00B7 ${msg.execTime}s` : ''}
-              </span>
-            </div>
-            <LegendAIResultGrid data={msg.gridData} />
-          </div>
+        {msg.fallbackAction && !msg.isProcessing && onFallbackAction && (
+          <button
+            type="button"
+            className="legend-ai__fallback-action-btn"
+            onClick={(): void => {
+              if (msg.fallbackAction?.actionId) {
+                onFallbackAction(msg.id);
+              }
+            }}
+          >
+            <SparkleStarsIcon />
+            <span>{msg.fallbackAction.label}</span>
+          </button>
         )}
       </div>
     </div>
@@ -376,7 +421,7 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
   const hasMessages = state.messages.length > 0;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const el = textareaRef.current;
     if (el) {
       el.style.height = 'auto';
@@ -453,6 +498,9 @@ export const LegendAIChat = (props: LegendAIChatProps): React.ReactNode => {
               msg={msg}
               isThinkingVisible={isThinkingVisible}
               onToggleThinking={(): void => state.toggleThinking(msgIndex)}
+              onFallbackAction={(messageId): void =>
+                state.runFallbackAction(messageId)
+              }
               onSuggestedQueryClick={(q): void =>
                 state.askQuestionWithIntent(
                   q,

package/src/legend-ai/index.ts

@@ -23,6 +23,7 @@ export {
   isNumericColumn,
   isDateColumn,
   buildSuggestedQueries,
+  renderStepStatusIcon,
 } from './components/LegendAIChat.js';
 export { LegendAIErrorBoundary } from './components/LegendAIErrorBoundary.js';
 export {
@@ -31,6 +32,7 @@ export {
   addThinkingStep,
   completeThinkingSteps,
   finishWithThinkingError,
+  classifyError,
   buildConversationHistory,
   buildGenerationFailureMessage,
   buildExecutionErrorMessage,
@@ -41,6 +43,22 @@ export {
   processQuestion,
   processQuestionWithIntent,
   handleMetadataQuestion,
+  elapsedSeconds,
+  createMessagePair,
+  analyzeOrchestratorResults,
   type MessageSetter,
+  type LegendAIOperationContext,
 } from './stores/LegendAIChatState.js';
 export { LegendAIResultGrid } from './components/LegendAIResultGrid.js';
+export { LegendAIAnalysisPanel } from './components/LegendAIAnalysisPanel.js';
+export {
+  LegendAIBarChart,
+  LegendAIDonutChart,
+} from './components/LegendAICharts.js';
+export {
+  computeKeyMetrics,
+  computeChartData,
+  inferChartType,
+  computeTopItems,
+  findNumericColumnName,
+} from './components/LegendAIAnalysisUtils.js';