@finos/legend-extension-dsl-data-space 10.1.93 → 10.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-data-space",
-  "version": "10.1.93",
+  "version": "10.1.95",
   "description": "Legend extension for Data Space DSL",
   "keywords": [
     "legend",
@@ -44,17 +44,17 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.72",
-    "@finos/legend-application-query": "13.2.18",
-    "@finos/legend-application-studio": "28.16.5",
-    "@finos/legend-art": "7.1.24",
-    "@finos/legend-extension-dsl-diagram": "8.0.149",
-    "@finos/legend-graph": "31.9.5",
-    "@finos/legend-lego": "1.2.18",
-    "@finos/legend-query-builder": "4.14.18",
-    "@finos/legend-server-depot": "6.0.37",
-    "@finos/legend-shared": "10.0.33",
-    "@finos/legend-storage": "3.0.83",
+    "@finos/legend-application": "15.0.73",
+    "@finos/legend-application-query": "13.2.20",
+    "@finos/legend-application-studio": "28.16.7",
+    "@finos/legend-art": "7.1.25",
+    "@finos/legend-extension-dsl-diagram": "8.0.151",
+    "@finos/legend-graph": "31.9.6",
+    "@finos/legend-lego": "1.2.19",
+    "@finos/legend-query-builder": "4.14.20",
+    "@finos/legend-server-depot": "6.0.38",
+    "@finos/legend-shared": "10.0.34",
+    "@finos/legend-storage": "3.0.84",
     "@types/react": "18.2.31",
     "mobx": "6.10.2",
     "mobx-react-lite": "4.0.5",

package/src/__lib__/query/DSL_DataSpace_LegendQueryNavigation.ts

@@ -101,7 +101,7 @@ export const generateDataSpaceQueryCreatorRoute = (
     }),
   );
 
-export const generateDataSpaceTemplateQueryViewerRoute = (
+export const generateDataSpaceTemplateQueryCreatorRoute = (
   groupId: string,
   artifactId: string,
   versionId: string,

package/src/components/DSL_DataSpace_LegendApplicationPlugin.tsx

@@ -23,8 +23,12 @@ import {
 } from '@finos/legend-application';
 import packageJson from '../../package.json' assert { type: 'json' };
 import type {
+  CuratedTemplateQuery,
+  CuratedTemplateQuerySpecification,
   LoadQueryFilterOption,
+  QueryBuilderState,
   QueryBuilder_LegendApplicationPlugin_Extension,
+  TemplateQueryPanelContentRenderer,
 } from '@finos/legend-query-builder';
 import { DataSpaceQueryBuilderState } from '../stores/query/DataSpaceQueryBuilderState.js';
 import {
@@ -34,6 +38,9 @@ import {
 import { DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_CONFIG } from '../__lib__/DSL_DataSpace_LegendApplicationCommand.js';
 import type { QuerySearchSpecification } from '@finos/legend-graph';
 import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
+import { renderDataSpaceQueryBuilderTemplateQueryPanelContent } from './query/DataSpaceQueryBuilderTemplateQueryPanelContent.js';
+import { DataSpaceExecutableTemplate } from '../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import { filterByType } from '@finos/legend-shared';
 
 export class DSL_DataSpace_LegendApplicationPlugin
   extends LegendApplicationPlugin
@@ -114,4 +121,86 @@ export class DSL_DataSpace_LegendApplicationPlugin
       },
     ];
   }
+
+  getQueryFilterOptionsRelatedToTemplateQuery(): (
+    queryBuilderState: QueryBuilderState,
+  ) => string[] {
+    return (queryBuilderState): string[] => {
+      if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
+        return ['Current Data Space'];
+      }
+      return [];
+    };
+  }
+
+  getExtraTemplateQueryPanelContentRenderer(): TemplateQueryPanelContentRenderer[] {
+    return [
+      (queryBuilderState: QueryBuilderState): React.ReactNode => {
+        if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
+          return renderDataSpaceQueryBuilderTemplateQueryPanelContent(
+            queryBuilderState,
+          );
+        }
+        return undefined;
+      },
+    ];
+  }
+
+  getCuratedTemplateQuerySpecifications(): CuratedTemplateQuerySpecification[] {
+    return [
+      {
+        getCuratedTemplateQueries: (
+          queryBuilderState,
+        ): CuratedTemplateQuery[] => {
+          if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
+            const executableTemplates =
+              queryBuilderState.dataSpace.executables?.filter(
+                filterByType(DataSpaceExecutableTemplate),
+              );
+            return executableTemplates
+              ? executableTemplates.map(
+                  (e) =>
+                    ({
+                      title: e.title,
+                      description: e.description,
+                      query: e.query,
+                      executionContextKey:
+                        e.executionContextKey ??
+                        queryBuilderState.dataSpace.defaultExecutionContext
+                          .name,
+                    }) as CuratedTemplateQuery,
+                )
+              : [];
+          }
+          return [];
+        },
+        loadCuratedTemplateQuery: (
+          templateQuery: CuratedTemplateQuery,
+          queryBuilderState: QueryBuilderState,
+        ): void => {
+          if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
+            if (
+              queryBuilderState.executionContext.name !==
+              templateQuery.executionContextKey
+            ) {
+              const executionContext =
+                queryBuilderState.dataSpace.executionContexts.find(
+                  (c) => c.name === templateQuery.executionContextKey,
+                );
+              if (executionContext) {
+                queryBuilderState.setExecutionContext(executionContext);
+                queryBuilderState.propagateExecutionContextChange(
+                  executionContext,
+                );
+                queryBuilderState.initializeWithQuery(templateQuery.query);
+                queryBuilderState.onExecutionContextChange?.(executionContext);
+              }
+            } else {
+              queryBuilderState.initializeWithQuery(templateQuery.query);
+            }
+          }
+        },
+      },
+    ];
+  }
 }

