@finos/legend-extension-dsl-data-space 9.1.3 → 9.1.5

package/src/components/DataSpaceViewerActivityBar.tsx

@@ -0,0 +1,215 @@
+/**
+ * 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 {
+  ShapesIcon,
+  PlayIcon,
+  QuestionCircleIcon,
+  clsx,
+  InfoCircleIcon,
+  DocumentationIcon,
+  LaunchIcon,
+  DataAccessIcon,
+  GovernanceIcon,
+  CostCircleIcon,
+  DatasetIcon,
+  AvailabilityIcon,
+  HomeIcon,
+  MenuContent,
+  MenuContentItem,
+  MenuIcon,
+  DropdownMenu,
+} from '@finos/legend-art';
+import {
+  type DataSpaceViewerState,
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+} from '../stores/DataSpaceViewerState.js';
+
+const ActivityBarMenu = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+
+    // actions
+    const toggleExpandedMode = (): void =>
+      dataSpaceViewerState.enableExpandedMode(
+        !dataSpaceViewerState.isExpandedModeEnabled,
+      );
+
+    return (
+      <>
+        <div className="data-space__viewer__activity-bar__menu">
+          <DropdownMenu
+            className="data-space__viewer__activity-bar__menu-item"
+            menuProps={{
+              anchorOrigin: { vertical: 'top', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'left' },
+              elevation: 7,
+            }}
+            content={
+              <MenuContent>
+                <MenuContentItem onClick={toggleExpandedMode}>
+                  {dataSpaceViewerState.isExpandedModeEnabled
+                    ? 'Disable Expanded Mode'
+                    : 'Enable Expanded Mode'}{' '}
+                </MenuContentItem>
+              </MenuContent>
+            }
+          >
+            <MenuIcon />
+          </DropdownMenu>
+        </div>
+      </>
+    );
+  },
+);
+
+interface DataSpaceViewerActivityConfig {
+  mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
+  title: string;
+  icon: React.ReactElement;
+}
+
+export const DataSpaceViewerActivityBar = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const changeActivity =
+      (activity: DATA_SPACE_VIEWER_ACTIVITY_MODE): (() => void) =>
+      (): void =>
+        dataSpaceViewerState.setCurrentActivity(activity);
+
+    const wikiActivities: DataSpaceViewerActivityConfig[] = [
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
+        title: 'Description',
+        icon: (
+          <HomeIcon className="data-space__viewer__activity-bar__icon--home" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
+        title: 'Diagrams',
+        icon: <ShapesIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
+        title: 'Models Documentation',
+        icon: <DocumentationIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
+        title: 'Quick Start',
+        icon: (
+          <LaunchIcon className="data-space__viewer__activity-bar__icon--launch" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
+        title: 'Data Access',
+        icon: (
+          <DataAccessIcon className="data-space__viewer__activity-bar__icon--access" />
+        ),
+      },
+    ];
+
+    const activities: DataSpaceViewerActivityConfig[] = [
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.EXECUTION_CONTEXT,
+        title: 'Execution Context',
+        icon: <PlayIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_STORES,
+        title: 'Data Stores',
+        icon: (
+          <DatasetIcon className="data-space__viewer__activity-bar__icon--dataset" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_AVAILABILITY,
+        title: 'Data Availability',
+        icon: (
+          <AvailabilityIcon className="data-space__viewer__activity-bar__icon--availability" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_COST,
+        title: 'Data Cost',
+        icon: (
+          <CostCircleIcon className="data-space__viewer__activity-bar__icon--cost" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_GOVERNANCE,
+        title: 'Governance',
+        icon: (
+          <GovernanceIcon className="data-space__viewer__activity-bar__icon--governance" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO,
+        title: 'Info',
+        icon: (
+          <InfoCircleIcon className="data-space__viewer__activity-bar__icon--info" />
+        ),
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT,
+        title: 'Support',
+        icon: (
+          <QuestionCircleIcon className="data-space__viewer__activity-bar__icon--support" />
+        ),
+      },
+    ];
+
+    return (
+      <div className="data-space__viewer__activity-bar">
+        <ActivityBarMenu dataSpaceViewerState={dataSpaceViewerState} />
+        <div className="data-space__viewer__activity-bar__items">
+          {wikiActivities.map((activity) => (
+            <button
+              key={activity.mode}
+              className={clsx('data-space__viewer__activity-bar__item', {
+                'data-space__viewer__activity-bar__item--active':
+                  dataSpaceViewerState.currentActivity === activity.mode,
+              })}
+              onClick={changeActivity(activity.mode)}
+              tabIndex={-1}
+              title={activity.title}
+            >
+              {activity.icon}
+            </button>
+          ))}
+          <div className="data-space__viewer__activity-bar__divider" />
+          {activities.map((activity) => (
+            <button
+              key={activity.mode}
+              className={clsx('data-space__viewer__activity-bar__item', {
+                'data-space__viewer__activity-bar__item--active':
+                  dataSpaceViewerState.currentActivity === activity.mode,
+              })}
+              onClick={changeActivity(activity.mode)}
+              tabIndex={-1}
+              title={activity.title}
+            >
+              {activity.icon}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceWiki.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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 { MarkdownTextViewer } from '@finos/legend-art';
+import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { observer } from 'mobx-react-lite';
+import { DataSpaceDiagramViewer } from './DataSpaceDiagramViewer.js';
+import { DataSpaceModelsDocumentation } from './DataSpaceModelsDocumentation.js';
+
+const DataSpaceDescription = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+
+    return (
+      <div className="data-space__viewer__wiki__section">
+        <div className="data-space__viewer__wiki__section__header">
+          Description
+        </div>
+        <div className="data-space__viewer__wiki__section__content">
+          <div className="data-space__viewer__description">
+            {analysisResult.description !== undefined && (
+              <div className="data-space__viewer__description__content">
+                <MarkdownTextViewer
+                  className="data-space__viewer__description__content__markdown-content"
+                  value={{
+                    value: analysisResult.description,
+                  }}
+                  components={{
+                    h1: 'h2',
+                    h2: 'h3',
+                    h3: 'h4',
+                  }}
+                />
+              </div>
+            )}
+            {analysisResult.description === undefined && (
+              <div className="data-space__viewer__description--empty">
+                No description
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const DataSpaceWiki = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+
+    return (
+      <div className="data-space__viewer__wiki">
+        <DataSpaceDescription dataSpaceViewerState={dataSpaceViewerState} />
+        <DataSpaceDiagramViewer dataSpaceViewerState={dataSpaceViewerState} />
+        <DataSpaceModelsDocumentation
+          dataSpaceViewerState={dataSpaceViewerState}
+        />
+      </div>
+    );
+  },
+);

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -239,7 +239,7 @@ export const DataSpaceAdvancedSearchModal = observer(
                           <TimesCircleIcon />
                         </div>
                         <div className="data-space-advanced-search__dialog__view--failed__text">
-                          Can&apos;t load data space
+                          {`Can't load data space`}
                         </div>
                       </div>
                     </BlankPanelContent>

package/src/components/studio/DSL_DataSpace_LegendStudioApplicationPlugin.tsx

@@ -34,7 +34,6 @@ import {
   type ExplorerContextMenuItemRendererConfiguration,
   type EditorExtensionStateCreator,
   type EditorExtensionComponentRendererConfiguration,
-  type LegendStudioApplicationPageEntry,
 } from '@finos/legend-application-studio';
 import {
   PackageableElementExplicitReference,
@@ -62,8 +61,6 @@ import {
   DataSpacePreviewDialog,
   DataSpacePreviewAction,
 } from './DataSpacePreviewAction.js';
-import { DATA_SPACE_STUDIO_ROUTE_PATTERN } from '../../application/studio/DSL_DataSpace_LegendStudioNavigation.js';
-import { DataSpacePreview } from './DataSpacePreview.js';
 
 const DATA_SPACE_ELEMENT_TYPE = 'DATA SPACE';
 const DATA_SPACE_ELEMENT_PROJECT_EXPLORER_DND_TYPE =
@@ -77,18 +74,6 @@ export class DSL_DataSpace_LegendStudioApplicationPlugin
     super(packageJson.extensions.applicationStudioPlugin, packageJson.version);
   }
 
-  override getExtraApplicationPageEntries(): LegendStudioApplicationPageEntry[] {
-    return [
-      // data space preview
-      {
-        key: 'data-space-preview',
-        urlPatterns: [DATA_SPACE_STUDIO_ROUTE_PATTERN.PREVIEW],
-        renderer: DataSpacePreview,
-        bypassSDLC: true,
-      },
-    ];
-  }
-
   override getExtraRequiredDocumentationKeys(): string[] {
     return [
       DSL_DATA_SPACE_LEGEND_STUDIO_DOCUMENTATION_KEY.CONCEPT_ELEMENT_DATA_SPACE,

package/src/components/studio/DataSpacePreviewAction.tsx

@@ -113,7 +113,7 @@ export const DataSpacePreviewDialog = observer(() => {
                       <TimesCircleIcon />
                     </div>
                     <div className="data-space-preview__dialog__content--failed__text">
-                      Can&apos;t load data space
+                      {`Can't load data space`}
                     </div>
                   </div>
                 </BlankPanelContent>

package/src/graph/DSL_DataSpace_HashUtils.ts

@@ -17,7 +17,8 @@
 export enum DATA_SPACE_HASH_STRUCTURE {
   DATA_SPACE = 'DATA_SPACE',
   DATA_SPACE_EXECUTION_CONTEXT = 'DATA_SPACE_EXECUTION_CONTEXT',
-  DATA_SPACE_SAMPLE_TDS_QUERY = 'DATA_SPACE_SAMPLE_TDS_QUERY',
-  DATA_SPACE_SAMPLE_TDS_QUERY_COLUMN = 'DATA_SPACE_SAMPLE_TDS_QUERY_COLUMN',
+  DATA_SPACE_EXECUTABLE = 'DATA_SPACE_EXECUTABLE',
+  DATA_SPACE_DIAGRAM = 'DATA_SPACE_DIAGRAM',
+  DATA_SPACE_SUPPORT_COMBINED_INFO = 'DATA_SPACE_SUPPORT_COMBINED_INFO',
   DATA_SPACE_SUPPORT_EMAIL = 'DATA_SPACE_SUPPORT_EMAIL',
 }

package/src/graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.ts

@@ -29,6 +29,8 @@ import { DATA_SPACE_HASH_STRUCTURE } from '../../../../../DSL_DataSpace_HashUtil
 import type { Diagram } from '@finos/legend-extension-dsl-diagram';
 
 export abstract class DataSpaceSupportInfo implements Hashable {
+  documentationUrl?: string | undefined;
+
   abstract get hashCode(): string;
 }
 
@@ -41,13 +43,36 @@ export class DataSpaceSupportEmail
   get hashCode(): string {
     return hashArray([
       DATA_SPACE_HASH_STRUCTURE.DATA_SPACE_SUPPORT_EMAIL,
+      this.documentationUrl ?? '',
       this.address,
     ]);
   }
 }
 
+export class DataSpaceSupportCombinedInfo
+  extends DataSpaceSupportInfo
+  implements Hashable
+{
+  emails?: string[] | undefined;
+  website?: string | undefined;
+  faqUrl?: string | undefined;
+  supportUrl?: string | undefined;
+
+  get hashCode(): string {
+    return hashArray([
+      DATA_SPACE_HASH_STRUCTURE.DATA_SPACE_SUPPORT_COMBINED_INFO,
+      this.documentationUrl ?? '',
+      hashArray(this.emails ?? []),
+      this.website ?? '',
+      this.faqUrl ?? '',
+      this.supportUrl ?? '',
+    ]);
+  }
+}
+
 export class DataSpaceExecutionContext implements Hashable {
   name!: string;
+  title?: string | undefined;
   description?: string | undefined;
   mapping!: PackageableElementReference<Mapping>;
   defaultRuntime!: PackageableElementReference<PackageableRuntime>;
@@ -56,6 +81,7 @@ export class DataSpaceExecutionContext implements Hashable {
     return hashArray([
       DATA_SPACE_HASH_STRUCTURE.DATA_SPACE_EXECUTION_CONTEXT,
       this.name,
+      this.title ?? '',
       this.description ?? '',
       this.mapping.valueForSerialization ?? '',
       this.defaultRuntime.valueForSerialization ?? '',
@@ -63,6 +89,36 @@ export class DataSpaceExecutionContext implements Hashable {
   }
 }
 
+export class DataSpaceExecutable implements Hashable {
+  title!: string;
+  description?: string | undefined;
+  executable!: PackageableElementReference<PackageableElement>;
+
+  get hashCode(): string {
+    return hashArray([
+      DATA_SPACE_HASH_STRUCTURE.DATA_SPACE_EXECUTABLE,
+      this.title,
+      this.description ?? '',
+      this.executable.valueForSerialization ?? '',
+    ]);
+  }
+}
+
+export class DataSpaceDiagram implements Hashable {
+  title!: string;
+  description?: string | undefined;
+  diagram!: PackageableElementReference<Diagram>;
+
+  get hashCode(): string {
+    return hashArray([
+      DATA_SPACE_HASH_STRUCTURE.DATA_SPACE_DIAGRAM,
+      this.title,
+      this.description ?? '',
+      this.diagram.valueForSerialization ?? '',
+    ]);
+  }
+}
+
 export type DataSpaceElement = Class | Enumeration | Association;
 
 export class DataSpace extends PackageableElement implements Hashable {
@@ -72,6 +128,8 @@ export class DataSpace extends PackageableElement implements Hashable {
   defaultExecutionContext!: DataSpaceExecutionContext;
   featuredDiagrams?: PackageableElementReference<Diagram>[] | undefined;
   elements?: PackageableElementReference<DataSpaceElement>[] | undefined;
+  executables?: DataSpaceExecutable[] | undefined;
+  diagrams?: DataSpaceDiagram[] | undefined;
   supportInfo?: DataSpaceSupportInfo | undefined;
 
   protected override get _elementHashCode(): string {
@@ -95,6 +153,8 @@ export class DataSpace extends PackageableElement implements Hashable {
           (element) => element.valueForSerialization ?? '',
         ),
       ),
+      hashArray(this.executables ?? []),
+      hashArray(this.diagrams ?? []),
       this.supportInfo ?? '',
     ]);
   }

package/src/graphManager/action/analytics/DataSpaceAnalysis.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import type { Diagram } from '@finos/legend-extension-dsl-diagram';
 import type {
   Mapping,
   PackageableRuntime,
@@ -22,15 +21,11 @@ import type {
 } from '@finos/legend-graph';
 import { uuid } from '@finos/legend-shared';
 import type { DataSpaceSupportInfo } from '../../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
-import {
-  HACKY__SHOWCASE1,
-  type HACKY__DataSpaceUsageShowcase,
-  HACKY__SHOWCASE2,
-  HACKY__SHOWCASE3,
-} from './HACKY__DataSpaceUsageShowcase.js';
+import type { Diagram } from '@finos/legend-extension-dsl-diagram';
 
 export class DataSpaceExecutionContextAnalysisResult {
   name!: string;
+  title?: string | undefined;
   description?: string | undefined;
   mapping!: Mapping;
   defaultRuntime!: PackageableRuntime;
@@ -69,28 +64,64 @@ export class DataSpaceDocumentationEntry {
   }
 }
 
+export class DataSpaceDiagramAnalysisResult {
+  title!: string;
+  description?: string | undefined;
+  diagram!: Diagram;
+}
+
+export abstract class DataSpaceExecutableInfo {
+  query!: string;
+}
+
+export class DataSpaceServiceExecutableInfo extends DataSpaceExecutableInfo {
+  pattern!: string;
+  mapping?: string | undefined;
+  runtime?: string | undefined;
+}
+
+export abstract class DataSpaceExecutableResult {}
+
+export class DataSpaceExecutableTDSResultColumn {
+  name!: string;
+  type?: string | undefined;
+  relationalType?: string | undefined;
+  documentation?: string | undefined;
+}
+
+export class DataSpaceExecutableTDSResult extends DataSpaceExecutableResult {
+  columns: DataSpaceExecutableTDSResultColumn[] = [];
+}
+
+export class DataSpaceExecutableAnalysisResult {
+  title!: string;
+  description?: string | undefined;
+  executable!: string;
+  info?: DataSpaceExecutableInfo | undefined;
+  result!: DataSpaceExecutableResult;
+}
+
 export class DataSpaceAnalysisResult {
   name!: string;
   package!: string;
   path!: string;
+
   taggedValues: DataSpaceTaggedValueInfo[] = [];
   stereotypes: DataSpaceStereotypeInfo[] = [];
+
   title?: string | undefined;
   description?: string | undefined;
-  supportInfo?: DataSpaceSupportInfo | undefined;
 
   graph!: PureModel;
 
   executionContextsIndex!: Map<string, DataSpaceExecutionContextAnalysisResult>;
   defaultExecutionContext!: DataSpaceExecutionContextAnalysisResult;
 
-  featuredDiagrams: Diagram[] = [];
-
   elementDocs: DataSpaceDocumentationEntry[] = [];
 
-  HACKY__usageShowcases: HACKY__DataSpaceUsageShowcase[] = [
-    HACKY__SHOWCASE1,
-    HACKY__SHOWCASE2,
-    HACKY__SHOWCASE3,
-  ];
+  diagrams: DataSpaceDiagramAnalysisResult[] = [];
+
+  executables: DataSpaceExecutableAnalysisResult[] = [];
+
+  supportInfo?: DataSpaceSupportInfo | undefined;
 }