@finos/legend-extension-dsl-data-space 10.0.2 → 10.0.4

package/src/components/DataSpaceQuickStart.tsx

@@ -24,7 +24,12 @@ import {
   QuestionCircleIcon,
   clsx,
 } from '@finos/legend-art';
-import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+  type DataSpaceViewerState,
+  generateAnchorForQuickStart,
+} from '../stores/DataSpaceViewerState.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   DataSpaceExecutableTDSResult,
@@ -33,7 +38,7 @@ import {
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
 import type { DSL_DataSpace_LegendApplicationPlugin_Extension } from '../stores/DSL_DataSpace_LegendApplicationPlugin_Extension.js';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 import {
   DataGrid,
@@ -50,8 +55,6 @@ enum TDS_EXECUTABLE_ACTION_TAB {
   QUERY_TEXT = 'QUERY_TEXT',
 }
 
-const MIN_NUMBER_OF_ROWS_FOR_AUTO_HEIGHT = 15;
-
 const TDSColumnDocumentationCellRenderer = (
   params: DataGridCellRendererParams<DataSpaceExecutableTDSResultColumn>,
 ): React.ReactNode => {
@@ -98,8 +101,6 @@ const DataSpaceExecutableTDSResultView = observer(
     const queryText = executableAnalysisResult.info?.query;
 
     const columnSpecifications = tdsResult.columns;
-    const autoHeight =
-      tdsResult.columns.length <= MIN_NUMBER_OF_ROWS_FOR_AUTO_HEIGHT;
     const extractTDSExecutableActionConfigurations =
       applicationStore.pluginManager
         .getApplicationPlugins()
@@ -108,6 +109,13 @@ const DataSpaceExecutableTDSResultView = observer(
             (
               plugin as DSL_DataSpace_LegendApplicationPlugin_Extension
             ).getExtraDataSpaceTDSExecutableActionConfigurations?.() ?? [],
+        )
+        .filter((configuration) =>
+          configuration.isSupported(
+            dataSpaceViewerState,
+            executableAnalysisResult,
+            tdsResult,
+          ),
         );
     const currentTabExtensionConfig =
       extractTDSExecutableActionConfigurations.find(
@@ -115,226 +123,196 @@ const DataSpaceExecutableTDSResultView = observer(
       );
 
     return (
-      <div className="data-space__viewer__quickstart__item">
-        <div className="data-space__viewer__quickstart__item__header">
-          <div className="data-space__viewer__quickstart__item__header__title">
-            {executableAnalysisResult.title}
-          </div>
-          <div className="data-space__viewer__quickstart__item__header__type">
-            TDS
-          </div>
-          <div className="data-space__viewer__quickstart__item__header__anchor">
-            <AnchorLinkIcon />
-          </div>
-        </div>
-        {executableAnalysisResult.description !== undefined && (
-          <div className="data-space__viewer__quickstart__item__description">
-            <DataSpaceMarkdownTextViewer
-              value={executableAnalysisResult.description}
-            />
-          </div>
-        )}
-        <div className="data-space__viewer__quickstart__item__content">
-          <div className="data-space__viewer__quickstart__item__content__tab__header">
-            <div className="data-space__viewer__quickstart__item__content__tabs">
+      <div className="data-space__viewer__quickstart__item__content">
+        <div className="data-space__viewer__quickstart__item__content__tab__header">
+          <div className="data-space__viewer__quickstart__item__content__tabs">
+            <button
+              className={clsx(
+                'data-space__viewer__quickstart__item__content__tab',
+                {
+                  'data-space__viewer__quickstart__item__content__tab--active':
+                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS,
+                },
+              )}
+              tabIndex={-1}
+              onClick={() =>
+                setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS)
+              }
+            >
+              <div className="data-space__viewer__quickstart__item__content__tab__label">
+                Column Specifications
+              </div>
+            </button>
+            <button
+              className={clsx(
+                'data-space__viewer__quickstart__item__content__tab',
+                {
+                  'data-space__viewer__quickstart__item__content__tab--active':
+                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY,
+                },
+              )}
+              tabIndex={-1}
+              onClick={() => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY)}
+            >
+              <div className="data-space__viewer__quickstart__item__content__tab__icon">
+                <LegendLogo className="data-space__viewer__quickstart__item__content__tab__icon--query" />
+              </div>
+              <div className="data-space__viewer__quickstart__item__content__tab__label">
+                Query
+              </div>
+            </button>
+            {extractTDSExecutableActionConfigurations.map((config) => (
               <button
+                key={config.key}
                 className={clsx(
                   'data-space__viewer__quickstart__item__content__tab',
                   {
                     'data-space__viewer__quickstart__item__content__tab--active':
-                      selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS,
+                      selectedTab === config.key,
                   },
                 )}
                 tabIndex={-1}
-                onClick={() =>
-                  setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS)
-                }
+                onClick={() => setSelectedTab(config.key)}
               >
+                {config.icon !== undefined && (
+                  <div className="data-space__viewer__quickstart__item__content__tab__icon">
+                    {config.icon}
+                  </div>
+                )}
                 <div className="data-space__viewer__quickstart__item__content__tab__label">
-                  Column Specifications
+                  {config.title}
                 </div>
               </button>
-              <button
-                className={clsx(
-                  'data-space__viewer__quickstart__item__content__tab',
+            ))}
+          </div>
+          {queryText !== undefined && (
+            <button
+              className={clsx(
+                'data-space__viewer__quickstart__item__content__tab',
+                {
+                  'data-space__viewer__quickstart__item__content__tab--active':
+                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT,
+                },
+              )}
+              tabIndex={-1}
+              onClick={() =>
+                setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT)
+              }
+            >
+              <div className="data-space__viewer__quickstart__item__content__tab__icon">
+                <CodeIcon className="data-space__viewer__quickstart__item__content__tab__icon--query" />
+              </div>
+            </button>
+          )}
+        </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">
+              <DataGrid
+                rowData={columnSpecifications}
+                gridOptions={{
+                  suppressScrollOnNewData: true,
+                  getRowId: (rowData) => rowData.data.uuid,
+                }}
+                suppressFieldDotNotation={true}
+                columnDefs={[
                   {
-                    'data-space__viewer__quickstart__item__content__tab--active':
-                      selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY,
+                    minWidth: 50,
+                    sortable: true,
+                    resizable: true,
+                    field: 'name',
+                    headerValueGetter: () =>
+                      `Column ${
+                        columnSpecifications.length
+                          ? ` (${columnSpecifications.length})`
+                          : ''
+                      }`,
+                    flex: 1,
                   },
-                )}
-                tabIndex={-1}
-                onClick={() => setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY)}
-              >
-                <div className="data-space__viewer__quickstart__item__content__tab__icon">
-                  <LegendLogo className="data-space__viewer__quickstart__item__content__tab__icon--query" />
-                </div>
-                <div className="data-space__viewer__quickstart__item__content__tab__label">
-                  Query
-                </div>
-              </button>
-              {extractTDSExecutableActionConfigurations.map((config) => (
+                  {
+                    minWidth: 50,
+                    sortable: false,
+                    resizable: true,
+                    cellRenderer: TDSColumnDocumentationCellRenderer,
+                    headerName: 'Documentation',
+                    flex: 1,
+                    wrapText: true,
+                    autoHeight: true,
+                  },
+                  {
+                    minWidth: 50,
+                    sortable: false,
+                    resizable: false,
+                    headerClass: 'data-space__viewer__grid__last-column-header',
+                    cellRenderer: TDSColumnSampleValuesCellRenderer,
+                    headerName: 'Sample Values',
+                    flex: 1,
+                  },
+                ]}
+              />
+            </div>
+          )}
+          {selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY && (
+            <div className="data-space__viewer__quickstart__tds__query">
+              <div className="data-space__viewer__quickstart__tds__query__actions">
+                <button
+                  className="data-space__viewer__quickstart__tds__query__action btn--dark"
+                  tabIndex={-1}
+                  onClick={() => {
+                    // TODO: wire this so we can go to the query for the service
+                  }}
+                >
+                  Open in Query
+                </button>
                 <button
-                  key={config.key}
-                  className={clsx(
-                    'data-space__viewer__quickstart__item__content__tab',
-                    {
-                      'data-space__viewer__quickstart__item__content__tab--active':
-                        selectedTab === config.key,
-                    },
-                  )}
+                  className="data-space__viewer__quickstart__tds__query__action btn--dark"
                   tabIndex={-1}
-                  onClick={() => setSelectedTab(config.key)}
+                  disabled={true}
                 >
-                  {config.icon !== undefined && (
-                    <div className="data-space__viewer__quickstart__item__content__tab__icon">
-                      {config.icon}
-                    </div>
-                  )}
-                  <div className="data-space__viewer__quickstart__item__content__tab__label">
-                    {config.title}
-                  </div>
+                  Open in Query with Test Data
                 </button>
-              ))}
+              </div>
             </div>
-            {queryText !== undefined && (
-              <button
-                className={clsx(
-                  'data-space__viewer__quickstart__item__content__tab',
-                  {
-                    'data-space__viewer__quickstart__item__content__tab--active':
-                      selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT,
-                  },
-                )}
-                tabIndex={-1}
-                onClick={() =>
-                  setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT)
-                }
-              >
-                <div className="data-space__viewer__quickstart__item__content__tab__icon">
-                  <CodeIcon className="data-space__viewer__quickstart__item__content__tab__icon--query" />
+          )}
+          {selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT &&
+            queryText !== undefined && (
+              <div className="data-space__viewer__quickstart__tds__query-text">
+                <div className="data-space__viewer__quickstart__tds__query-text__content">
+                  <CodeEditor
+                    inputValue={queryText}
+                    isReadOnly={true}
+                    language={CODE_EDITOR_LANGUAGE.PURE}
+                    showMiniMap={false}
+                    hideGutter={true}
+                  />
                 </div>
-              </button>
-            )}
-          </div>
-          <div
-            className={clsx(
-              'data-space__viewer__quickstart__item__content__tab__content',
-              {
-                'data-space__viewer__quickstart__item__content__tab__content':
-                  autoHeight,
-              },
-            )}
-          >
-            {selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (
-              <div className="data-space__viewer__quickstart__tds__column-specs data-space__viewer__grid ag-theme-balham-dark">
-                <DataGrid
-                  domLayout={autoHeight ? 'autoHeight' : 'normal'}
-                  rowData={columnSpecifications}
-                  gridOptions={{
-                    suppressScrollOnNewData: true,
-                    getRowId: (rowData) => rowData.data.uuid,
-                  }}
-                  suppressFieldDotNotation={true}
-                  columnDefs={[
-                    {
-                      minWidth: 50,
-                      sortable: true,
-                      resizable: true,
-                      field: 'name',
-                      headerValueGetter: () =>
-                        `Column ${
-                          columnSpecifications.length
-                            ? ` (${columnSpecifications.length})`
-                            : ''
-                        }`,
-                      flex: 1,
-                    },
-                    {
-                      minWidth: 50,
-                      sortable: false,
-                      resizable: true,
-                      cellRenderer: TDSColumnDocumentationCellRenderer,
-                      headerName: 'Documentation',
-                      flex: 1,
-                      wrapText: true,
-                      autoHeight: true,
-                    },
-                    {
-                      minWidth: 50,
-                      sortable: false,
-                      resizable: false,
-                      headerClass:
-                        'data-space__viewer__grid__last-column-header',
-                      cellRenderer: TDSColumnSampleValuesCellRenderer,
-                      headerName: 'Sample Values',
-                      flex: 1,
-                    },
-                  ]}
-                />
-              </div>
-            )}
-            {selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY && (
-              <div className="data-space__viewer__quickstart__tds__query">
-                <div className="data-space__viewer__quickstart__tds__query__actions">
+                <div className="data-space__viewer__quickstart__tds__query-text__actions">
                   <button
-                    className="data-space__viewer__quickstart__tds__query__action btn--dark"
+                    className="data-space__viewer__quickstart__tds__query-text__action"
                     tabIndex={-1}
+                    title="Copy"
                     onClick={() => {
-                      // TODO: wire this so we can go to the query for the service
+                      applicationStore.clipboardService
+                        .copyTextToClipboard(queryText)
+                        .catch(applicationStore.alertUnhandledError);
                     }}
                   >
-                    Open in Query
+                    <CopyIcon />
                   </button>
                   <button
-                    className="data-space__viewer__quickstart__tds__query__action btn--dark"
+                    className="data-space__viewer__quickstart__tds__query-text__action"
                     tabIndex={-1}
-                    disabled={true}
                   >
-                    Open in Query with Test Data
+                    <MoreVerticalIcon />
                   </button>
                 </div>
               </div>
             )}
