@finos/legend-extension-dsl-data-space 10.0.11 → 10.0.12

package/src/components/DataSpaceExecutionContextViewer.tsx

@@ -115,49 +115,56 @@ export const DataSpaceExecutionContextViewer = observer(
 
     return (
       <div className="data-space__viewer__panel">
-        <div className="data-space__viewer__execution-context">
-          <div className="data-space__viewer__execution-context__entry">
-            <div className="data-space__viewer__execution-context__entry__icon">
-              <PlayIcon className="data-space__viewer__execution-context__context-icon" />
-            </div>
-            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
-              <CustomSelectorInput
-                className="data-space__viewer__execution-context__entry__content__dropdown"
-                options={executionContextOptions}
-                onChange={onExecutionContextOptionChange}
-                value={selectedExecutionContextOption}
-                darkMode={
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                formatOptionLabel={formatExecutionContextOptionLabel}
-              />
-            </div>
+        <div className="data-space__viewer__panel__header">
+          <div className="data-space__viewer__panel__header__label">
+            Execution Context
           </div>
-          <div className="data-space__viewer__execution-context__entry data-space__viewer__execution-context__mapping">
-            <div className="data-space__viewer__execution-context__entry__icon">
-              <PURE_MappingIcon />
-            </div>
-            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__text">
-              {dataSpaceViewerState.currentExecutionContext.mapping.path}
+        </div>
+        <div className="data-space__viewer__panel__content">
+          <div className="data-space__viewer__execution-context">
+            <div className="data-space__viewer__execution-context__entry">
+              <div className="data-space__viewer__execution-context__entry__icon">
+                <PlayIcon className="data-space__viewer__execution-context__context-icon" />
+              </div>
+              <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+                <CustomSelectorInput
+                  className="data-space__viewer__execution-context__entry__content__dropdown"
+                  options={executionContextOptions}
+                  onChange={onExecutionContextOptionChange}
+                  value={selectedExecutionContextOption}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                  formatOptionLabel={formatExecutionContextOptionLabel}
+                />
+              </div>
             </div>
-          </div>
-          <div className="data-space__viewer__execution-context__entry">
-            <div className="data-space__viewer__execution-context__entry__icon">
-              <PURE_RuntimeIcon />
+            <div className="data-space__viewer__execution-context__entry data-space__viewer__execution-context__mapping">
+              <div className="data-space__viewer__execution-context__entry__icon">
+                <PURE_MappingIcon />
+              </div>
+              <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__text">
+                {dataSpaceViewerState.currentExecutionContext.mapping.path}
+              </div>
             </div>
-            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
-              <CustomSelectorInput
-                className="data-space__viewer__execution-context__entry__content__dropdown"
-                options={runtimeOptions}
-                onChange={onRuntimeOptionChange}
-                value={selectedRuntimeOption}
-                darkMode={
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                formatOptionLabel={formatRuntimeOptionLabel}
-              />
+            <div className="data-space__viewer__execution-context__entry">
+              <div className="data-space__viewer__execution-context__entry__icon">
+                <PURE_RuntimeIcon />
+              </div>
+              <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+                <CustomSelectorInput
+                  className="data-space__viewer__execution-context__entry__content__dropdown"
+                  options={runtimeOptions}
+                  onChange={onRuntimeOptionChange}
+                  value={selectedRuntimeOption}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                  formatOptionLabel={formatRuntimeOptionLabel}
+                />
+              </div>
             </div>
           </div>
         </div>

package/src/components/DataSpaceInfoPanel.tsx

@@ -27,141 +27,131 @@ export const DataSpaceInfoPanel = observer(
     const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
-    const viewProject = (): void =>
-      dataSpaceViewerState.viewProject(
-        dataSpaceViewerState.groupId,
-        dataSpaceViewerState.artifactId,
-        dataSpaceViewerState.versionId,
-        undefined,
-      );
+    const viewProject = (): void => dataSpaceViewerState.viewProject(undefined);
     const viewDataSpaceInProject = (): void =>
-      dataSpaceViewerState.viewProject(
-        dataSpaceViewerState.groupId,
-        dataSpaceViewerState.artifactId,
-        dataSpaceViewerState.versionId,
-        analysisResult.path,
-      );
+      dataSpaceViewerState.viewProject(analysisResult.path);
     const viewDataSpaceInSDLCProject = (): void => {
       dataSpaceViewerState
-        .viewSDLCProject(
-          dataSpaceViewerState.groupId,
-          dataSpaceViewerState.artifactId,
-          analysisResult.path,
-        )
+        .viewSDLCProject(analysisResult.path)
         .catch(applicationStore.alertUnhandledError);
     };
 
     return (
       <div className="data-space__viewer__panel">
-        <div className="data-space__viewer__info">
-          <div className="data-space__viewer__info__section">
-            <div className="data-space__viewer__info__section__entry">
-              <div className="data-space__viewer__info__project-info__label">
-                Project
+        <div className="data-space__viewer__panel__header">
+          <div className="data-space__viewer__panel__header__label">Info</div>
+        </div>
+        <div className="data-space__viewer__panel__content">
+          <div className="data-space__viewer__info">
+            <div className="data-space__viewer__info__section">
+              <div className="data-space__viewer__info__section__entry">
+                <div className="data-space__viewer__info__project-info__label">
+                  Project
+                </div>
+                <button
+                  className="data-space__viewer__info__project-info__value"
+                  tabIndex={-1}
+                  title="Click to View Project"
+                  onClick={viewProject}
+                >
+                  {generateGAVCoordinates(
+                    dataSpaceViewerState.groupId,
+                    dataSpaceViewerState.artifactId,
+                    dataSpaceViewerState.versionId,
+                  )}
+                </button>
+                <button
+                  className="data-space__viewer__info__project-info__link"
+                  tabIndex={-1}
+                  title="View Project"
+                  onClick={viewProject}
+                >
+                  <ExternalLinkIcon />
+                </button>
               </div>
-              <button
-                className="data-space__viewer__info__project-info__value"
-                tabIndex={-1}
-                title="Click to View Project"
-                onClick={viewProject}
-              >
-                {generateGAVCoordinates(
-                  dataSpaceViewerState.groupId,
-                  dataSpaceViewerState.artifactId,
-                  dataSpaceViewerState.versionId,
-                )}
-              </button>
-              <button
-                className="data-space__viewer__info__project-info__link"
-                tabIndex={-1}
-                title="View Project"
-                onClick={viewProject}
-              >
-                <ExternalLinkIcon />
-              </button>
-            </div>
-            <div className="data-space__viewer__info__section__entry">
-              <div className="data-space__viewer__info__project-info__label">
-                Data Space
+              <div className="data-space__viewer__info__section__entry">
+                <div className="data-space__viewer__info__project-info__label">
+                  Data Space
+                </div>
+                <button
+                  className="data-space__viewer__info__project-info__value"
+                  tabIndex={-1}
+                  title="Click to View Data Space"
+                  onClick={viewDataSpaceInProject}
+                >
+                  {analysisResult.path}
+                </button>
+                <button
+                  className="data-space__viewer__info__project-info__link"
+                  tabIndex={-1}
+                  title="Edit Data Space"
+                  onClick={viewDataSpaceInSDLCProject}
+                >
+                  <PencilIcon />
+                </button>
+                <button
+                  className="data-space__viewer__info__project-info__link"
+                  tabIndex={-1}
+                  title="View Data Space"
+                  onClick={viewDataSpaceInProject}
+                >
+                  <ExternalLinkIcon />
+                </button>
               </div>
-              <button
-                className="data-space__viewer__info__project-info__value"
-                tabIndex={-1}
-                title="Click to View Data Space"
-                onClick={viewDataSpaceInProject}
-              >
-                {analysisResult.path}
-              </button>
-              <button
-                className="data-space__viewer__info__project-info__link"
-                tabIndex={-1}
-                title="Edit Data Space"
-                onClick={viewDataSpaceInSDLCProject}
-              >
-                <PencilIcon />
-              </button>
-              <button
-                className="data-space__viewer__info__project-info__link"
-                tabIndex={-1}
-                title="View Data Space"
-                onClick={viewDataSpaceInProject}
-              >
-                <ExternalLinkIcon />
-              </button>
-            </div>
-          </div>
-          <div className="data-space__viewer__info__section">
-            <div className="data-space__viewer__info__section__title">
-              Tagged Values
             </div>
-            {analysisResult.taggedValues.length !== 0 &&
-              analysisResult.taggedValues.map((taggedValue) => (
-                <div
-                  key={taggedValue._UUID}
-                  className="data-space__viewer__info__section__entry"
-                >
+            <div className="data-space__viewer__info__section">
+              <div className="data-space__viewer__info__section__title">
+                Tagged Values
+              </div>
+              {analysisResult.taggedValues.length !== 0 &&
+                analysisResult.taggedValues.map((taggedValue) => (
                   <div
-                    className="data-space__viewer__info__tagged-value__tag"
-                    title={`${taggedValue.profile}.${taggedValue.tag}`}
+                    key={taggedValue._UUID}
+                    className="data-space__viewer__info__section__entry"
                   >
-                    {`${extractElementNameFromPath(taggedValue.profile)}.${
-                      taggedValue.tag
-                    }`}
-                  </div>
-                  <div className="data-space__viewer__info__tagged-value__value">
-                    {taggedValue.value}
+                    <div
+                      className="data-space__viewer__info__tagged-value__tag"
+                      title={`${taggedValue.profile}.${taggedValue.tag}`}
+                    >
+                      {`${extractElementNameFromPath(taggedValue.profile)}.${
+                        taggedValue.tag
+                      }`}
+                    </div>
+                    <div className="data-space__viewer__info__tagged-value__value">
+                      {taggedValue.value}
+                    </div>
                   </div>
+                ))}
+              {analysisResult.taggedValues.length === 0 && (
+                <div className="data-space__viewer__info__section__placeholder">
+                  (empty)
                 </div>
-              ))}
-            {analysisResult.taggedValues.length === 0 && (
-              <div className="data-space__viewer__info__section__placeholder">
-                (empty)
-              </div>
-            )}
-          </div>
-          <div className="data-space__viewer__info__section">
-            <div className="data-space__viewer__info__section__title">
-              Stereotypes
+              )}
             </div>
-            {analysisResult.stereotypes.length !== 0 &&
-              analysisResult.stereotypes.map((stereotype) => (
-                <div
-                  key={stereotype._UUID}
-                  className="data-space__viewer__info__section__entry"
-                  title={`${stereotype.profile}.${stereotype.value}`}
-                >
-                  <div className="data-space__viewer__info__steoreotype">
-                    {`${extractElementNameFromPath(stereotype.profile)}.${
-                      stereotype.value
-                    }`}
+            <div className="data-space__viewer__info__section">
+              <div className="data-space__viewer__info__section__title">
+                Stereotypes
+              </div>
+              {analysisResult.stereotypes.length !== 0 &&
+                analysisResult.stereotypes.map((stereotype) => (
+                  <div
+                    key={stereotype._UUID}
+                    className="data-space__viewer__info__section__entry"
+                    title={`${stereotype.profile}.${stereotype.value}`}
+                  >
+                    <div className="data-space__viewer__info__steoreotype">
+                      {`${extractElementNameFromPath(stereotype.profile)}.${
+                        stereotype.value
+                      }`}
+                    </div>
                   </div>
+                ))}
+              {analysisResult.stereotypes.length === 0 && (
+                <div className="data-space__viewer__info__section__placeholder">
+                  (empty)
                 </div>
-              ))}
-            {analysisResult.stereotypes.length === 0 && (
-              <div className="data-space__viewer__info__section__placeholder">
-                (empty)
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -41,11 +41,7 @@ import {
   CaretRightIcon,
   CaretLeftIcon,
 } from '@finos/legend-art';
-import {
-  DATA_SPACE_VIEWER_ACTIVITY_MODE,
-  generateAnchorForActivity,
-  type DataSpaceViewerState,
-} from '../stores/DataSpaceViewerState.js';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 import {
   DataSpaceAssociationDocumentationEntry,
@@ -57,7 +53,7 @@ import {
   type NormalizedDataSpaceDocumentationEntry,
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import { debounce, isNonNullable, prettyCONSTName } from '@finos/legend-shared';
-import { useApplicationStore } from '@finos/legend-application';
+import { useApplicationStore, useCommands } from '@finos/legend-application';
 import {
   CORE_PURE_PATH,
   ELEMENT_PATH_DELIMITER,
@@ -83,6 +79,10 @@ import {
   type DataGridCellRendererParams,
 } from '@finos/legend-lego/data-grid';
 import { FuzzySearchAdvancedConfigMenu } from '@finos/legend-lego/application';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+} from '../stores/DataSpaceViewerNavigation.js';
 
 const getMilestoningLabel = (val: string | undefined): string | undefined => {
   switch (val) {
@@ -408,7 +408,9 @@ const SubElementDocContentCellRenderer = observer(
       return null;
     }
 
-    const label = showHumanizedForm ? prettyCONSTName(data.text) : data.text;
+    let label = showHumanizedForm ? prettyCONSTName(data.text) : data.text;
+    const isDerivedProperty = label.endsWith('()');
+    label = isDerivedProperty ? label.slice(0, -2) : label;
 
     if (data.entry instanceof DataSpaceModelDocumentationEntry) {
       return null;
@@ -416,7 +418,9 @@ const SubElementDocContentCellRenderer = observer(
       return (
         <div
           className="data-space__viewer__models-documentation__grid__cell"
-          title={`Property: ${data.elementEntry.path}${PROPERTY_ACCESSOR}${data.entry.name}`}
+          title={`${isDerivedProperty ? 'Derived property' : 'Property'}: ${
+            data.elementEntry.path
+          }${PROPERTY_ACCESSOR}${data.entry.name}`}
         >
           <div className="data-space__viewer__models-documentation__grid__cell__label">
             <div className="data-space__viewer__models-documentation__grid__cell__label__icon data-space__viewer__models-documentation__grid__cell__label__icon--property">
@@ -425,6 +429,11 @@ const SubElementDocContentCellRenderer = observer(
             <div className="data-space__viewer__models-documentation__grid__cell__label__text">
               {label}
             </div>
+            {isDerivedProperty && (
+              <div className="data-space__viewer__models-documentation__grid__cell__label__derived-property-badge">
+                ()
+              </div>
+            )}
             {data.entry.milestoning && (
               <div
                 className="data-space__viewer__models-documentation__grid__cell__label__milestoning-badge"
@@ -943,7 +952,7 @@ const DataSpaceModelsDocumentationSearchBar = observer(
     // actions
     const clearSearchText = (): void => {
       documentationState.resetSearch();
-      searchInputRef.current?.focus();
+      documentationState.focusSearchInput();
     };
     const toggleSearchConfigMenu = (): void =>
       documentationState.setShowSearchConfigurationMenu(
@@ -951,14 +960,22 @@ const DataSpaceModelsDocumentationSearchBar = observer(
       );
     const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
       if (event.code === 'Escape') {
-        searchInputRef.current?.select();
+        documentationState.selectSearchInput();
       }
     };
 
     // search config menu
     const closeSearchConfigMenu = (): void =>
       documentationState.setShowSearchConfigurationMenu(false);
-    const onSearchConfigMenuOpen = (): void => searchInputRef.current?.focus();
+    const onSearchConfigMenuOpen = (): void =>
+      documentationState.focusSearchInput();
+
+    useEffect(() => {
+      if (searchInputRef.current) {
+        documentationState.setSearchInput(searchInputRef.current);
+      }
+      return () => documentationState.setSearchInput(undefined);
+    }, [documentationState]);
 
     return (
       <div className="data-space__viewer__models-documentation__search">
@@ -969,7 +986,7 @@ const DataSpaceModelsDocumentationSearchBar = observer(
           spellCheck={false}
           onChange={onSearchTextChange}
           value={searchText}
-          placeholder="Search documentation"
+          placeholder="Search (Ctrl + Shift + F)"
         />
         <button
           ref={searchConfigTriggerRef}
@@ -1040,6 +1057,8 @@ export const DataSpaceModelsDocumentation = observer(
       DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
     );
 
+    useCommands(dataSpaceViewerState.modelsDocumentationState);
+
     useEffect(() => {
       if (sectionRef.current) {
         dataSpaceViewerState.layoutState.setWikiPageAnchor(

package/src/components/DataSpacePlaceholder.tsx

@@ -14,8 +14,30 @@
  * limitations under the License.
  */
 
+import { SparkleIcon } from '@finos/legend-art';
+
 export const DataSpaceWikiPlaceholder: React.FC<{ message: string }> = (
   props,
 ) => (
   <div className="data-space__viewer__wiki__placeholder">{props.message}</div>
 );
+
+export const DataSpacePlaceholderPanel: React.FC<{
+  header: string;
+  message: string;
+}> = (props) => {
+  const { header, message } = props;
+
+  return (
+    <div className="data-space__viewer__panel">
+      <div className="data-space__viewer__panel__header">
+        <div className="data-space__viewer__panel__header__label">{header}</div>
+      </div>
+      <div className="data-space__viewer__panel__content">
+        <div className="data-space__viewer__panel__content__placeholder">
+          <SparkleIcon /> This is work in progress.{` ${message}`}
+        </div>
+      </div>
+    </div>
+  );
+};