@finos/legend-application-studio 28.21.18 → 28.21.20

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -19,10 +19,10 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type AccessPointGroupState,
   type AccessPointState,
+  type LakehouseAccessPointState,
   DATA_PRODUCT_TAB,
   DATA_PRODUCT_TYPE,
   DataProductEditorState,
-  LakehouseAccessPointState,
   ModelAccessPointGroupState,
 } from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 import {
@@ -87,12 +87,12 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import {
   assertErrorThrown,
-  filterByType,
   guaranteeNonNullable,
   guaranteeType,
   isNonNullable,
@@ -208,6 +208,7 @@ import type {
   DataProductDocResponse,
   DSL_DataProduct_LegendStudioApplicationPlugin_Extension,
 } from '../../../../stores/extensions/DSL_DataProduct_LegendStudioApplicationPlugin_Extension.js';
+import { LegendStudioTelemetryHelper } from '../../../../__lib__/LegendStudioTelemetryHelper.js';
 
 export enum AP_GROUP_MODAL_ERRORS {
   GROUP_NAME_EMPTY = 'Group Name is empty',
@@ -331,6 +332,17 @@ const AccessPointTitle = observer(
   },
 );
 
+const AP_RENDER_CHUNK_SIZE = 50;
+const AP_SENTINEL_ROOT_MARGIN = '0px 0px 400px 0px';
+const DEFAULT_CLASSIFICATION_LABEL = 'Classification';
+
+const toClassificationOption = (
+  classification: string,
+): { label: string; value: string } => ({
+  label: classification,
+  value: classification,
+});
+
 const AccessPointClassification = observer(
   (props: {
     accessPoint: LakehouseAccessPoint;
@@ -338,52 +350,35 @@ const AccessPointClassification = observer(
   }) => {
     const { accessPoint, groupState } = props;
     const applicationStore = useEditorStore().applicationStore;
-    const CHOOSE_CLASSIFICATION = 'Classification';
     const updateAccessPointClassificationTextbox: React.ChangeEventHandler<HTMLTextAreaElement> =
       action((event) => {
         accessPoint.classification = event.target.value;
       });
 
-    const conditionalClassifications = (): string[] => {
-      if (groupState.containsPublicStereotype) {
-        return (
-          applicationStore.config.options.dataProductConfig
-            ?.publicClassifications ?? []
-        );
-      } else {
-        return (
-          applicationStore.config.options.dataProductConfig?.classifications ??
-          []
-        );
-      }
-    };
-
-    const classificationOptions = [CHOOSE_CLASSIFICATION]
-      .concat(conditionalClassifications())
-      .map((classfication) => ({
-        label: classfication,
-        value: classfication,
-      }));
+    const classificationOptions = useMemo(
+      () =>
+        [DEFAULT_CLASSIFICATION_LABEL]
+          .concat(groupState.classifications)
+          .map(toClassificationOption),
+      [groupState.classifications],
+    );
 
     const updateAccessPointClassificationFromDropdown = action(
       (val: { label: string; value: string } | null): void => {
         accessPoint_setClassification(
           accessPoint,
-          val?.value === CHOOSE_CLASSIFICATION ? undefined : val?.value,
+          val?.value === DEFAULT_CLASSIFICATION_LABEL ? undefined : val?.value,
         );
       },
     );
 
-    const currentClassification =
-      accessPoint.classification !== undefined
-        ? {
-            label: accessPoint.classification,
-            value: accessPoint.classification,
-          }
-        : {
-            label: CHOOSE_CLASSIFICATION,
-            value: CHOOSE_CLASSIFICATION,
-          };
+    const currentClassification = useMemo(
+      () =>
+        toClassificationOption(
+          accessPoint.classification ?? DEFAULT_CLASSIFICATION_LABEL,
+        ),
+      [accessPoint.classification],
+    );
 
     const classificationDocumentationLink = (): void => {
       const docLink =
@@ -399,7 +394,7 @@ const AccessPointClassification = observer(
             style={{
               borderWidth: 'thin',
               borderColor:
-                currentClassification.label === CHOOSE_CLASSIFICATION
+                currentClassification.label === DEFAULT_CLASSIFICATION_LABEL
                   ? 'var(--color-red-300)'
                   : 'transparent',
             }}
@@ -721,9 +716,7 @@ export const LakehouseDataProductAccessPointEditor = observer(
     const accessPoint = accessPointState.accessPoint;
     const groupState = accessPointState.state;
     const lambdaEditorState = accessPointState.lambdaState;
-    const propertyHasParserError = groupState.accessPointStates
-      .filter(filterByType(LakehouseAccessPointState))
-      .find((pm) => pm.lambdaState.parserError);
+    const propertyHasParserError = groupState.hasParserError;
     const [editingDescription, setEditingDescription] = useState(false);
     const [isHoveringDesc, setIsHoveringDesc] = useState(false);
     const [editingTitle, setEditingTitle] = useState(false);
@@ -736,6 +729,17 @@ export const LakehouseDataProductAccessPointEditor = observer(
       );
     }, [lambdaEditorState, editorStore.applicationStore]);
 
+    // Load the relation columns for access points that already have sample
+    // values so mismatches surface on load. This only runs for rendered access
+    // points, keeping the number of concurrent calls bounded to the visible set.
+    useEffect(() => {
+      if (accessPointState.relationElementState !== undefined) {
+        flowResult(lambdaEditorState.updateLambdaRelationColumns()).catch(
+          editorStore.applicationStore.alertUnhandledError,
+        );
+      }
+    }, [accessPointState, lambdaEditorState, editorStore.applicationStore]);
+
     const handleDescriptionEdit = () => setEditingDescription(true);
     const handleDescriptionBlur = () => {
       setEditingDescription(false);
@@ -1019,7 +1023,9 @@ export const LakehouseDataProductAccessPointEditor = observer(
                   <button
                     className="access-point-editor__sample-values-btn"
                     onClick={() => {
-                      accessPointState.createAndaddRelationElement();
+                      flowResult(
+                        accessPointState.createAndaddRelationElement(),
+                      ).catch(editorStore.applicationStore.alertUnhandledError);
                     }}
                     disabled={props.isReadOnly}
                     title="Add sample values"
@@ -1730,6 +1736,10 @@ const ModelAccessPointGroupEditor = observer(
   },
 );
 
+const AccessPointLoadingSentinel = (props: {
+  ref?: React.Ref<HTMLDivElement>;
+}) => <div ref={props.ref} className="access-point-editor__sentinel" />;
+
 const AccessPointGroupEditor = observer(
   (props: { groupState: AccessPointGroupState; isReadOnly: boolean }) => {
     const { groupState, isReadOnly } = props;
@@ -1747,6 +1757,31 @@ const AccessPointGroupEditor = observer(
     const [aiSuggestion, setAISuggestion] = useState<
       DataProductDocResponse | undefined
     >(undefined);
+
+    const lakehouseAccessPointStates =
+      groupState.accessPointStates as LakehouseAccessPointState[];
+    const accessPointCount = lakehouseAccessPointStates.length;
+    const [renderedCount, setRenderedCount] = useState(AP_RENDER_CHUNK_SIZE);
+    const accessPointsSentinelRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      const sentinel = accessPointsSentinelRef.current;
+      if (!sentinel) {
+        return undefined;
+      }
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            setRenderedCount((count) =>
+              Math.min(count + AP_RENDER_CHUNK_SIZE, accessPointCount),
+            );
+          }
+        },
+        { rootMargin: AP_SENTINEL_ROOT_MARGIN },
+      );
+      intersectionObserver.observe(sentinel);
+      return () => intersectionObserver.disconnect();
+    }, [accessPointCount, renderedCount]);
+
     const handleDescriptionEdit = () => setEditingDescription(true);
     const handleDescriptionBlur = () => {
       setEditingDescription(false);
@@ -1818,6 +1853,10 @@ const AccessPointGroupEditor = observer(
       if (!aiDocSuggester || !legendAIUrl) {
         return;
       }
+      LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestLaunched(
+        editorStore.applicationStore.telemetryService,
+        productEditorState.product.path,
+      );
       setIsSuggestingWithAI(true);
       setAISuggestion(undefined);
       try {
@@ -1843,6 +1882,10 @@ const AccessPointGroupEditor = observer(
       if (!aiSuggestion) {
         return;
       }
+      LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestApplied(
+        editorStore.applicationStore.telemetryService,
+        productEditorState.product.path,
+      );
       // Find matching group in the response
       const gIdx =
         productEditorState.accessPointGroupStates.indexOf(groupState);
@@ -1880,6 +1923,13 @@ const AccessPointGroupEditor = observer(
       }
       setAISuggestion(undefined);
     };
+    const discardAISuggestion = (): void => {
+      LegendStudioTelemetryHelper.logEvent_DataProductLegendAISuggestDiscarded(
+        editorStore.applicationStore.telemetryService,
+        productEditorState.product.path,
+      );
+      setAISuggestion(undefined);
+    };
 
     // Computed AI suggestion for current group
     const groupIndex =
@@ -1922,6 +1972,7 @@ const AccessPointGroupEditor = observer(
         undefined,
         productEditorState.selectedGroupState ?? groupState,
       );
+      setRenderedCount(groupState.accessPointStates.length);
     };
 
     return (
@@ -1991,7 +2042,7 @@ const AccessPointGroupEditor = observer(
                 </button>
                 <button
                   className="btn data-product-editor__ai-suggestion__dismiss-btn"
-                  onClick={(): void => setAISuggestion(undefined)}
+                  onClick={discardAISuggestion}
                 >
                   Dismiss
                 </button>
@@ -2150,8 +2201,8 @@ const AccessPointGroupEditor = observer(
             <div
               style={{ gap: '1rem', display: 'flex', flexDirection: 'column' }}
             >
-              {groupState.accessPointStates
-                .filter(filterByType(LakehouseAccessPointState))
+              {lakehouseAccessPointStates
+                .slice(0, renderedCount)
                 .map((apState, idx) => (
                   <LakehouseDataProductAccessPointEditor
                     key={apState.uuid}
@@ -2160,6 +2211,9 @@ const AccessPointGroupEditor = observer(
                     aiSuggestionMeta={aiAccessPointMetas?.[idx]}
                   />
                 ))}
+              {accessPointCount > renderedCount && (
+                <AccessPointLoadingSentinel ref={accessPointsSentinelRef} />
+              )}
             </div>
           </>
         )}

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -74,6 +74,7 @@ import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudi
 import { DocumentationLink } from '@finos/legend-lego/application';
 import { ServicePostValidationsEditor } from './ServicePostValidationEditor.js';
 import type { DSL_Service_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Service_LegendStudioApplicationPlugin_Extension.js';
+import { LegendStudioTelemetryHelper } from '../../../../__lib__/LegendStudioTelemetryHelper.js';
 
 type UserOption = { label: string; value: string };
 
@@ -264,6 +265,10 @@ const ServiceGeneralEditor = observer(() => {
     if (!aiDocSuggester || !legendAIUrl) {
       return;
     }
+    LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestLaunched(
+      applicationStore.telemetryService,
+      service.path,
+    );
     setIsSuggestingWithAI(true);
     setAIDocSuggestion(undefined);
     try {
@@ -281,9 +286,20 @@ const ServiceGeneralEditor = observer(() => {
     if (!aiDocSuggestion) {
       return;
     }
+    LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestApplied(
+      applicationStore.telemetryService,
+      service.path,
+    );
     service_setDocumentation(service, aiDocSuggestion);
     setAIDocSuggestion(undefined);
   };
+  const discardAIDocSuggestion = (): void => {
+    LegendStudioTelemetryHelper.logEvent_ServiceLegendAISuggestDiscarded(
+      applicationStore.telemetryService,
+      service.path,
+    );
+    setAIDocSuggestion(undefined);
+  };
 
   const changeTitle: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     if (!isReadOnly) {
@@ -498,7 +514,7 @@ const ServiceGeneralEditor = observer(() => {
               </button>
               <button
                 className="btn service-editor__ai-suggestion__dismiss-btn"
-                onClick={(): void => setAIDocSuggestion(undefined)}
+                onClick={discardAIDocSuggestion}
                 title="Dismiss AI suggestion"
               >
                 Dismiss

package/src/components/editor/editor-group/uml-editor/StereotypeSelector.tsx

@@ -84,6 +84,12 @@ export const StereotypeSelector = observer(
       darkTheme,
     } = props;
     const editorStore = useEditorStore();
+    // Follow the active app theme by default; the `darkTheme` prop, when
+    // provided, still overrides (e.g. for surfaces forced to a fixed look).
+    const darkMode =
+      darkTheme ??
+      !editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
 
     // Profile
     const profileOptions = editorStore.graphManagerState.usableProfiles
@@ -195,7 +201,7 @@ export const StereotypeSelector = observer(
               value={selectedProfile}
               placeholder="Choose a profile"
               filterOption={filterOption}
-              darkMode={Boolean(darkTheme)}
+              darkMode={darkMode}
             />
             <button
               className="stereotype-selector__profile__visit-btn"
@@ -215,12 +221,12 @@ export const StereotypeSelector = observer(
             value={selectedStereotype}
             placeholder="Choose a stereotype"
             filterOption={stereotypeFilterOption}
-            darkMode={Boolean(darkTheme)}
+            darkMode={darkMode}
           />
           {!isReadOnly && (
             <button
               className={clsx('uml-element-editor__remove-btn', {
-                'btn--dark btn--caution': darkTheme,
+                'btn--dark btn--caution': darkMode,
               })}
               disabled={isReadOnly}
               onClick={deleteStereotype}

package/src/components/editor/editor-group/uml-editor/TaggedValueEditor.tsx

@@ -88,6 +88,12 @@ export const TaggedValueEditor = observer(
       darkTheme,
     } = props;
     const editorStore = useEditorStore();
+    // Follow the active app theme by default; the `darkTheme` prop, when
+    // provided, still overrides (e.g. for surfaces forced to a fixed look).
+    const darkMode =
+      darkTheme ??
+      !editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
     // Name
     const changeValue: React.ChangeEventHandler<
       HTMLTextAreaElement | HTMLInputElement
@@ -204,7 +210,7 @@ export const TaggedValueEditor = observer(
               value={selectedProfile}
               placeholder="Choose a profile"
               filterOption={profileFilterOption}
-              darkMode={Boolean(darkTheme)}
+              darkMode={darkMode}
             />
             <button
               className="tagged-value-editor__profile__visit-btn"
@@ -226,12 +232,12 @@ export const TaggedValueEditor = observer(
             value={selectedTag}
             placeholder="Choose a tag"
             filterOption={tagFilterOption}
-            darkMode={Boolean(darkTheme)}
+            darkMode={darkMode}
           />
           {!isReadOnly && (
             <button
               className={clsx('uml-element-editor__remove-btn', {
-                'btn--dark btn--caution': darkTheme,
+                'btn--dark btn--caution': darkMode,
               })}
               disabled={isReadOnly}
               onClick={deleteValue}
@@ -249,7 +255,7 @@ export const TaggedValueEditor = observer(
             {isExpanded && (
               <textarea
                 className={clsx('tagged-value-editor__value__input', {
-                  'input--dark': darkTheme,
+                  'input--dark': darkMode,
                 })}
                 spellCheck={false}
                 disabled={isReadOnly}
@@ -261,7 +267,7 @@ export const TaggedValueEditor = observer(
             {!isExpanded && (
               <input
                 className={clsx('tagged-value-editor__value__input', {
-                  'input--dark': darkTheme,
+                  'input--dark': darkMode,
                 })}
                 spellCheck={false}
                 disabled={isReadOnly}

package/src/stores/editor/EditorGraphState.ts

@@ -91,6 +91,7 @@ import {
   SnowflakeM2MUdf,
   GraphEntities,
   HostedService,
+  Compute,
   DataProduct,
   IngestDefinition,
   MemSQLFunction,
@@ -876,6 +877,8 @@ export class EditorGraphState {
       return PACKAGEABLE_ELEMENT_TYPE.HOSTED_SERVICE;
     } else if (element instanceof DataProduct) {
       return PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT;
+    } else if (element instanceof Compute) {
+      return PACKAGEABLE_ELEMENT_TYPE._COMPUTE;
     } else if (element instanceof IngestDefinition) {
       return PACKAGEABLE_ELEMENT_TYPE.INGEST_DEFINITION;
     } else if (element instanceof MemSQLFunction) {