@finos/legend-extension-dsl-data-space 10.4.255 → 10.4.257

package/src/components/DataSpaceDataAccess.tsx

@@ -15,14 +15,8 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import {
-  AnchorLinkIcon,
-  ExpandMoreIcon,
-  QuestionCircleIcon,
-  clsx,
-} from '@finos/legend-art';
+import { CollapsibleWikiSection } from '@finos/legend-extension-dsl-data-product';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
-import { useApplicationStore } from '@finos/legend-application';
 import { useEffect, useRef } from 'react';
 import {
   DATA_SPACE_VIEWER_ACTIVITY_MODE,
@@ -34,21 +28,10 @@ import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 export const DataSpaceDataAccess = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-    const applicationStore = useApplicationStore();
-    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
-    const documentationUrl = analysisResult.supportInfo?.documentationUrl;
     const sectionRef = useRef<HTMLDivElement>(null);
     const anchor = generateAnchorForActivity(
       DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
     );
-    const isCollapsed =
-      dataSpaceViewerState.layoutState.sectionCollapseState.isSectionCollapsed(
-        anchor,
-      );
-    const toggleCollapse = (): void =>
-      dataSpaceViewerState.layoutState.sectionCollapseState.toggleSectionCollapse(
-        anchor,
-      );
 
     useEffect(() => {
       if (sectionRef.current) {
@@ -60,56 +43,14 @@ export const DataSpaceDataAccess = observer(
       return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
     }, [dataSpaceViewerState, anchor]);
 
-    const seeDocumentation = (): void => {
-      if (documentationUrl) {
-        applicationStore.navigationService.navigator.visitAddress(
-          documentationUrl,
-        );
-      }
-    };
-
     return (
-      <div ref={sectionRef} className="data-space__viewer__wiki__section">
-        <div className="data-space__viewer__wiki__section__header">
-          <div className="data-space__viewer__wiki__section__header__label">
-            <button
-              className="data-space__viewer__wiki__section__header__caret-btn"
-              tabIndex={-1}
-              onClick={toggleCollapse}
-              title={isCollapsed ? 'Expand' : 'Collapse'}
-            >
-              <ExpandMoreIcon
-                className={clsx(
-                  'data-space__viewer__wiki__section__header__caret',
-                  {
-                    'data-space__viewer__wiki__section__header__caret--collapsed':
-                      isCollapsed,
-                  },
-                )}
-              />
-            </button>
-            Data Access
-            <button
-              className="data-space__viewer__wiki__section__header__anchor"
-              tabIndex={-1}
-              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
-            >
-              <AnchorLinkIcon />
-            </button>
-          </div>
-          {Boolean(documentationUrl) && (
-            <button
-              className="data-space__viewer__wiki__section__header__documentation"
-              tabIndex={-1}
-              onClick={seeDocumentation}
-              title="See Documentation"
-            >
-              <QuestionCircleIcon />
-            </button>
-          )}
-        </div>
-        {!isCollapsed && (
-          <div className="data-space__viewer__wiki__section__content">
+      <div ref={sectionRef} className="viewer__wiki__section">
+        <CollapsibleWikiSection
+          viewerState={dataSpaceViewerState}
+          section={DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS}
+          showDocumentation={true}
+        >
+          <div className="viewer__wiki__section__content">
             <div className="data-space__viewer__data-access">
               {dataSpaceViewerState.currentDataAccessState ? (
                 <DataAccessOverview
@@ -120,7 +61,7 @@ export const DataSpaceDataAccess = observer(
               )}
             </div>
           </div>
-        )}
+        </CollapsibleWikiSection>
       </div>
     );
   },

package/src/components/DataSpaceDescription.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AnchorLinkIcon, ExpandMoreIcon, clsx } from '@finos/legend-art';
+import { CollapsibleWikiSection } from '@finos/legend-extension-dsl-data-product';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { observer } from 'mobx-react-lite';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
@@ -33,14 +33,6 @@ export const DataSpaceDescription = observer(
     const anchor = generateAnchorForActivity(
       DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
     );
-    const isCollapsed =
-      dataSpaceViewerState.layoutState.sectionCollapseState.isSectionCollapsed(
-        anchor,
-      );
-    const toggleCollapse = (): void =>
-      dataSpaceViewerState.layoutState.sectionCollapseState.toggleSectionCollapse(
-        anchor,
-      );
 
     useEffect(() => {
       if (sectionRef.current) {
@@ -53,37 +45,12 @@ export const DataSpaceDescription = observer(
     }, [dataSpaceViewerState, anchor]);
 
     return (
-      <div ref={sectionRef} className="data-space__viewer__wiki__section">
-        <div className="data-space__viewer__wiki__section__header">
-          <div className="data-space__viewer__wiki__section__header__label">
-            <button
-              className="data-space__viewer__wiki__section__header__caret-btn"
-              tabIndex={-1}
-              onClick={toggleCollapse}
-              title={isCollapsed ? 'Expand' : 'Collapse'}
-            >
-              <ExpandMoreIcon
-                className={clsx(
-                  'data-space__viewer__wiki__section__header__caret',
-                  {
-                    'data-space__viewer__wiki__section__header__caret--collapsed':
-                      isCollapsed,
-                  },
-                )}
-              />
-            </button>
-            Description
-            <button
-              className="data-space__viewer__wiki__section__header__anchor"
-              tabIndex={-1}
-              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
-            >
-              <AnchorLinkIcon />
-            </button>
-          </div>
-        </div>
-        {!isCollapsed && (
-          <div className="data-space__viewer__wiki__section__content">
+      <div ref={sectionRef} className="viewer__wiki__section">
+        <CollapsibleWikiSection
+          viewerState={dataSpaceViewerState}
+          section={DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION}
+        >
+          <div className="viewer__wiki__section__content">
             {analysisResult.description !== undefined && (
               <div className="data-space__viewer__description">
                 <div className="data-space__viewer__description__content">
@@ -97,7 +64,7 @@ export const DataSpaceDescription = observer(
               <DataSpaceWikiPlaceholder message="(not specified)" />
             )}
           </div>
-        )}
+        </CollapsibleWikiSection>
       </div>
     );
   },

package/src/components/DataSpaceQualityEmote.tsx

@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) 2020-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 { observer } from 'mobx-react-lite';
+import { flowResult } from 'mobx';
+import { useEffect } from 'react';
+import { CircularProgress, Tooltip } from '@mui/material';
+import { clsx } from '@finos/legend-art';
+import {
+  DATA_SPACE_QUALITY_LEVEL,
+  type DataSpaceQualityBreakdown,
+  type DataSpaceQualityState,
+} from '../stores/DataSpaceQualityState.js';
+
+const QUALITY_EMOTE_CLASS_NAME = clsx(
+  'data-space__viewer__header__actions',
+  'data-space__viewer__header__quality-emote',
+);
+
+const TIER_STATUS_ICON = {
+  ACHIEVED: '✅',
+  NEXT: '➡️',
+  LOCKED: '🔒',
+};
+
+const QUALITY_EMOTE_CONFIG: Record<
+  DATA_SPACE_QUALITY_LEVEL,
+  { emoji: string; label: string }
+> = {
+  [DATA_SPACE_QUALITY_LEVEL.DIAMOND]: {
+    emoji: '💎',
+    label: 'Diamond quality',
+  },
+  [DATA_SPACE_QUALITY_LEVEL.PLATINUM]: {
+    emoji: '🏆',
+    label: 'Platinum quality',
+  },
+  [DATA_SPACE_QUALITY_LEVEL.GOLD]: { emoji: '🥇', label: 'Gold quality' },
+  [DATA_SPACE_QUALITY_LEVEL.SILVER]: { emoji: '🥈', label: 'Silver quality' },
+  [DATA_SPACE_QUALITY_LEVEL.BRONZE]: { emoji: '🥉', label: 'Bronze quality' },
+};
+
+const AI_READY_QUALITY_LEVELS: DATA_SPACE_QUALITY_LEVEL[] = [
+  DATA_SPACE_QUALITY_LEVEL.DIAMOND,
+  DATA_SPACE_QUALITY_LEVEL.PLATINUM,
+];
+
+// The full tier ladder, in order. Milestones are cumulative — reaching one implies every
+// requirement of the milestones before it is already satisfied — so a user's current tier
+// is exactly the last milestone they've achieved.
+const TIER_LADDER = [
+  DATA_SPACE_QUALITY_LEVEL.BRONZE,
+  DATA_SPACE_QUALITY_LEVEL.SILVER,
+  DATA_SPACE_QUALITY_LEVEL.GOLD,
+  DATA_SPACE_QUALITY_LEVEL.PLATINUM,
+  DATA_SPACE_QUALITY_LEVEL.DIAMOND,
+];
+
+const formatAttributeCoverageSuffix = (
+  breakdown: DataSpaceQualityBreakdown,
+): string =>
+  breakdown.attributeCoverage !== undefined
+    ? ` (currently ${Math.round(breakdown.attributeCoverage * 100)}%)`
+    : '';
+
+const getMilestoneRequirement = (
+  level: DATA_SPACE_QUALITY_LEVEL,
+  breakdown: DataSpaceQualityBreakdown,
+): string => {
+  switch (level) {
+    case DATA_SPACE_QUALITY_LEVEL.SILVER: {
+      const missing: string[] = [];
+      if (!breakdown.isDescriptionDocumented) {
+        missing.push('write a description (2+ sentences)');
+      }
+      if (!breakdown.isExecutablesPresent) {
+        missing.push('add Executables');
+      }
+      if (!breakdown.isModelsDocumentationPresent) {
+        missing.push('add Models Documentation');
+      }
+      return missing.length > 0
+        ? `Still needed: ${missing.join(', ')}.`
+        : 'Write a description (2+ sentences), and make sure Executables and Models Documentation are present.';
+    }
+    case DATA_SPACE_QUALITY_LEVEL.GOLD:
+      return breakdown.isEveryServiceDocumented
+        ? 'Describe at least 50% of attributes.'
+        : 'Describe every executable, and describe at least 50% of attributes.';
+    case DATA_SPACE_QUALITY_LEVEL.PLATINUM:
+      return `Describe 90%-95% of attributes${formatAttributeCoverageSuffix(breakdown)}.`;
+    case DATA_SPACE_QUALITY_LEVEL.DIAMOND:
+      return `Describe 95%+ of attributes${formatAttributeCoverageSuffix(breakdown)}. Coming soon: will also require MCPs + Verified NLQs ground truth.`;
+    case DATA_SPACE_QUALITY_LEVEL.BRONZE:
+    default:
+      return '';
+  }
+};
+
+// Renders the full tier ladder up to Diamond, not just the next milestone, and marks which
+// tiers unlock the AI-Ready stamp.
+const QualityRoadmap = observer(
+  (props: {
+    qualityLevel: DATA_SPACE_QUALITY_LEVEL;
+    breakdown: DataSpaceQualityBreakdown;
+  }): React.ReactNode => {
+    const { qualityLevel, breakdown } = props;
+    const config = QUALITY_EMOTE_CONFIG[qualityLevel];
+    const currentIndex = TIER_LADDER.indexOf(qualityLevel);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+        <div style={{ fontWeight: 700 }}>
+          {config.emoji} Current: {config.label}
+        </div>
+        {TIER_LADDER.slice(1).map((level, index) => {
+          const levelIndex = index + 1;
+          const isAchieved = currentIndex >= levelIndex;
+          const isNext = currentIndex === levelIndex - 1;
+          const levelConfig = QUALITY_EMOTE_CONFIG[level];
+          const isAiReadyMilestone = AI_READY_QUALITY_LEVELS.includes(level);
+          const statusIcon = isAchieved
+            ? TIER_STATUS_ICON.ACHIEVED
+            : isNext
+              ? TIER_STATUS_ICON.NEXT
+              : TIER_STATUS_ICON.LOCKED;
+          return (
+            <div
+              key={level}
+              style={{
+                fontWeight: isNext ? 700 : 400,
+                opacity: isNext ? 1 : 0.85,
+              }}
+            >
+              {statusIcon} {levelConfig.emoji} {levelConfig.label}
+              {isAiReadyMilestone ? ' (AI-Ready)' : ''}
+              {!isAchieved
+                ? ` — ${getMilestoneRequirement(level, breakdown)}`
+                : ''}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+export const DataSpaceQualityEmote = observer(
+  (props: { qualityState: DataSpaceQualityState }) => {
+    const { qualityState } = props;
+
+    useEffect(() => {
+      flowResult(qualityState.computeQuality()).catch(() => undefined);
+    }, [qualityState]);
+
+    if (!qualityState.isSupported) {
+      return null;
+    }
+
+    if (
+      qualityState.computingQualityState.isInInitialState ||
+      qualityState.computingQualityState.isInProgress
+    ) {
+      return (
+        <div className={QUALITY_EMOTE_CLASS_NAME}>
+          <CircularProgress size={12} />
+        </div>
+      );
+    }
+
+    if (!qualityState.qualityLevel || !qualityState.qualityBreakdown) {
+      return null;
+    }
+
+    const config = QUALITY_EMOTE_CONFIG[qualityState.qualityLevel];
+    const isAIReady = AI_READY_QUALITY_LEVELS.includes(
+      qualityState.qualityLevel,
+    );
+
+    return (
+      <Tooltip
+        title={
+          <QualityRoadmap
+            qualityLevel={qualityState.qualityLevel}
+            breakdown={qualityState.qualityBreakdown}
+          />
+        }
+        placement="bottom"
+      >
+        <div className={QUALITY_EMOTE_CLASS_NAME}>
+          AI Readiness Badge:{' '}
+          <span
+            className="data-space__viewer__header__quality-emote__icon"
+            aria-label={config.label}
+          >
+            {config.emoji}
+          </span>
+          {isAIReady && (
+            <span
+              className="data-space__viewer__header__quality-emote__ai-ready-stamp"
+              title="Documentation quality is high enough for reliable AI consumption"
+            >
+              AI-Ready
+            </span>
+          )}
+        </div>
+      </Tooltip>
+    );
+  },
+);

package/src/components/DataSpaceQuickStart.tsx

@@ -21,13 +21,15 @@ import {
   CodeIcon,
   CopyIcon,
   DataAccessIcon,
-  ExpandMoreIcon,
   LegendLogo,
   MoreVerticalIcon,
-  QuestionCircleIcon,
   StatisticsIcon,
   clsx,
 } from '@finos/legend-art';
+import {
+  CollapsibleChevron,
+  CollapsibleWikiSection,
+} from '@finos/legend-extension-dsl-data-product';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
@@ -471,14 +473,6 @@ const DataSpaceExecutableAnalysisResultView = observer(
     const executableAnalysisResult = executableState.value;
     const quickStartRef = useRef<HTMLDivElement>(null);
     const anchor = generateAnchorForQuickStart(executableAnalysisResult);
-    const isCollapsed =
-      dataSpaceViewerState.layoutState.sectionCollapseState.isSectionCollapsed(
-        anchor,
-      );
-    const toggleCollapse = (): void =>
-      dataSpaceViewerState.layoutState.sectionCollapseState.toggleSectionCollapse(
-        anchor,
-      );
 
     useEffect(() => {
       if (quickStartRef.current) {
@@ -510,37 +504,30 @@ const DataSpaceExecutableAnalysisResultView = observer(
     return (
       <div ref={quickStartRef} className="data-space__viewer__quickstart__item">
         <div className="data-space__viewer__quickstart__item__header">
-          <button
-            className="data-space__viewer__quickstart__item__header__caret-btn"
-            tabIndex={-1}
-            onClick={toggleCollapse}
-            title={isCollapsed ? 'Expand' : 'Collapse'}
-          >
-            <ExpandMoreIcon
-              className={clsx(
-                'data-space__viewer__quickstart__item__header__caret',
-                {
-                  'data-space__viewer__quickstart__item__header__caret--collapsed':
-                    isCollapsed,
-                },
-              )}
-            />
-          </button>
           <div className="data-space__viewer__quickstart__item__header__title">
             {executableAnalysisResult.title}
           </div>
           <div className="data-space__viewer__quickstart__item__header__type">
             {executableTypeLabel}
           </div>
+          <CollapsibleChevron
+            viewerState={dataSpaceViewerState}
+            anchor={anchor}
+          />
           <button
             className="data-space__viewer__quickstart__item__header__anchor"
             tabIndex={-1}
-            onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
+            onClick={() => {
+              dataSpaceViewerState.changeZone(anchor, true);
+              dataSpaceViewerState.copyLinkToClipboard(anchor);
+            }}
           >
             <AnchorLinkIcon />
           </button>
         </div>
-        {!isCollapsed && (
+        {!dataSpaceViewerState.layoutState.sectionCollapseState.isSectionCollapsed(
+          anchor,
+        ) && (
           <>
             {executableAnalysisResult.description !== undefined && (
               <div className="data-space__viewer__quickstart__item__description">
@@ -568,24 +555,11 @@ const DataSpaceExecutableAnalysisResultView = observer(
 export const DataSpaceQuickStart = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-    const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
-    const documentationUrl = analysisResult.supportInfo?.documentationUrl;
     const sectionRef = useRef<HTMLDivElement>(null);
     const anchor = generateAnchorForActivity(
       DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
     );
-    const executableAnchors = dataSpaceViewerState.executableStates.map(
-      (executableState) => generateAnchorForQuickStart(executableState.value),
-    );
-    const isCollapsed =
-      dataSpaceViewerState.layoutState.sectionCollapseState.areAllSectionsCollapsed(
-        executableAnchors,
-      );
-    const toggleCollapse = (): void =>
-      dataSpaceViewerState.layoutState.sectionCollapseState.toggleAllSectionsCollapse(
-        executableAnchors,
-      );
 
     useEffect(() => {
       if (sectionRef.current) {
@@ -597,71 +571,31 @@ export const DataSpaceQuickStart = observer(
       return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
     }, [dataSpaceViewerState, anchor]);
 
-    const seeDocumentation = (): void => {
-      if (documentationUrl) {
-        applicationStore.navigationService.navigator.visitAddress(
-          documentationUrl,
-        );
-      }
-    };
-
     return (
-      <div ref={sectionRef} className="data-space__viewer__wiki__section">
-        <div className="data-space__viewer__wiki__section__header">
-          <div className="data-space__viewer__wiki__section__header__label">
-            {executableAnchors.length > 0 && (
-              <button
-                className="data-space__viewer__wiki__section__header__caret-btn"
-                tabIndex={-1}
-                onClick={toggleCollapse}
-                title={isCollapsed ? 'Expand All' : 'Collapse All'}
-              >
-                <ExpandMoreIcon
-                  className={clsx(
-                    'data-space__viewer__wiki__section__header__caret',
-                    {
-                      'data-space__viewer__wiki__section__header__caret--collapsed':
-                        isCollapsed,
-                    },
-                  )}
-                />
-              </button>
+      <div ref={sectionRef} className="viewer__wiki__section">
+        <CollapsibleWikiSection
+          viewerState={dataSpaceViewerState}
+          section={DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START}
+          showDocumentation={true}
+        >
+          <div className="viewer__wiki__section__content">
+            {dataSpaceViewerState.executableStates.length !== 0 && (
+              <div className="data-space__viewer__quickstart">
+                {dataSpaceViewerState.executableStates.map(
+                  (executableState) => (
+                    <DataSpaceExecutableAnalysisResultView
+                      key={executableState.uuid}
+                      executableState={executableState}
+                    />
+                  ),
+                )}
+              </div>
+            )}
+            {analysisResult.executables.length === 0 && (
+              <DataSpaceWikiPlaceholder message="(not specified)" />
             )}
-            Quick Start
-            <button
-              className="data-space__viewer__wiki__section__header__anchor"
-              tabIndex={-1}
-              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
-            >
-              <AnchorLinkIcon />
-            </button>
           </div>
-          {Boolean(documentationUrl) && (
-            <button
-              className="data-space__viewer__wiki__section__header__documentation"
-              tabIndex={-1}
-              onClick={seeDocumentation}
-              title="See Documentation"
-            >
-              <QuestionCircleIcon />
-            </button>
-          )}
-        </div>
-        <div className="data-space__viewer__wiki__section__content">
-          {dataSpaceViewerState.executableStates.length !== 0 && (
-            <div className="data-space__viewer__quickstart">
-              {dataSpaceViewerState.executableStates.map((executableState) => (
-                <DataSpaceExecutableAnalysisResultView
-                  key={executableState.uuid}
-                  executableState={executableState}
-                />
-              ))}
-            </div>
-          )}
-          {analysisResult.executables.length === 0 && (
-            <DataSpaceWikiPlaceholder message="(not specified)" />
-          )}
-        </div>
+        </CollapsibleWikiSection>
       </div>
     );
   },