Eda user dataset detail (#1192)

* Add ability to hide header elements in user dataset detail page * Add SCSS files to all pages that need it * Use UserDatasetDetailController for user dataset studies
VEuPathDB · Aug 27, 2024 · 08316b8 · 08316b8
1 parent a5d60cd
commit 08316b8
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 19 deletions.
diff --git a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx
@@ -86,6 +86,8 @@ import { AnalysisError } from '../../core/components/AnalysisError';
 import useSnackbar from '@veupathdb/coreui/lib/components/notifications/useSnackbar';
 import SettingsButton from '@veupathdb/coreui/lib/components/containers/DraggablePanel/SettingsButton';
 import { getGeoConfig } from '../../core/utils/geoVariables';
+import UserDatasetDetailController from '@veupathdb/user-datasets/lib/Controllers/UserDatasetDetailController';
+import { wdkRecordIdToDiyUserDatasetId } from '@veupathdb/user-datasets/lib/Utils/diyDatasets';
 
 enum MapSideNavItemLabels {
   Download = 'Download',
@@ -235,6 +237,7 @@ function MapAnalysisImpl(props: ImplProps) {
   const downloadClient = useDownloadClient();
   const subsettingClient = useSubsettingClient();
   const history = useHistory();
+  const { url } = useRouteMatch();
 
   const sharingUrl = new URL(
     sharingUrlPrefix
@@ -703,10 +706,34 @@ function MapAnalysisImpl(props: ImplProps) {
             }}
           >
             <H5 additionalStyles={{ margin: '25px 0 0 0' }}>Study Details</H5>
-            <RecordController
-              recordClass="dataset"
-              primaryKey={studyRecord.id.map((p) => p.value).join('/')}
-            />
+            {studyMetadata.isUserStudy ? (
+              // TODO Make both cases below configurable via the root component.
+              // This will need to be done if we want EDA to stand on its own.
+
+              // Note that we are not inluding the custom detail page.
+              // As of this writing, details pages only add a link to
+              // EDA. Since we are in EDA, we don't want to add it here.
+              <UserDatasetDetailController
+                baseUrl={url}
+                detailsPageTitle={'My Study'}
+                workspaceTitle={'My Studies'}
+                id={wdkRecordIdToDiyUserDatasetId(
+                  studyRecord.attributes.dataset_id as string
+                )}
+                dataNoun={{
+                  singular: 'Study',
+                  plural: 'Studies',
+                }}
+                enablePublicUserDatasets
+                includeAllLink={false}
+                includeNameHeader={false}
+              />
+            ) : (
+              <RecordController
+                recordClass="dataset"
+                primaryKey={studyRecord.id.map((p) => p.value).join('/')}
+              />
+            )}
           </div>
         );
       },

diff --git a/packages/libs/eda/src/lib/workspace/AnalysisPanel.tsx b/packages/libs/eda/src/lib/workspace/AnalysisPanel.tsx
@@ -29,6 +29,7 @@ import { useGeoConfig } from '../core/hooks/geoConfig';
 
 // Components
 import WorkspaceNavigation from '@veupathdb/wdk-client/lib/Components/Workspace/WorkspaceNavigation';
+import UserDatasetDetailController from '@veupathdb/user-datasets/lib/Controllers/UserDatasetDetailController';
 import { AnalysisSummary } from './AnalysisSummary';
 import { EntityDiagram } from '../core';
 import { ComputationRoute } from './ComputationRoute';
@@ -56,6 +57,7 @@ import FilterChipList from '../core/components/FilterChipList';
 import { Public } from '@material-ui/icons';
 import { Link } from 'react-router-dom';
 import { AnalysisError } from '../core/components/AnalysisError';
+import { wdkRecordIdToDiyUserDatasetId } from '@veupathdb/user-datasets/lib/Utils/diyDatasets';
 
 const AnalysisTabErrorBoundary = ({
   children,
@@ -418,10 +420,34 @@ export function AnalysisPanel({
             path={`${routeBase}/details`}
             render={() => (
               <AnalysisTabErrorBoundary>
-                <RecordController
-                  recordClass="dataset"
-                  primaryKey={studyRecord.id.map((p) => p.value).join('/')}
-                />
+                {studyMetadata.isUserStudy ? (
+                  // TODO Make both cases below configurable via the root component.
+                  // This will need to be done if we want EDA to stand on its own.
+
+                  // Note that we are not inluding the custom detail page.
+                  // As of this writing, details pages only add a link to
+                  // EDA. Since we are in EDA, we don't want to add it here.
+                  <UserDatasetDetailController
+                    baseUrl={`${routeBase}/details`}
+                    detailsPageTitle={'My Study'}
+                    workspaceTitle={'My Studies'}
+                    id={wdkRecordIdToDiyUserDatasetId(
+                      studyRecord.attributes.dataset_id as string
+                    )}
+                    dataNoun={{
+                      singular: 'Study',
+                      plural: 'Studies',
+                    }}
+                    enablePublicUserDatasets={true}
+                    includeAllLink={false}
+                    includeNameHeader={false}
+                  />
+                ) : (
+                  <RecordController
+                    recordClass="dataset"
+                    primaryKey={studyRecord.id.map((p) => p.value).join('/')}
+                  />
+                )}
               </AnalysisTabErrorBoundary>
             )}
           />

diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx
@@ -23,6 +23,7 @@ import { ThemedDeleteButton } from '../ThemedDeleteButton';
 
 import { DateTime } from '../DateTime';
 
+import '../UserDatasets.scss';
 import './UserDatasetDetail.scss';
 
 const classify = makeClassifier('UserDatasetDetail');
@@ -127,6 +128,7 @@ class UserDatasetDetail extends React.Component {
   }
 
   renderAllDatasetsLink() {
+    if (!this.props.includeAllLink) return null;
     return (
       <Link className="AllDatasetsLink" to={this.props.baseUrl}>
         <Icon fa="chevron-left" />
@@ -163,17 +165,19 @@ class UserDatasetDetail extends React.Component {
     );
 
     return [
-      {
-        attribute: this.props.detailsPageTitle,
-        className: classify('Name'),
-        value: (
-          <SaveableTextEditor
-            value={meta.name}
-            readOnly={!isOwner}
-            onSave={this.onMetaSave('name')}
-          />
-        ),
-      },
+      this.props.includeNameHeader
+        ? {
+            attribute: this.props.detailsPageTitle,
+            className: classify('Name'),
+            value: (
+              <SaveableTextEditor
+                value={meta.name}
+                readOnly={!isOwner}
+                onSave={this.onMetaSave('name')}
+              />
+            ),
+          }
+        : null,
       {
         attribute: 'Status',
         value: (

diff --git a/packages/libs/user-datasets/src/lib/Components/List/UserDatasetList.tsx b/packages/libs/user-datasets/src/lib/Components/List/UserDatasetList.tsx
@@ -35,6 +35,7 @@ import CommunityModal from '../Sharing/UserDatasetCommunityModal';
 import UserDatasetStatus from '../UserDatasetStatus';
 import { normalizePercentage, textCell } from '../UserDatasetUtils';
 
+import '../UserDatasets.scss';
 import './UserDatasetList.scss';
 import { DateTime } from '../DateTime';
 

diff --git a/packages/libs/user-datasets/src/lib/Components/Sharing/UserDatasetCommunityModal.jsx b/packages/libs/user-datasets/src/lib/Components/Sharing/UserDatasetCommunityModal.jsx
@@ -4,6 +4,7 @@ import { IconAlt as Icon, Loading } from '@veupathdb/wdk-client/lib/Components';
 import { Modal } from '@veupathdb/coreui';
 import { FilledButton } from '@veupathdb/coreui';
 
+import '../UserDatasets.scss';
 import './UserDatasetSharingModal.scss';
 
 export default function UserDatasetSharingModal(props) {

diff --git a/packages/libs/user-datasets/src/lib/Components/Sharing/UserDatasetSharingModal.jsx b/packages/libs/user-datasets/src/lib/Components/Sharing/UserDatasetSharingModal.jsx
@@ -8,6 +8,7 @@ import {
 import { WdkDependenciesContext } from '@veupathdb/wdk-client/lib/Hooks/WdkDependenciesEffect';
 import { Modal } from '@veupathdb/coreui';
 import { isVdiCompatibleWdkService } from '../../Service';
+import '../UserDatasets.scss';
 import './UserDatasetSharingModal.scss';
 
 const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

diff --git a/packages/libs/user-datasets/src/lib/Controllers/UserDatasetDetailController.tsx b/packages/libs/user-datasets/src/lib/Controllers/UserDatasetDetailController.tsx
@@ -60,6 +60,8 @@ type OwnProps = {
   >;
   dataNoun: DataNoun;
   enablePublicUserDatasets: boolean;
+  includeAllLink: boolean;
+  includeNameHeader: boolean;
 };
 type MergedProps = {
   ownProps: OwnProps;
@@ -179,6 +181,8 @@ class UserDatasetDetailController extends PageController<MergedProps> {
       workspaceTitle,
       dataNoun,
       enablePublicUserDatasets,
+      includeAllLink,
+      includeNameHeader,
     } = this.props.ownProps;
     const {
       updateUserDatasetDetail,
@@ -216,6 +220,8 @@ class UserDatasetDetailController extends PageController<MergedProps> {
 
     const props = {
       baseUrl,
+      includeAllLink,
+      includeNameHeader,
       user,
       config,
       isOwner,

diff --git a/packages/libs/user-datasets/src/lib/Controllers/UserDatasetRouter.tsx b/packages/libs/user-datasets/src/lib/Controllers/UserDatasetRouter.tsx
@@ -175,6 +175,8 @@ export function UserDatasetRouter<T1 extends string, T2 extends string>({
               detailComponentsByTypeName={detailComponentsByTypeName}
               dataNoun={dataNoun}
               enablePublicUserDatasets={enablePublicUserDatasets}
+              includeAllLink
+              includeNameHeader
               {...props.match.params}
             />
           );