@finos/legend-extension-dsl-data-space 0.1.1 → 1.0.3

package/src/components/{query/DataSpaceViewer.tsx → DataSpaceViewer.tsx}

@@ -28,17 +28,21 @@ import {
   MappingIcon,
   RuntimeIcon,
   CogIcon,
-  StarIcon,
-  LightBulbIcon,
+  KeyIcon,
+  FlaskIcon,
+  ExternalLinkSquareIcon,
+  ExternalLinkIcon,
+  ShieldIcon,
+  TagsIcon,
 } from '@finos/legend-art';
 import type { Diagram } from '@finos/legend-extension-dsl-diagram';
 import { DiagramRenderer } from '@finos/legend-extension-dsl-diagram';
-import { DATA_SPACE_VIEWER_ACTIVITY_MODE } from '../../stores/query/DataSpaceQuerySetupState';
-import type { DataSpaceViewerState } from '../../stores/query/DataSpaceQuerySetupState';
-import { DataSpaceSupportEmail } from '../../models/metamodels/pure/model/packageableElements/dataSpace/DataSpace';
-import type { DataSpaceSupportInfo } from '../../models/metamodels/pure/model/packageableElements/dataSpace/DataSpace';
-import type { ResolvedDataSpaceExecutionContext } from '../../models/protocols/pure/DSLDataSpace_PureProtocolProcessorPlugin';
+import { DataSpaceSupportEmail } from '../models/metamodels/pure/model/packageableElements/dataSpace/DataSpace';
+import type { DataSpaceSupportInfo } from '../models/metamodels/pure/model/packageableElements/dataSpace/DataSpace';
+import type { ResolvedDataSpaceExecutionContext } from '../models/protocols/pure/DSLDataSpace_PureProtocolProcessorPlugin';
 import type { PackageableRuntime } from '@finos/legend-graph';
