DES-2684: NEES Detail View (#1219)

* formatting/type errors * tweak for pi array check, updated placeholder text * initial work minus file listing for nees publication details * reworking top level data styling * updated citation modal title * first pass at adding file listing * fix: app card design bugs DES-2741 through DES-2745 (#1223) * fix: DES-2471, DES-2472, DES-2473 bugs (#1221) * fix: DES-2744 hover and focus card UI (#1224) * hotfix: des 2745 global font icon size tweaks (#1225) * refactor: des-2745 rename DS font icons stylesheet * fix: des-2745 load DS font icons + allow customize * chore: des-2745 obvious app-card font icon space * fix: des-2745 use rem not em for icon–title space * fix: des-2745 DS font icons not found * feat: des-2745 re-align certain DS font icons * feat: des-2745 re-position certain DS font icons * chore: des-2745 use (proper) `::before` syntax * fix: des-2745 title alignment after icon resize * fix: DES-2766 app with 1 variant needs diff list (#1232) * fix: DES-2766 app with 1 variant needs diff list * fix: DES-2766 more padding (designer request) * formatting * add nees listing breadcrumbs * add breadcrumbs * fix breadcrumbs --------- Co-authored-by: Jake Rosenberg <[email protected]> Co-authored-by: Wesley B <[email protected]>
DesignSafe-CI · May 13, 2024 · a68714a · a68714a
1 parent aaeeed0
commit a68714a
Show file tree

Hide file tree

Showing 15 changed files with 617 additions and 41 deletions.
diff --git a/client/modules/_hooks/src/datafiles/nees/index.ts b/client/modules/_hooks/src/datafiles/nees/index.ts
@@ -1,2 +1,5 @@
 export { useNeesListing } from './useNeesListing';
 export type { TNeesListingItem } from './useNeesListing';
+
+export { useNeesDetails } from './useNeesDetails';
+export type { TNeesDetailsItem } from './useNeesDetails';
diff --git a/client/modules/_hooks/src/datafiles/nees/useNeesDetails.ts b/client/modules/_hooks/src/datafiles/nees/useNeesDetails.ts
@@ -0,0 +1,112 @@
+import { useQuery } from '@tanstack/react-query';
+import apiClient from '../../apiClient';
+
+export type TNeesDetailsItem = {
+  agavePath: string;
+  children: Record<string, unknown>[];
+  deleted: boolean;
+  format: string;
+  length: number;
+  name: string;
+  path: string;
+  permissions: string;
+  system: string;
+  systemID: string;
+  type: string;
+  metadata: {
+    experiments: TNeesExperimentMetadata[];
+    project: TNeesProjectMetadata;
+  };
+};
+
+export type TNeesExperimentMetadata = {
+  creators: {
+    lastName: string;
+    firstName: string;
+  }[];
+  doi: string;
+  startDate: string;
+  endDate: string;
+  description: string;
+  title: string;
+  deleted: boolean;
+  material: {
+    materials: string[];
+    component: string;
+  }[];
+  facility: {
+    country: string;
+    state: string;
+    name: string;
+  }[];
+  equipment: {
+    equipment: string;
+    component: string;
+    equipmentClass: string;
+    facility: string;
+  }[];
+  path: string;
+  sensors: string[];
+  type: string;
+  specimenType: {
+    name: string;
+  }[];
+  name: string;
+};
+
+export type TNeesProjectMetadata = {
+  description: string;
+  endDate: string;
+  startDate: string;
+  facility: {
+    country: string;
+    state: string;
+    name: string;
+  }[];
+  name: string;
+  organization: {
+    country: string;
+    state: string;
+    name: string;
+  }[];
+  pis: {
+    firstName: string;
+    lastName: string;
+  }[];
+  project: string;
+  publications: {
+    authors: string[];
+    title: string;
+  }[];
+  system: string;
+  title: string;
+  sponsor: {
+    url: string;
+    name: string;
+  }[];
+  systemId: string;
+};
+
+async function getNeesDetails({
+  neesId,
+  signal,
+}: {
+  neesId: string;
+  signal: AbortSignal;
+}) {
+  const resp = await apiClient.get<TNeesDetailsItem>(
+    `/api/projects/nees-publication/${neesId}/`,
+    {
+      signal,
+    }
+  );
+  return resp.data;
+}
+
+export function useNeesDetails(neesId: string) {
+  return useQuery({
+    queryKey: ['datafiles', 'nees', 'details', neesId],
+    queryFn: ({ signal }) => getNeesDetails({ neesId, signal }),
+    enabled: !!neesId,
+  });
+}
diff --git a/client/modules/_hooks/src/datafiles/useFileListingRouteParams.ts b/client/modules/_hooks/src/datafiles/useFileListingRouteParams.ts
@@ -24,7 +24,7 @@ export function useFileListingRouteParams() {
     api,
     scheme,
     system: system ?? '',
-    path: encodeURIComponent(path ?? ''),
+    path: path ?? '',
   };
 }
 

diff --git a/client/modules/datafiles/src/DatafilesBreadcrumb/DatafilesBreadcrumb.tsx b/client/modules/datafiles/src/DatafilesBreadcrumb/DatafilesBreadcrumb.tsx
@@ -6,27 +6,18 @@ import { getSystemRootDisplayName, useAuthenticatedUser } from '@client/hooks';
 function getPathRoutes(
   baseRoute: string,
   path: string = '',
-  systemRoot: string = '',
-  systemRootAlias?: string
+  relativeTo: string = ''
 ) {
-  const pathComponents = decodeURIComponent(path.replace(systemRoot, ''))
+  const pathComponents = path
+    .replace(relativeTo, '')
     .split('/')
     .filter((p) => !!p);
-
-  const systemRootBreadcrumb = {
-    path: `${baseRoute}/${systemRoot}`,
-    title: systemRootAlias ?? 'Data Files',
-  };
-
-  return [
-    systemRootBreadcrumb,
-    ...pathComponents.slice(systemRoot ? 1 : 0).map((comp, i) => ({
-      title: comp,
-      path: `${baseRoute}/${systemRoot}${encodeURIComponent(
-        '/' + pathComponents.slice(0, i + 1).join('/')
-      )}`,
-    })),
-  ];
+  return pathComponents.map((comp, i) => ({
+    title: comp,
+    path: `${baseRoute}/${encodeURIComponent(relativeTo)}${encodeURIComponent(
+      '/' + pathComponents.slice(0, i + 1).join('/')
+    )}`,
+  }));
 }
 
 export const DatafilesBreadcrumb: React.FC<
@@ -36,22 +27,18 @@ export const DatafilesBreadcrumb: React.FC<
     baseRoute: string;
     systemRoot: string;
     systemRootAlias?: string;
-    skipBreadcrumbs?: number; // Number of path elements to skip when generating breadcrumbs
   } & BreadcrumbProps
 > = ({
   initialBreadcrumbs,
   path,
   baseRoute,
   systemRoot,
   systemRootAlias,
-  skipBreadcrumbs,
   ...props
 }) => {
   const breadcrumbItems = [
     ...initialBreadcrumbs,
-    ...getPathRoutes(baseRoute, path, systemRoot, systemRootAlias).slice(
-      skipBreadcrumbs ?? 0
-    ),
+    ...getPathRoutes(baseRoute, path, systemRoot),
   ];
 
   return (
@@ -87,15 +74,20 @@ export const BaseFileListingBreadcrumb: React.FC<
   ...props
 }) => {
   const { user } = useAuthenticatedUser();
-
+  const rootAlias = systemRootAlias || getSystemRootDisplayName(api, system);
+  const systemRoot = isUserHomeSystem(system) ? '/' + user?.username : '';
   return (
     <DatafilesBreadcrumb
-      initialBreadcrumbs={initialBreadcrumbs ?? []}
+      initialBreadcrumbs={[
+        ...initialBreadcrumbs,
+        {
+          path: `/${api}/${system}/${encodeURIComponent(systemRoot)}`,
+          title: rootAlias,
+        },
+      ]}
       path={path}
       baseRoute={`/${api}/${system}`}
-      systemRoot={
-        isUserHomeSystem(system) ? encodeURIComponent('/' + user?.username) : ''
-      }
+      systemRoot={isUserHomeSystem(system) ? '/' + user?.username : ''}
       systemRootAlias={systemRootAlias || getSystemRootDisplayName(api, system)}
       {...props}
     />

diff --git a/client/modules/datafiles/src/DatafilesModal/CopyModal/CopyModal.tsx b/client/modules/datafiles/src/DatafilesModal/CopyModal/CopyModal.tsx
@@ -256,7 +256,7 @@ export const CopyModal: React.FC<{
                   <BaseFileListingBreadcrumb
                     api={destApi}
                     system={destSystem}
-                    path={destPath}
+                    path={decodeURIComponent(destPath)}
                     systemRootAlias={dest.destProjectId}
                     initialBreadcrumbs={
                       destSystem.startsWith('project-')

diff --git a/client/modules/datafiles/src/nees/NeesDetails.module.css b/client/modules/datafiles/src/nees/NeesDetails.module.css
@@ -0,0 +1,34 @@
+.line-clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.line-unclamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+th {
+  vertical-align: top;
+}
+
+.nees-th {
+  width: 25%;
+}
+
+.nees-td {
+  width: 75%;
+}
+
+.nees-mini-table {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.nees-divider {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ export function useFileListingRouteParams() { @@
         api,
         scheme,
         system: system ?? '',
-        path: encodeURIComponent(path ?? ''),
+        path: path ?? '',
       };
     }
@@ Expand Down @@