package/src/components/DataSpaceDiagramViewer.tsx

@@ -235,6 +235,7 @@ const buildDiagramOption = (
 const DataSpaceDiagramViewerHeader = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const applicationStore = dataSpaceViewerState.applicationStore;
     const diagramViewerState = dataSpaceViewerState.diagramViewerState;
     const diagramOptions =
       dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.map(
@@ -275,7 +276,10 @@ const DataSpaceDiagramViewerHeader = observer(
             onChange={onDiagramOptionChange}
             value={selectedDiagramOption}
             placeholder="Search for a diagram"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
           <div className="data-space__viewer__diagram-viewer__header__navigation__pager">
             <input

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -543,14 +543,20 @@ const DataSpaceModelsDocumentationGridPanel = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const documentationState = dataSpaceViewerState.modelsDocumentationState;
+    const darkMode =
+      !dataSpaceViewerState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
 
     return (
       <div
         className={clsx(
-          'data-space__viewer__models-documentation__grid data-space__viewer__grid ag-theme-balham-dark',
+          'data-space__viewer__models-documentation__grid',
+          'data-space__viewer__grid',
           {
             'data-space__viewer__models-documentation__grid--shrink':
               documentationState.showFilterPanel,
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
           },
         )}
       >

package/src/components/DataSpaceQuickStart.tsx

@@ -149,6 +149,8 @@ const DataSpaceExecutableTDSResultView = observer(
       extractTDSExecutableActionConfigurations.find(
         (config) => config.key === selectedTab,
       );
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     return (
       <div className="data-space__viewer__quickstart__item__content">
@@ -277,7 +279,16 @@ const DataSpaceExecutableTDSResultView = observer(
         </div>
         <div className="data-space__viewer__quickstart__item__content__tab__content">
           {selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (
-            <div className="data-space__viewer__quickstart__tds__column-specs data-space__viewer__grid ag-theme-balham-dark">
+            <div
+              className={clsx(
+                'data-space__viewer__quickstart__tds__column-specs',
+                'data-space__viewer__grid',
+                {
+                  'ag-theme-balham': !darkMode,
+                  'ag-theme-balham-dark': darkMode,
+                },
+              )}
+            >
               <DataGrid
                 rowData={columnSpecifications}
                 gridOptions={{

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -153,7 +153,9 @@ export const DataSpaceAdvancedSearchModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal data-space-advanced-search__dialog"
         >
           <ModalHeader className="data-space-advanced-search__dialog__header">
@@ -185,7 +187,10 @@ export const DataSpaceAdvancedSearchModal = observer(
                 placeholder="Search for data space by name..."
                 isClearable={true}
                 escapeClearsValue={true}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 formatOptionLabel={formatDataSpaceOptionLabel}
               />
               <button

package/src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 {
+  PanelHeader,
+  FilterIcon,
+  BasePopover,
+  ClickAwayListener,
+  ShareIcon,
+  TagIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { DataSpaceExecutableTemplate } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import type { DataSpaceQueryBuilderState } from '../../stores/query/DataSpaceQueryBuilderState.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { generateDataSpaceTemplateQueryCreatorRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+
+const DataSpaceTemplateQueryDialog = observer(
+  (props: {
+    triggerElement: HTMLElement | null;
+    queryBuilderState: DataSpaceQueryBuilderState;
+    templateQueries: DataSpaceExecutableTemplate[];
+  }) => {
+    const { triggerElement, queryBuilderState, templateQueries } = props;
+    const applicationStore = useApplicationStore();
+    const handleClose = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(false);
+    };
+
+    const loadTemplateQuery = (template: DataSpaceExecutableTemplate): void => {
+      const executionContext =
+        queryBuilderState.dataSpace.executionContexts.find(
+          (c) => c.name === template.executionContextKey,
+        );
+      if (
+        executionContext &&
+        executionContext.hashCode !==
+          queryBuilderState.executionContext.hashCode
+      ) {
+        queryBuilderState.setExecutionContext(executionContext);
+        queryBuilderState.propagateExecutionContextChange(executionContext);
+        queryBuilderState.initializeWithQuery(template.query);
+        queryBuilderState.onExecutionContextChange?.(executionContext);
+      } else {
+        queryBuilderState.initializeWithQuery(template.query);
+      }
+      handleClose();
+    };
+
+    const loadQuery = (template: DataSpaceExecutableTemplate): void => {
+      if (queryBuilderState.changeDetectionState.hasChanged) {
+        applicationStore.alertService.setActionAlertInfo({
+          message:
+            'Unsaved changes will be lost if you continue. Do you still want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => loadTemplateQuery(template),
+            },
+            {
+              label: 'Abort',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        loadTemplateQuery(template);
+      }
+    };
+
+    const visitTemplateQuery = (
+      template: DataSpaceExecutableTemplate,
+    ): void => {
+      if (queryBuilderState.projectInfo?.groupId) {
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
+            generateDataSpaceTemplateQueryCreatorRoute(
+              queryBuilderState.projectInfo.groupId,
+              queryBuilderState.projectInfo.artifactId,
+              queryBuilderState.projectInfo.versionId,
+              queryBuilderState.dataSpace.path,
+              template.title,
+            ),
+          ),
+        );
+      }
+    };
+
+    return (
+      <ClickAwayListener onClickAway={handleClose}>
+        <div>
+          <BasePopover
+            open={queryBuilderState.isTemplateQueryDialogOpen}
+            PaperProps={{
+              classes: {
+                root: '"query-builder__data-space__template-query-panel__container__root',
+              },
+            }}
+            className="query-builder__data-space__template-query-panel__container"
+            onClose={handleClose}
+            anchorEl={triggerElement}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+          >
+            <div className="query-builder__data-space__template-query-panel">
+              <div className="query-builder__data-space__template-query-panel__header">
+                Curated Template Queries
+              </div>
+              {templateQueries.map((query) => (
+                <div
+                  key={query.title}
+                  className="query-builder__data-space__template-query-panel__query"
+                >
+                  <TagIcon className="query-builder__data-space__template-query-panel__query__icon" />
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__entry"
+                    title="click to load template query"
+                    onClick={() => loadQuery(query)}
+                  >
+                    <div className="query-builder__data-space__template-query-panel__query__entry__content">
+                      <div className="query-builder__data-space__template-query-panel__query__entry__content__title">
+                        {query.title}
+                      </div>
+                      {query.description && (
+                        <div className="query-builder__data-space__template-query-panel__query__entry__content__description">
+                          {query.description}
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__share"
+                    title="Visit..."
+                    onClick={() => visitTemplateQuery(query)}
+                  >
+                    <ShareIcon />
+                    <div className="query-builder__data-space__template-query-panel__query__share__label">
+                      Visit
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </BasePopover>
+        </div>
+      </ClickAwayListener>
+    );
+  },
+);
+
+const DataSpaceQueryBuilderTemplateQueryPanel = observer(
+  (props: { queryBuilderState: DataSpaceQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const templateQueryButtonRef = useRef<HTMLButtonElement>(null);
+    const templateQueries = queryBuilderState.dataSpace.executables?.filter(
+      (e) => e instanceof DataSpaceExecutableTemplate,
+    ) as DataSpaceExecutableTemplate[] | undefined;
+
+    const showTemplateQueries = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(true);
+    };
+
+    return (
+      <>
+        {templateQueries && templateQueries.length > 0 && (
+          <PanelHeader className="query-builder__data-space__template-query">
+            <div className="query-builder__data-space__template-query__title">
+              <FilterIcon />
+            </div>
+            <button
+              className="query-builder__data-space__template-query__btn"
+              ref={templateQueryButtonRef}
+              onClick={showTemplateQueries}
+            >
+              Template ( {templateQueries.length} )
+            </button>
+            {queryBuilderState.isTemplateQueryDialogOpen && (
+              <DataSpaceTemplateQueryDialog
+                triggerElement={templateQueryButtonRef.current}
+                queryBuilderState={queryBuilderState}
+                templateQueries={templateQueries}
+              />
+            )}
+          </PanelHeader>
+        )}
+      </>
+    );
+  },
+);
+
+export const renderDataSpaceQueryBuilderTemplateQueryPanelContent = (
+  queryBuilderState: DataSpaceQueryBuilderState,
+): React.ReactNode => (
+  <DataSpaceQueryBuilderTemplateQueryPanel
+    queryBuilderState={queryBuilderState}
+  />
+);

package/src/components/studio/DataSpacePreviewAction.tsx

@@ -59,6 +59,7 @@ export const DataSpacePreviewAction = observer(
 
 export const DataSpacePreviewDialog = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const dataSpacePreviewState =
     DataSpacePreviewState.retrieveNullableState(editorStore);
   if (!dataSpacePreviewState) {
@@ -81,7 +82,9 @@ export const DataSpacePreviewDialog = observer(() => {
       }}
     >
       <Modal
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
         className="editor-modal data-space-preview__dialog"
       >
         <ModalHeader className="data-space-preview__dialog__header">

package/src/stores/query/DataSpaceQueryBuilderState.ts

@@ -146,6 +146,7 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
   dataSpaces: DataSpaceInfo[] = [];
   showRuntimeSelector = false;
   advancedSearchState?: DataSpaceAdvancedSearchState | undefined;
+  isTemplateQueryDialogOpen = false;
 
   constructor(
     applicationStore: GenericLegendApplicationStore,
@@ -172,10 +173,12 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
       executionContext: observable,
       showRuntimeSelector: observable,
       advancedSearchState: observable,
+      isTemplateQueryDialogOpen: observable,
       showAdvancedSearchPanel: action,
       hideAdvancedSearchPanel: action,
       setExecutionContext: action,
       setShowRuntimeSelector: action,
+      setTemplateQueryDialogOpen: action,
       loadDataSpaces: flow,
     });
 
@@ -197,6 +200,10 @@ export class DataSpaceQueryBuilderState extends QueryBuilderState {
       : 'query-builder__setup__data-space';
   }
 
+  setTemplateQueryDialogOpen(val: boolean): void {
+    this.isTemplateQueryDialogOpen = val;
+  }
+
   showAdvancedSearchPanel(): void {
     if (this.projectInfo && this.isAdvancedDataSpaceSearchEnabled) {
       this.advancedSearchState = new DataSpaceAdvancedSearchState(

package/src/stores/query/DataSpaceTemplateQueryCreatorStore.ts

@@ -39,7 +39,7 @@ import {
   DataSpaceProjectInfo,
 } from './DataSpaceQueryBuilderState.js';
 import type { DataSpaceInfo } from './DataSpaceInfo.js';
-import { generateDataSpaceTemplateQueryViewerRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+import { generateDataSpaceTemplateQueryCreatorRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
 import {
   DataSpaceExecutableTemplate,
   type DataSpaceExecutionContext,
@@ -149,7 +149,7 @@ export class DataSpaceTemplateQueryCreatorStore extends QueryEditorStore {
       (dataSpaceInfo: DataSpaceInfo) => {
         if (dataSpaceInfo.defaultExecutionContext) {
           this.applicationStore.navigationService.navigator.goToLocation(
-            generateDataSpaceTemplateQueryViewerRoute(
+            generateDataSpaceTemplateQueryCreatorRoute(
               guaranteeNonNullable(dataSpaceInfo.groupId),
               guaranteeNonNullable(dataSpaceInfo.artifactId),
               LATEST_VERSION_ALIAS, //always default to latest
@@ -167,7 +167,7 @@ export class DataSpaceTemplateQueryCreatorStore extends QueryEditorStore {
       dataSpaceAnalysisResult,
       (ec: DataSpaceExecutionContext) => {
         this.applicationStore.navigationService.navigator.updateCurrentLocation(
-          generateDataSpaceTemplateQueryViewerRoute(
+          generateDataSpaceTemplateQueryCreatorRoute(
             this.groupId,
             this.artifactId,
             this.versionId,

package/tsconfig.json

@@ -93,6 +93,7 @@
     "./src/components/query/DSL_DataSpace_LegendQueryApplicationPlugin.tsx",
     "./src/components/query/DataSpaceAdvancedSearchModal.tsx",
     "./src/components/query/DataSpaceQueryBuilder.tsx",
+    "./src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx",
     "./src/components/query/DataSpaceQueryCreator.tsx",
     "./src/components/query/DataSpaceQuerySetup.tsx",
     "./src/components/query/DataSpaceTemplateQueryCreator.tsx",