-            {selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT &&
-              queryText !== undefined && (
-                <div className="data-space__viewer__quickstart__tds__query-text">
-                  <div className="data-space__viewer__quickstart__tds__query-text__content">
-                    <CodeEditor
-                      inputValue={queryText}
-                      isReadOnly={true}
-                      language={CODE_EDITOR_LANGUAGE.PURE}
-                      showMiniMap={false}
-                      hideGutter={true}
-                    />
-                  </div>
-                  <div className="data-space__viewer__quickstart__tds__query-text__actions">
-                    <button
-                      className="data-space__viewer__quickstart__tds__query-text__action"
-                      tabIndex={-1}
-                      title="Copy"
-                      onClick={() => {
-                        applicationStore.clipboardService
-                          .copyTextToClipboard(queryText)
-                          .catch(applicationStore.alertUnhandledError);
-                      }}
-                    >
-                      <CopyIcon />
-                    </button>
-                    <button
-                      className="data-space__viewer__quickstart__tds__query-text__action"
-                      tabIndex={-1}
-                    >
-                      <MoreVerticalIcon />
-                    </button>
-                  </div>
-                </div>
-              )}
-            {currentTabExtensionConfig?.renderer(
-              dataSpaceViewerState,
-              executableAnalysisResult,
-              tdsResult,
-            )}
-          </div>
+          {currentTabExtensionConfig?.renderer(
+            dataSpaceViewerState,
+            executableAnalysisResult,
+            tdsResult,
+          )}
         </div>
       </div>
     );
