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

package/src/components/DataSpaceDiagramViewer.tsx

@@ -15,7 +15,7 @@
  */
 
 import {
-  BlankPanelContent,
+  AnchorLinkIcon,
   CircleIcon,
   ThinChevronLeftIcon,
   ThinChevronRightIcon,
@@ -34,6 +34,7 @@ import {
   getNullableLastElement,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
+import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 
 const DataSpaceDiagramCanvas = observer(
   forwardRef<
@@ -115,75 +116,82 @@ export const DataSpaceDiagramViewer = observer(
       );
     };
 
-    if (analysisResult.diagrams.length === 0) {
-      return <BlankPanelContent>No diagrams available</BlankPanelContent>;
-    }
     return (
       <div className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
-          Diagrams
+          <div className="data-space__viewer__wiki__section__header__label">
+            Diagrams
+            <div className="data-space__viewer__wiki__section__header__anchor">
+              <AnchorLinkIcon />
+            </div>
+          </div>
         </div>
         <div className="data-space__viewer__wiki__section__content">
-          <div className="data-space__viewer__diagram-viewer">
-            <div className="data-space__viewer__diagram-viewer__carousel">
-              <div className="data-space__viewer__diagram-viewer__carousel__frame">
-                <div className="data-space__viewer__diagram-viewer__carousel__frame__display">
-                  {dataSpaceViewerState.currentDiagram && (
-                    <DataSpaceDiagramCanvas
-                      dataSpaceViewerState={dataSpaceViewerState}
-                      diagram={dataSpaceViewerState.currentDiagram.diagram}
-                      ref={diagramCanvasRef}
-                    />
-                  )}
-                </div>
-                <button
-                  className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
-                  tabIndex={-1}
-                  title="Previous"
-                  disabled={
-                    getNullableFirstElement(analysisResult.diagrams) ===
-                    dataSpaceViewerState.currentDiagram
-                  }
-                  onClick={showPreviousDiagram}
-                >
-                  <ThinChevronLeftIcon />
-                </button>
-                <button
-                  className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
-                  tabIndex={-1}
-                  title="Next"
-                  disabled={
-                    getNullableLastElement(analysisResult.diagrams) ===
-                    dataSpaceViewerState.currentDiagram
-                  }
-                  onClick={showNextDiagram}
-                >
-                  <ThinChevronRightIcon />
-                </button>
-                <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators">
-                  <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
-                    {analysisResult.diagrams.map((diagram) => (
-                      <button
-                        key={diagram.diagram.path}
-                        className={clsx(
-                          'data-space__viewer__diagram-viewer__carousel__frame__indicator',
-                          {
-                            'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
-                              dataSpaceViewerState.currentDiagram === diagram,
-                          },
-                        )}
-                        onClick={() =>
-                          dataSpaceViewerState.setCurrentDiagram(diagram)
-                        }
-                      >
-                        <CircleIcon />
-                      </button>
-                    ))}
+          {analysisResult.diagrams.length > 0 && (
+            <div className="data-space__viewer__diagram-viewer">
+              <div className="data-space__viewer__diagram-viewer__carousel">
+                <div className="data-space__viewer__diagram-viewer__carousel__frame">
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__display">
+                    {dataSpaceViewerState.currentDiagram && (
+                      <DataSpaceDiagramCanvas
+                        dataSpaceViewerState={dataSpaceViewerState}
+                        diagram={dataSpaceViewerState.currentDiagram.diagram}
+                        ref={diagramCanvasRef}
+                      />
+                    )}
+                  </div>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
+                    tabIndex={-1}
+                    title="Previous"
+                    disabled={
+                      getNullableFirstElement(analysisResult.diagrams) ===
+                      dataSpaceViewerState.currentDiagram
+                    }
+                    onClick={showPreviousDiagram}
+                  >
+                    <ThinChevronLeftIcon />
+                  </button>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
+                    tabIndex={-1}
+                    title="Next"
+                    disabled={
+                      getNullableLastElement(analysisResult.diagrams) ===
+                      dataSpaceViewerState.currentDiagram
+                    }
+                    onClick={showNextDiagram}
+                  >
+                    <ThinChevronRightIcon />
+                  </button>
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators">
+                    <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
+                      {analysisResult.diagrams.map((diagram) => (
+                        <button
+                          key={diagram.diagram.path}
+                          className={clsx(
+                            'data-space__viewer__diagram-viewer__carousel__frame__indicator',
+                            {
+                              'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
+                                dataSpaceViewerState.currentDiagram === diagram,
+                            },
+                          )}
+                          onClick={() =>
+                            dataSpaceViewerState.setCurrentDiagram(diagram)
+                          }
+                        >
+                          <CircleIcon />
+                        </button>
+                      ))}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
+          )}
+          {analysisResult.diagrams.length <= 0 && (
+            <DataSpaceWikiPlaceholder message="No diagrams provided" />
+          )}
         </div>
       </div>
     );

package/src/components/DataSpaceExecutionContextViewer.tsx

@@ -16,15 +16,15 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  clsx,
   CustomSelectorInput,
   PURE_MappingIcon,
   PURE_RuntimeIcon,
-  CogIcon,
+  PlayIcon,
 } from '@finos/legend-art';
 import { type PackageableRuntime } from '@finos/legend-graph';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
+import { useApplicationStore } from '@finos/legend-application';
 
 type ExecutionContextOption = {
   label: string;
@@ -49,6 +49,7 @@ const buildRuntimeOption = (value: PackageableRuntime): RuntimeOption => ({
 export const DataSpaceExecutionContextViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const executionContexts = Array.from(
       dataSpaceViewerState.dataSpaceAnalysisResult.executionContextsIndex.values(),
@@ -117,7 +118,7 @@ export const DataSpaceExecutionContextViewer = observer(
         <div className="data-space__viewer__execution-context">
           <div className="data-space__viewer__execution-context__entry">
             <div className="data-space__viewer__execution-context__entry__icon">
-              <CogIcon className="data-space__viewer__execution-context__context-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
@@ -125,24 +126,14 @@ export const DataSpaceExecutionContextViewer = observer(
                 options={executionContextOptions}
                 onChange={onExecutionContextOptionChange}
                 value={selectedExecutionContextOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 formatOptionLabel={formatExecutionContextOptionLabel}
               />
             </div>
           </div>
-          <div
-            className={clsx(
-              'data-space__viewer__execution-context__description',
-              {
-                'data-space__viewer__execution-context__description--empty':
-                  !dataSpaceViewerState.currentExecutionContext.description,
-              },
-            )}
-          >
-            {dataSpaceViewerState.currentExecutionContext.description
-              ? dataSpaceViewerState.currentExecutionContext.description
-              : 'No description'}
-          </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 />
@@ -161,7 +152,10 @@ export const DataSpaceExecutionContextViewer = observer(
                 options={runtimeOptions}
                 onChange={onRuntimeOptionChange}
                 value={selectedRuntimeOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 formatOptionLabel={formatRuntimeOptionLabel}
               />
             </div>

package/src/components/DataSpaceMarkdownTextViewer.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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';
+
+export const DataSpaceMarkdownTextViewer: React.FC<{ value: string }> = (
+  props,
+) => (
+  <MarkdownTextViewer
+    className="data-space__viewer__markdown-text-viewer"
+    value={{
+      value: props.value,
+    }}
+    components={{
+      h1: 'h2',
+      h2: 'h3',
+      h3: 'h4',
+    }}
+  />
+);

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -15,10 +15,11 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { BlankPanelContent, SearchIcon } from '@finos/legend-art';
+import { AnchorLinkIcon, SearchIcon } from '@finos/legend-art';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { AgGridReact } from '@ag-grid-community/react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 
 export const DataSpaceModelsDocumentation = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
@@ -26,65 +27,71 @@ export const DataSpaceModelsDocumentation = observer(
     const documentationEntries =
       dataSpaceViewerState.dataSpaceAnalysisResult.elementDocs;
 
-    if (documentationEntries.length === 0) {
-      return <BlankPanelContent>No documentation available</BlankPanelContent>;
-    }
-
     return (
       <div className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
-          Models Documentation
+          <div className="data-space__viewer__wiki__section__header__label">
+            Models Documentation
+            <div className="data-space__viewer__wiki__section__header__anchor">
+              <AnchorLinkIcon />
+            </div>
+          </div>
         </div>
         <div className="data-space__viewer__wiki__section__content">
-          <div className="data-space__viewer__models-documentation">
-            <div className="data-space__viewer__models-documentation__search">
-              <div className="data-space__viewer__models-documentation__search__input-group">
-                <input className="data-space__viewer__models-documentation__search__input-group__input" />
-                <div className="data-space__viewer__models-documentation__search-box__input-group__icon">
-                  <SearchIcon />
+          {documentationEntries.length > 0 && (
+            <div className="data-space__viewer__models-documentation">
+              <div className="data-space__viewer__models-documentation__search">
+                <div className="data-space__viewer__models-documentation__search__input-group">
+                  <input className="data-space__viewer__models-documentation__search__input-group__input input" />
+                  <div className="data-space__viewer__models-documentation__search__input-group__icon">
+                    <SearchIcon />
+                  </div>
                 </div>
               </div>
+              <div className="data-space__viewer__models-documentation__grid data-space__viewer__grid ag-theme-balham-dark">
+                <AgGridReact
+                  rowData={documentationEntries}
+                  gridOptions={{
+                    suppressScrollOnNewData: true,
+                    getRowId: (rowData) => rowData.data.uuid,
+                  }}
+                  modules={[ClientSideRowModelModule]}
+                  suppressFieldDotNotation={true}
+                  columnDefs={[
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      field: 'elementPath',
+                      headerName: 'Model',
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: false,
+                      resizable: true,
+                      field: 'subElementText',
+                      headerName: '',
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: false,
+                      resizable: true,
+                      field: 'doc',
+                      headerName: 'Documentation',
+                      flex: 1,
+                      wrapText: true,
+                      autoHeight: true,
+                    },
+                  ]}
+                />
+              </div>
             </div>
-            <div className="data-space__viewer__models-documentation__grid ag-theme-balham-dark">
-              <AgGridReact
-                rowData={documentationEntries}
-                gridOptions={{
-                  suppressScrollOnNewData: true,
-                  getRowId: (rowData) => rowData.data.uuid,
-                }}
-                modules={[ClientSideRowModelModule]}
-                suppressFieldDotNotation={true}
-                columnDefs={[
-                  {
-                    minWidth: 50,
-                    sortable: true,
-                    resizable: true,
-                    field: 'elementPath',
-                    headerName: 'Model',
-                    flex: 1,
-                  },
-                  {
-                    minWidth: 50,
-                    sortable: false,
-                    resizable: true,
-                    field: 'subElementText',
-                    headerName: '',
-                    flex: 1,
-                  },
-                  {
-                    minWidth: 50,
-                    sortable: false,
-                    resizable: true,
-                    field: 'doc',
-                    headerName: 'Documentation',
-                    flex: 1,
-                    wrapText: true,
-                    autoHeight: true,
-                  },
-                ]}
-              />
-            </div>
-          </div>
+          )}
+          {documentationEntries.length === 0 && (
+            <DataSpaceWikiPlaceholder message="No documentation provided" />
+          )}
         </div>
       </div>
     );

package/src/components/DataSpacePlaceholder.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+export const DataSpaceWikiPlaceholder: React.FC<{ message: string }> = (
+  props,
+) => (
+  <div className="data-space__viewer__wiki__placeholder">{props.message}</div>
+);