+import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState';
+import { DATA_SPACE_VIEWER_ACTIVITY_MODE } from '../stores/DataSpaceViewerState';
 
 interface DataSpaceViewerActivityConfig {
   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE;
@@ -107,11 +111,13 @@ const DataSpaceModelsOverview = observer(
 
     // diagram selector
     const diagramCanvasRef = useRef<HTMLDivElement>(null);
-    const diagramOptions = (
-      dataSpaceViewerState.showOnlyFeaturedDiagrams
-        ? dataSpaceViewerState.featuredDiagrams
-        : dataSpaceViewerState.diagrams
-    ).map(buildDiagramOption);
+    const diagramOptions = dataSpaceViewerState.featuredDiagrams
+      .concat(
+        dataSpaceViewerState.diagrams.filter(
+          (diagram) => !dataSpaceViewerState.featuredDiagrams.includes(diagram),
+        ),
+      )
+      .map(buildDiagramOption);
     const selectedDiagramOption = dataSpaceViewerState.currentDiagram
       ? buildDiagramOption(dataSpaceViewerState.currentDiagram)
       : null;
@@ -123,32 +129,26 @@ const DataSpaceModelsOverview = observer(
     const formatDiagramOptionLabel = (
       option: DiagramOption,
     ): React.ReactNode => (
-      <div className="query-setup__data-space__viewer__diagrams__dropdown__option">
-        <div className="query-setup__data-space__viewer__diagrams__dropdown__option__label">
+      <div className="data-space__viewer__diagrams__dropdown__option">
+        <div className="data-space__viewer__diagrams__dropdown__option__label">
           {option.label}
         </div>
         {dataSpaceViewerState.featuredDiagrams.includes(option.value) && (
-          <div className="query-setup__data-space__viewer__diagrams__dropdown__option__tag">
+          <div className="data-space__viewer__diagrams__dropdown__option__tag">
             featured
           </div>
         )}
       </div>
     );
 
-    // featured diagram toggler
-    const toggleShowFeaturedDiagrams = (): void =>
-      dataSpaceViewerState.setShowOnlyFeaturedDiagrams(
-        !dataSpaceViewerState.showOnlyFeaturedDiagrams,
-      );
-
     if (dataSpaceViewerState.diagrams.length === 0) {
       return <BlankPanelContent>No diagrams available</BlankPanelContent>;
     }
     return (
-      <div className="query-setup__data-space__viewer__main-panel__content query-setup__data-space__viewer__diagrams">
-        <div className="query-setup__data-space__viewer__diagrams__header">
+      <div className="data-space__viewer__main-panel__content data-space__viewer__diagrams">
+        <div className="data-space__viewer__diagrams__header">
           <CustomSelectorInput
-            className="query-setup__data-space__viewer__diagrams__diagram-selector"
+            className="data-space__viewer__diagrams__diagram-selector"
             options={diagramOptions}
             onChange={onDiagramOptionChange}
             value={selectedDiagramOption}
@@ -156,26 +156,8 @@ const DataSpaceModelsOverview = observer(
             darkMode={true}
             formatOptionLabel={formatDiagramOptionLabel}
           />
-          <div className="query-setup__data-space__viewer__diagrams__toggler">
-            <button
-              className={clsx(
-                'query-setup__data-space__viewer__diagrams__toggler__btn',
-                {
-                  'query-setup__data-space__viewer__diagrams__toggler__btn--active':
-                    dataSpaceViewerState.showOnlyFeaturedDiagrams,
-                },
-              )}
-              tabIndex={-1}
-              title={`[${
-                dataSpaceViewerState.showOnlyFeaturedDiagrams ? 'on' : 'off'
-              }] Toggle show only featured diagrams`}
-              onClick={toggleShowFeaturedDiagrams}
-            >
-              <StarIcon />
-            </button>
-          </div>
         </div>
-        <div className="query-setup__data-space__viewer__diagrams__content">
+        <div className="data-space__viewer__diagrams__content">
           {dataSpaceViewerState.currentDiagram && (
             <DataSpaceDiagramCanvas
               dataSpaceViewerState={dataSpaceViewerState}
@@ -184,14 +166,7 @@ const DataSpaceModelsOverview = observer(
             />
           )}
         </div>
-        <div className="query-setup__data-space__viewer__diagrams__footer">
-          <div className="query-setup__data-space__viewer__diagrams__footer__icon">
-            <LightBulbIcon />
-          </div>
-          <div className="query-setup__data-space__viewer__diagrams__footer__text">
-            Double-click a class to start a query for that class
-          </div>
-        </div>
+        <div className="data-space__viewer__diagrams__footer"></div>
       </div>
     );
   },
@@ -239,13 +214,13 @@ const DataSpaceExecutionViewer = observer(
     const formatExecutionContextOptionLabel = (
       option: ExecutionContextOption,
     ): React.ReactNode => (
-      <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option">
-        <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option__label">
+      <div className="data-space__viewer__execution__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution__entry__content__dropdown__option__label">
           {option.label}
         </div>
         {option.value ===
           dataSpaceViewerState.dataSpace.defaultExecutionContext && (
-          <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option__tag">
+          <div className="data-space__viewer__execution__entry__content__dropdown__option__tag">
             default
           </div>
         )}
@@ -266,13 +241,13 @@ const DataSpaceExecutionViewer = observer(
     const formatRuntimeOptionLabel = (
       option: RuntimeOption,
     ): React.ReactNode => (
-      <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option">
-        <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option__label">
+      <div className="data-space__viewer__execution__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution__entry__content__dropdown__option__label">
           {option.label}
         </div>
         {option.value ===
           dataSpaceViewerState.currentExecutionContext.defaultRuntime.value && (
-          <div className="query-setup__data-space__viewer__execution__entry__content__dropdown__option__tag">
+          <div className="data-space__viewer__execution__entry__content__dropdown__option__tag">
             default
           </div>
         )}
@@ -280,14 +255,14 @@ const DataSpaceExecutionViewer = observer(
     );
 
     return (
-      <div className="query-setup__data-space__viewer__main-panel__content query-setup__data-space__viewer__execution">
-        <div className="query-setup__data-space__viewer__execution__entry">
-          <div className="query-setup__data-space__viewer__execution__entry__icon">
-            <CogIcon className="query-setup__data-space__viewer__execution__context-icon" />
+      <div className="data-space__viewer__main-panel__content data-space__viewer__execution">
+        <div className="data-space__viewer__execution__entry">
+          <div className="data-space__viewer__execution__entry__icon">
+            <CogIcon className="data-space__viewer__execution__context-icon" />
           </div>
-          <div className="query-setup__data-space__viewer__execution__entry__content query-setup__data-space__viewer__execution__entry__content__dropdown__container">
+          <div className="data-space__viewer__execution__entry__content data-space__viewer__execution__entry__content__dropdown__container">
             <CustomSelectorInput
-              className="query-setup__data-space__viewer__execution__entry__content__dropdown"
+              className="data-space__viewer__execution__entry__content__dropdown"
               options={executionContextOptions}
               onChange={onExecutionContextOptionChange}
               value={selectedExecutionContextOption}
@@ -297,33 +272,30 @@ const DataSpaceExecutionViewer = observer(
           </div>
         </div>
         <div
-          className={clsx(
-            'query-setup__data-space__viewer__execution__description',
-            {
-              'query-setup__data-space__viewer__execution__description--empty':
-                !dataSpaceViewerState.currentExecutionContext.description,
-            },
-          )}
+          className={clsx('data-space__viewer__execution__description', {
+            'data-space__viewer__execution__description--empty':
+              !dataSpaceViewerState.currentExecutionContext.description,
+          })}
         >
           {dataSpaceViewerState.currentExecutionContext.description
             ? dataSpaceViewerState.currentExecutionContext.description
             : 'No description'}
         </div>
-        <div className="query-setup__data-space__viewer__execution__entry query-setup__data-space__viewer__execution__mapping">
-          <div className="query-setup__data-space__viewer__execution__entry__icon">
+        <div className="data-space__viewer__execution__entry data-space__viewer__execution__mapping">
+          <div className="data-space__viewer__execution__entry__icon">
             <MappingIcon />
           </div>
-          <div className="query-setup__data-space__viewer__execution__entry__content query-setup__data-space__viewer__execution__entry__content__text">
+          <div className="data-space__viewer__execution__entry__content data-space__viewer__execution__entry__content__text">
             {dataSpaceViewerState.currentExecutionContext.mapping.value.path}
           </div>
         </div>
-        <div className="query-setup__data-space__viewer__execution__entry">
-          <div className="query-setup__data-space__viewer__execution__entry__icon">
+        <div className="data-space__viewer__execution__entry">
+          <div className="data-space__viewer__execution__entry__icon">
             <RuntimeIcon />
           </div>
-          <div className="query-setup__data-space__viewer__execution__entry__content query-setup__data-space__viewer__execution__entry__content__dropdown__container">
+          <div className="data-space__viewer__execution__entry__content data-space__viewer__execution__entry__content__dropdown__container">
             <CustomSelectorInput
-              className="query-setup__data-space__viewer__execution__entry__content__dropdown"
+              className="data-space__viewer__execution__entry__content__dropdown"
               options={runtimeOptions}
               onChange={onRuntimeOptionChange}
               value={selectedRuntimeOption}
@@ -337,6 +309,68 @@ const DataSpaceExecutionViewer = observer(
   },
 );
 
+const DataSpaceTags = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+
+    const dataSpace = dataSpaceViewerState.dataSpace;
+
+    return (
+      <div className="data-space__viewer__tags">
+        <div className="data-space__viewer__tags__section">
+          <div className="data-space__viewer__tags__section__title">
+            Tagged Values
+          </div>
+          {dataSpace.taggedValues.length !== 0 &&
+            dataSpace.taggedValues.map((taggedValueData) => (
+              <div
+                key={taggedValueData.uuid}
+                className="data-space__viewer__tags__section__entry"
+              >
+                <div
+                  className="data-space__viewer__tags__tagged-value__tag"
+                  title={`${taggedValueData.profile}.${taggedValueData.tag}`}
+                >
+                  {taggedValueData.tag}
+                </div>
+                <div className="data-space__viewer__tags__tagged-value__value">
+                  {taggedValueData.value}
+                </div>
+              </div>
+            ))}
+          {dataSpace.taggedValues.length === 0 && (
+            <div className="data-space__viewer__tags__section__placeholder">
+              (empty)
+            </div>
+          )}
+        </div>
+        <div className="data-space__viewer__tags__section">
+          <div className="data-space__viewer__tags__section__title">
+            Stereotypes
+          </div>
+          {dataSpace.stereotypes.length !== 0 &&
+            dataSpace.stereotypes.map((stereotypeData) => (
+              <div
+                key={stereotypeData.uuid}
+                className="data-space__viewer__tags__section__entry"
+                title={`${stereotypeData.profile}.${stereotypeData.stereotype}`}
+              >
+                <div className="data-space__viewer__tags__steoreotype">
+                  {stereotypeData.stereotype}
+                </div>
+              </div>
+            ))}
+          {dataSpace.stereotypes.length === 0 && (
+            <div className="data-space__viewer__tags__section__placeholder">
+              (empty)
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
 const DataSpaceSupportEmailViewer = observer(
   (props: {
     dataSpaceViewerState: DataSpaceViewerState;
@@ -345,14 +379,14 @@ const DataSpaceSupportEmailViewer = observer(
     const { dataSpaceSupportEmail } = props;
 
     return (
-      <div className="query-setup__data-space__viewer__support-email">
-        <div className="query-setup__data-space__viewer__support-email__entry">
-          <div className="query-setup__data-space__viewer__support-email__entry__icon">
+      <div className="data-space__viewer__support-email">
+        <div className="data-space__viewer__support-email__entry">
+          <div className="data-space__viewer__support-email__entry__icon">
             <EnvelopIcon />
           </div>
           <a
             href={`mailto:${dataSpaceSupportEmail.address}`}
-            className="query-setup__data-space__viewer__support-email__entry__content"
+            className="data-space__viewer__support-email__entry__content"
           >
             {dataSpaceSupportEmail.address}
           </a>
@@ -395,7 +429,7 @@ export const DataSpaceViewer = observer(
 
     const activities: DataSpaceViewerActivityConfig[] = [
       {
-        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS,
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_OVERVIEW,
         title: 'Models Overview',
         icon: <ShapesIcon />,
       },
@@ -404,11 +438,26 @@ export const DataSpaceViewer = observer(
         title: 'Execution Context',
         icon: <PlayIcon />,
       },
-      // {
-      //   mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT,
-      //   title: 'Entitlement',
-      //   icon: <UserIcon />,
-      // },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT,
+        title: 'Entitlement',
+        icon: <KeyIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_DATA,
+        title: 'Test Data',
+        icon: <FlaskIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_COVERAGE,
+        title: 'Test Coverage',
+        icon: <ShieldIcon />,
+      },
+      {
+        mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.TAGS,
+        title: 'Tags',
+        icon: <TagsIcon />,
+      },
       {
         mode: DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT,
         title: 'Support',
@@ -416,53 +465,77 @@ export const DataSpaceViewer = observer(
       },
     ];
 
+    const viewDataSpaceProject = (): void =>
+      dataSpaceViewerState.viewProject?.(
+        dataSpaceViewerState.dataSpaceGroupId,
+        dataSpaceViewerState.dataSpaceArtifactId,
+        dataSpaceViewerState.dataSpaceVersionId,
+        dataSpace.path,
+      );
+    const viewProject = (): void =>
+      dataSpaceViewerState.viewProject?.(
+        dataSpace.groupId,
+        dataSpace.artifactId,
+        dataSpace.versionId,
+        undefined,
+      );
+
     return (
-      <div className="query-setup__data-space__viewer">
-        <div className="query-setup__data-space__viewer__header">
-          <div className="query-setup__data-space__viewer__path">
-            {dataSpace.path}
-          </div>
-          <div className="query-setup__data-space__viewer__gav">
-            <div className="query-setup__data-space__viewer__gav__group-id">
-              {dataSpace.groupId}
+      <div className="data-space__viewer">
+        <div className="data-space__viewer__header">
+          <button
+            className="data-space__viewer__path"
+            tabIndex={-1}
+            title="View Data Space in Project"
+            onClick={viewDataSpaceProject}
+          >
+            <div className="data-space__viewer__path__label">
+              {dataSpace.path}
             </div>
-            <div className="query-setup__data-space__viewer__gav__separator">
-              :
+            <div className="data-space__viewer__path__link">
+              <ExternalLinkSquareIcon />
             </div>
-            <div className="query-setup__data-space__viewer__gav__artifact-id">
-              {dataSpace.artifactId}
+          </button>
+          <button
+            className="data-space__viewer__gav"
+            tabIndex={-1}
+            title="View Project"
+            onClick={viewProject}
+          >
+            <div className="data-space__viewer__gav__group-id">
+              {dataSpace.groupId}
             </div>
-            <div className="query-setup__data-space__viewer__gav__separator">
-              :
+            <div className="data-space__viewer__gav__separator">:</div>
+            <div className="data-space__viewer__gav__artifact-id">
+              {dataSpace.artifactId}
             </div>
-            <div className="query-setup__data-space__viewer__gav__version-id">
+            <div className="data-space__viewer__gav__separator">:</div>
+            <div className="data-space__viewer__gav__version-id">
               {dataSpace.versionId}
             </div>
-          </div>
+            <div className="data-space__viewer__gav__link">
+              <ExternalLinkIcon />
+            </div>
+          </button>
           <div
-            className={clsx('query-setup__data-space__viewer__description', {
-              'query-setup__data-space__viewer__description--empty':
-                !dataSpace.description,
+            className={clsx('data-space__viewer__description', {
+              'data-space__viewer__description--empty': !dataSpace.description,
             })}
           >
             {dataSpace.description ? dataSpace.description : 'No description'}
           </div>
         </div>
-        <div className="query-setup__data-space__viewer__content">
-          <div className="query-setup__data-space__viewer__body">
-            <div className="query-setup__data-space__viewer__activity-bar">
-              <div className="query-setup__data-space__viewer__activity-bar__items">
+        <div className="data-space__viewer__content">
+          <div className="data-space__viewer__body">
+            <div className="data-space__viewer__activity-bar">
+              <div className="data-space__viewer__activity-bar__items">
                 {activities.map((activity) => (
                   <button
                     key={activity.mode}
-                    className={clsx(
-                      'query-setup__data-space__viewer__activity-bar__item',
-                      {
-                        'query-setup__data-space__viewer__activity-bar__item--active':
-                          dataSpaceViewerState.currentActivity ===
-                          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}
@@ -472,9 +545,9 @@ export const DataSpaceViewer = observer(
                 ))}
               </div>
             </div>
-            <div className="query-setup__data-space__viewer__main-panel">
+            <div className="data-space__viewer__main-panel">
               {dataSpaceViewerState.currentActivity ===
-                DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS && (
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_OVERVIEW && (
                 <DataSpaceModelsOverview
                   dataSpaceViewerState={dataSpaceViewerState}
                 />
@@ -485,9 +558,31 @@ export const DataSpaceViewer = observer(
                   dataSpaceViewerState={dataSpaceViewerState}
                 />
               )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.ENTITLEMENT && (
+                <BlankPanelContent>
+                  Request entitlement(s) (Work in Progress)
+                </BlankPanelContent>
+              )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_DATA && (
+                <BlankPanelContent>
+                  View test data (Work in Progress)
+                </BlankPanelContent>
+              )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.TEST_COVERAGE && (
+                <BlankPanelContent>
+                  View test coverage (Work in Progress)
+                </BlankPanelContent>
+              )}
+              {dataSpaceViewerState.currentActivity ===
+                DATA_SPACE_VIEWER_ACTIVITY_MODE.TAGS && (
+                <DataSpaceTags dataSpaceViewerState={dataSpaceViewerState} />
+              )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT && (
-                <div className="query-setup__data-space__viewer__main-panel__content query-setup__data-space__viewer__support-info">
+                <div className="data-space__viewer__main-panel__content data-space__viewer__support-info">
                   <DataSpaceSupportInfoViewerInner
                     dataSpaceViewerState={dataSpaceViewerState}
                     dataSpaceSupportInfo={dataSpace.supportInfo}

package/src/components/query/{DSLDataSpace_QueryPlugin.tsx → DSLDataSpace_LegendQueryPlugin.tsx}

@@ -16,26 +16,21 @@
 
 import packageJson from '../../../package.json';
 import type {
-  QueryPluginManager,
   QuerySetupOptionRendererConfiguration,
   QuerySetupRenderer,
   QuerySetupState,
   QuerySetupStore,
 } from '@finos/legend-query';
-import { QueryPlugin } from '@finos/legend-query';
+import { LegendQueryPlugin } from '@finos/legend-query';
 import { SquareIcon } from '@finos/legend-art';
 import { DataSpaceQuerySetupState } from '../../stores/query/DataSpaceQuerySetupState';
 import { DataspaceQuerySetup } from './DataSpaceQuerySetup';
 
-export class DSLDataSpace_QueryPlugin extends QueryPlugin {
+export class DSLDataSpace_LegendQueryPlugin extends LegendQueryPlugin {
   constructor() {
     super(packageJson.extensions.queryPlugin, packageJson.version);
   }
 
-  install(pluginManager: QueryPluginManager): void {
-    pluginManager.registerQueryPlugin(this);
-  }
-
   override getExtraQuerySetupOptionRendererConfigurations(): QuerySetupOptionRendererConfiguration[] {
     return [
       {

package/src/components/query/DataSpaceQuerySetup.tsx

@@ -17,6 +17,7 @@
 import { useApplicationStore } from '@finos/legend-application';
 import type { SelectComponent } from '@finos/legend-art';
 import {
+  BoltIcon,
   ArrowRightIcon,
   clsx,
   BlankPanelContent,
@@ -26,7 +27,8 @@ import {
   CustomSelectorInput,
   SearchIcon,
 } from '@finos/legend-art';
-import { useQuerySetupStore, useQueryStore } from '@finos/legend-query';
+import { useQuerySetupStore, useLegendQueryStore } from '@finos/legend-query';
+import { generateGAVCoordinates } from '@finos/legend-server-depot';
 import { debounce } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -35,7 +37,7 @@ import type {
   DataSpaceQuerySetupState,
   LightDataSpace,
 } from '../../stores/query/DataSpaceQuerySetupState';
-import { DataSpaceViewer } from './DataSpaceViewer';
+import { DataSpaceViewer } from '../DataSpaceViewer';
 
 type DataSpaceOption = { label: string; value: LightDataSpace };
 const buildDataSpaceOption = (dataSpace: LightDataSpace): DataSpaceOption => ({
@@ -48,10 +50,17 @@ export const DataspaceQuerySetup = observer(
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
-    const queryStore = useQueryStore();
+    const queryStore = useLegendQueryStore();
     const dataSpaceSearchRef = useRef<SelectComponent>(null);
     const [searchText, setSearchText] = useState('');
 
+    const toggleGetSnapshot = (): void => {
+      querySetupState.setToGetSnapShot(!querySetupState.toGetSnapShot);
+      flowResult(querySetupState.loadDataSpaces(searchText)).catch(
+        applicationStore.alertIllegalUnhandledError,
+      );
+    };
+
     const next = (): void => {
       if (querySetupState.dataSpaceViewerState) {
         flowResult(querySetupState.proceedToCreateQuery()).catch(
@@ -88,8 +97,11 @@ export const DataspaceQuerySetup = observer(
           {option.label}
         </div>
         <div className="query-setup__data-space__option__gav">
-          {option.value.content.groupId}:{option.value.content.artifactId}:
-          {option.value.content.versionId}
+          {generateGAVCoordinates(
+            option.value.groupId,
+            option.value.artifactId,
+            option.value.versionId,
+          )}
         </div>
       </div>
     );
@@ -174,6 +186,19 @@ export const DataspaceQuerySetup = observer(
               darkMode={true}
               formatOptionLabel={formatQueryOptionLabel}
             />
+            <button
+              className={clsx('query-setup__data-space__use-snapshot-btn', {
+                'query-setup__data-space__use-snapshot-btn--active':
+                  querySetupState.toGetSnapShot,
+              })}
+              tabIndex={-1}
+              title={`[${
+                querySetupState.toGetSnapShot ? 'on' : 'off'
+              }] Toggle show data spaces from snapshot releases instead of latest releases`}
+              onClick={toggleGetSnapshot}
+            >
+              <BoltIcon />
+            </button>
           </div>
           <div className="query-setup__data-space__view">
             <PanelLoadingIndicator