@@ -347,30 +325,38 @@ const DataSpaceExecutableAnalysisResultView = observer(
     executableAnalysisResult: DataSpaceExecutableAnalysisResult;
   }) => {
     const { dataSpaceViewerState, executableAnalysisResult } = props;
+    const quickStartRef = useRef<HTMLDivElement>(null);
+    const anchor = generateAnchorForQuickStart(executableAnalysisResult);
+
+    useEffect(() => {
+      if (quickStartRef.current) {
+        dataSpaceViewerState.layoutState.setWikiPageAnchor(
+          anchor,
+          quickStartRef.current,
+        );
+      }
+      return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
+    }, [dataSpaceViewerState, anchor]);
 
-    if (
-      executableAnalysisResult.result instanceof DataSpaceExecutableTDSResult
-    ) {
-      return (
-        <DataSpaceExecutableTDSResultView
-          dataSpaceViewerState={dataSpaceViewerState}
-          executableAnalysisResult={executableAnalysisResult}
-          tdsResult={executableAnalysisResult.result}
-        />
-      );
-    }
     return (
-      <div className="data-space__viewer__quickstart__item">
+      <div ref={quickStartRef} className="data-space__viewer__quickstart__item">
         <div className="data-space__viewer__quickstart__item__header">
           <div className="data-space__viewer__quickstart__item__header__title">
             {executableAnalysisResult.title}
           </div>
           <div className="data-space__viewer__quickstart__item__header__type">
-            UNKNOWN
+            {executableAnalysisResult.result instanceof
+            DataSpaceExecutableTDSResult
+              ? 'TDS'
+              : 'UNKNOWN'}
           </div>
-          <div className="data-space__viewer__quickstart__item__header__anchor">
+          <button
+            className="data-space__viewer__quickstart__item__header__anchor"
+            tabIndex={-1}
+            onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
+          >
             <AnchorLinkIcon />
-          </div>
+          </button>
         </div>
         {executableAnalysisResult.description !== undefined && (
           <div className="data-space__viewer__quickstart__item__description">
@@ -379,6 +365,14 @@ const DataSpaceExecutableAnalysisResultView = observer(
             />
           </div>
         )}
+        {executableAnalysisResult.result instanceof
+          DataSpaceExecutableTDSResult && (
+          <DataSpaceExecutableTDSResultView
+            dataSpaceViewerState={dataSpaceViewerState}
+            executableAnalysisResult={executableAnalysisResult}
+            tdsResult={executableAnalysisResult.result}
+          />
+        )}
       </div>
     );
   },
@@ -390,6 +384,20 @@ export const DataSpaceQuickStart = observer(
     const applicationStore = useApplicationStore();
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
     const documentationUrl = analysisResult.supportInfo?.documentationUrl;
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const anchor = generateAnchorForActivity(
+      DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
+    );
+
+    useEffect(() => {
+      if (sectionRef.current) {
+        dataSpaceViewerState.layoutState.setWikiPageAnchor(
+          anchor,
+          sectionRef.current,
+        );
+      }
+      return () => dataSpaceViewerState.layoutState.unsetWikiPageAnchor(anchor);
+    }, [dataSpaceViewerState, anchor]);
 
     const seeDocumentation = (): void => {
       if (documentationUrl) {
@@ -400,13 +408,17 @@ export const DataSpaceQuickStart = observer(
     };
 
     return (
-      <div className="data-space__viewer__wiki__section">
+      <div ref={sectionRef} className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
           <div className="data-space__viewer__wiki__section__header__label">
             Quick Start
-            <div className="data-space__viewer__wiki__section__header__anchor">
+            <button
+              className="data-space__viewer__wiki__section__header__anchor"
+              tabIndex={-1}
+              onClick={() => dataSpaceViewerState.changeZone(anchor, true)}
+            >
               <AnchorLinkIcon />
-            </div>
+            </button>
           </div>
           {Boolean(documentationUrl) && (
             <button

package/src/components/DataSpaceViewer.tsx

@@ -15,17 +15,23 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { BlankPanelContent, VerifiedIcon, clsx } from '@finos/legend-art';
+import {
+  BlankPanelContent,
+  CaretUpIcon,
+  VerifiedIcon,
+  clsx,
+} from '@finos/legend-art';
 import {
   type DataSpaceViewerState,
   DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  DATA_SPACE_WIKI_PAGE_SECTIONS,
 } from '../stores/DataSpaceViewerState.js';
 import { DataSpaceExecutionContextViewer } from './DataSpaceExecutionContextViewer.js';
 import { DataSpaceInfoPanel } from './DataSpaceInfoPanel.js';
 import { DataSpaceSupportPanel } from './DataSpaceSupportPanel.js';
 import { DataSpaceWiki } from './DataSpaceWiki.js';
 import { DataSpaceViewerActivityBar } from './DataSpaceViewerActivityBar.js';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const DataSpaceHeader = observer(
   (props: {
@@ -33,10 +39,18 @@ const DataSpaceHeader = observer(
     showFullHeader: boolean;
   }) => {
     const { dataSpaceViewerState, showFullHeader } = props;
+    const headerRef = useRef<HTMLDivElement>(null);
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
+    useEffect(() => {
+      if (headerRef.current) {
+        dataSpaceViewerState.layoutState.header = headerRef.current;
+      }
+    }, [dataSpaceViewerState]);
+
     return (
       <div
+        ref={headerRef}
         className={clsx('data-space__viewer__header', {
           'data-space__viewer__header--floating': showFullHeader,
         })}
@@ -80,20 +94,44 @@ const DataSpacePlaceholderPanel: React.FC<{ message: string }> = (props) => {
 export const DataSpaceViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
-    const bodyElement = useRef<HTMLDivElement>(null);
+    const frame = useRef<HTMLDivElement>(null);
     const [showFullHeader, setShowFullHeader] = useState(false);
+    const [scrollPercentage, setScrollPercentage] = useState(0);
 
     const onScroll: React.UIEventHandler<HTMLDivElement> = (event) => {
-      setShowFullHeader(event.currentTarget.scrollTop > 0);
+      const scrollTop = event.currentTarget.scrollTop;
+      setShowFullHeader(scrollTop > 0);
+      dataSpaceViewerState.layoutState.setTopScrollerVisible(scrollTop > 0);
+      setScrollPercentage(
+        event.currentTarget.scrollHeight <= 0
+          ? 100
+          : Math.round(
+              ((event.currentTarget.scrollTop +
+                event.currentTarget.clientHeight) /
+                event.currentTarget.scrollHeight) *
+                100,
+            ),
+      );
     };
 
-    const isShowingWiki = [
-      DATA_SPACE_VIEWER_ACTIVITY_MODE.DESCRIPTION,
-      DATA_SPACE_VIEWER_ACTIVITY_MODE.DIAGRAM_VIEWER,
-      DATA_SPACE_VIEWER_ACTIVITY_MODE.MODELS_DOCUMENTATION,
-      DATA_SPACE_VIEWER_ACTIVITY_MODE.QUICK_START,
-      DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
-    ].includes(dataSpaceViewerState.currentActivity);
+    const scrollToTop = (): void => {
+      if (dataSpaceViewerState.layoutState.frame) {
+        dataSpaceViewerState.layoutState.frame.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        });
+      }
+    };
+
+    const isShowingWiki = DATA_SPACE_WIKI_PAGE_SECTIONS.includes(
+      dataSpaceViewerState.currentActivity,
+    );
+
+    useEffect(() => {
+      if (frame.current) {
+        dataSpaceViewerState.layoutState.setFrame(frame.current);
+      }
+    }, [dataSpaceViewerState]);
 
     return (
       <div className="data-space__viewer">
@@ -101,7 +139,7 @@ export const DataSpaceViewer = observer(
           dataSpaceViewerState={dataSpaceViewerState}
         />
         <div
-          ref={bodyElement}
+          ref={frame}
           className="data-space__viewer__body"
           onScroll={onScroll}
         >
@@ -109,6 +147,22 @@ export const DataSpaceViewer = observer(
             dataSpaceViewerState={dataSpaceViewerState}
             showFullHeader={showFullHeader}
           />
+          {dataSpaceViewerState.layoutState.isTopScrollerVisible && (
+            <div className="data-space__viewer__scroller">
+              <button
+                className="data-space__viewer__scroller__btn btn--dark"
+                tabIndex={-1}
+                title="Scroll to top"
+                disabled={!dataSpaceViewerState.layoutState.frame}
+                onClick={scrollToTop}
+              >
+                <CaretUpIcon />
+              </button>
+              <div className="data-space__viewer__scroller__percentage">
+                {scrollPercentage}%
+              </div>
+            </div>
+          )}
           <div
             className={clsx('data-space__viewer__frame', {
               'data-space__viewer__frame--boundless': isShowingWiki,