New UX: Detail view review feedback

src/api/entitycore/types/shared/global.ts

@@ -111,23 +111,26 @@ type RoleBase = {
 
 interface IRole extends RoleBase, Timestamps, EntityCoreIdentifiable {}
 
-type OrganizationBase = {
+export interface IOrganization extends Timestamps, EntityCoreIdentifiable {
   type: 'organization';
   pref_label: string;
   alternative_name?: string | null;
-};
-
-interface IOrganization extends OrganizationBase, Timestamps, EntityCoreIdentifiable {}
+}
 
-type PersonBase = {
+export interface IPerson extends Timestamps, EntityCoreIdentifiable {
   type: 'person';
   givenName: string | null;
   familyName: string | null;
   pref_label: string;
-};
+}
+
+export interface IConsortium extends Timestamps, EntityCoreIdentifiable {
+  pref_label: string;
+  alternative_name: string;
+  type: 'consortium';
+}
 
-export interface IPerson extends PersonBase, Timestamps, EntityCoreIdentifiable {}
-export type Agent = IPerson | IOrganization;
+export type Agent = IPerson | IOrganization | IConsortium;
 
 export interface IContributor extends Timestamps, EntityCoreIdentifiable {
   agent: Agent;

src/app/app/virtual-lab/[virtualLabId]/[projectId]/data/view/[type]/[id]/layout.tsx

@@ -12,6 +12,7 @@ import DetailMenu from '@/ui/segments/explore/detail-menu';
 import ActionMenu from '@/ui/segments/action-menu';
 import type { WorkspaceContext, AwaitedType } from '@/types/common';
 import Close from '@/ui/molecules/close';
+import { DownloadPanel as CircuitDownloadPanel } from '@/ui/segments/explore/circuit/elements/download-panel';
 
 interface Params {
   id: string;
@@ -66,37 +67,38 @@ export default async function Layout({
     ctx: { virtualLabId, projectId },
   });
 
+  const parentLink = `${ROOT_ROUTE}/${virtualLabId}/${projectId}/data/browse/entity/${type}?group=${entityType.group}`;
+
   return (
-    <div className="ml-5 flex h-full rounded-md border-[1px] border-[#D9D9D9] px-5 py-3">
-      <div className="w-1/5">
-        <div className="flex flex-wrap gap-3">
-          <Breadcrumb>
-            <NextLink href={`${ROOT_ROUTE}/${virtualLabId}/${projectId}/data`}>Explore</NextLink>
-          </Breadcrumb>
-          <Breadcrumb>
-            <NextLink
-              href={`${ROOT_ROUTE}/${virtualLabId}/${projectId}/data/browse/entity/${type}`}
-            >
-              {entityType.title}
-            </NextLink>
-          </Breadcrumb>
-          <Breadcrumb showChevron={false}>{entity.name}</Breadcrumb>
-        </div>
-        <div className="mt-5 flex flex-col gap-5">
-          <DetailMenu sections={entityType.detailViewSections} />
+    <>
+      <div className="ml-5 flex h-full rounded-md border-[1px] border-[#D9D9D9] px-5 py-3">
+        <div className="w-1/5">
+          <div className="flex flex-wrap gap-3">
+            <Breadcrumb>
+              <NextLink href={`${ROOT_ROUTE}/${virtualLabId}/${projectId}/data`}>Explore</NextLink>
+            </Breadcrumb>
+            <Breadcrumb>
+              <NextLink href={parentLink}>{entityType.title}</NextLink>
+            </Breadcrumb>
+            <Breadcrumb showChevron={false}>{entity.name}</Breadcrumb>
+          </div>
+          <div className="mt-5 flex flex-col gap-5">
+            <DetailMenu sections={entityType.detailViewSections} />
+          </div>
+          <ActionMenu entity={entity} type={type} ctx={{ virtualLabId, projectId }} />
         </div>
-        <ActionMenu entity={entity} type={type} ctx={{ virtualLabId, projectId }} />
-      </div>
-      <div className="relative w-4/5">
-        <div className="h-full w-full overflow-x-auto overflow-y-auto p-10">
-          <div className="h-[9%]">
-            <div className="text-neutral-4 uppercase">Name</div>
-            <div className="text-primary-8 text-2xl font-bold">{entity.name}</div>
+        <div className="relative w-4/5">
+          <div className="h-full w-full overflow-x-auto overflow-y-auto p-10">
+            <div className="h-[9%]">
+              <div className="text-neutral-4 uppercase">Name</div>
+              <div className="text-primary-8 text-2xl font-bold">{entity.name}</div>
+            </div>
+            <div className="h-[91%]">{children}</div>
           </div>
-          <div className="h-[91%]">{children}</div>
+          <Close href={parentLink} />
         </div>
-        <Close />
       </div>
-    </div>
+      {entityType.extendedType === 'circuit' && <CircuitDownloadPanel />}
+    </>
   );
 }

src/entity-configuration/definitions/fields-defs/common.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd';
+import { useAtom } from 'jotai';
 
-import { makeCustomRowSelectionEvent } from '@/components/explore-section/ExploreSectionListingView/expandable-row/custom-row-selection-event';
 import { transformAgentToNames } from '@/api/entitycore/transformers';
 import { ExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
 import { hasAssets } from '@/api/entitycore/guards';
@@ -22,10 +22,20 @@ import { DownloadIcon } from '@/components/icons';
 import type { EntityCoreObjectTypes } from '@/api/entitycore/types';
 import type { IContributor } from '@/api/entitycore/types/shared/global';
 import type { FieldsDefinitionRegistry } from '@/entity-configuration/definitions/types';
+import { downloadPanelCircuitAtom } from '@/ui/segments/explore/circuit/elements/download-panel';
 
-export type ProcessedContributor = {
-  name: string;
-  type: number; // 0 for Org, 1 for Person
+import { ICircuit } from '@/api/entitycore/types/entities/circuit';
+import { EntityTypeValue } from '@/entity-configuration/domain';
+
+const renderContributors = (r: EntityTypeValue, filter: 'person' | 'organization') => {
+  if (!('contributions' in r) || !r.contributions) return EmptyValue;
+
+  const filteredContributions = r.contributions.filter(
+    (c) => c.agent.type === 'consortium' || c.agent.type === filter
+  );
+
+  if (!filteredContributions || filteredContributions.length === 0) return EmptyValue;
+  return renderContributorsModal(filteredContributions, false, () => {}, 'inline');
 };
 
 export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObjectTypes>> = {
@@ -52,16 +62,7 @@ export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObject
     description: 'Download item',
     filter: null,
     render: (record) => {
-      const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation();
-        e.preventDefault();
-        makeCustomRowSelectionEvent({ record });
-      };
-      return (
-        <Button className="p-2" type="text" htmlType="button" onClick={onClick}>
-          <DownloadIcon className="text-current" />
-        </Button>
-      );
+      return <DownloadButton entity={record} />;
     },
     style: { width: 50, fixed: 'left', align: 'center' },
     isFilterable: false,
@@ -167,12 +168,29 @@ export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObject
         (r as EntityCoreObjectTypes & { contributions?: Array<IContributor> | null }).contributions,
         false
       ),
-    renderForDetailView: (r) => {
-      const { contributions } = r as EntityCoreObjectTypes & {
-        contributions?: Array<IContributor> | null;
-      };
-      return renderContributorsModal(contributions, false, () => {}, 'inline');
+    renderForDetailView: (r) => renderContributors(r, 'person'),
+    vocabulary: {
+      plural: 'Contributors',
+      singular: 'Contributor',
     },
+    defaultConstraint: 'contribution__pref_label__in',
+    order: {
+      property: 'contribution__order_by',
+      value: 'pref_label',
+    },
+    isSortable: false,
+    isFilterable: true,
+    isDisplayable: true,
+  },
+  [EntityCoreFields.InstitutionalContributions]: {
+    title: 'Institutional Contributors',
+    filter: CoreFieldFilterTypeEnum.CheckList,
+    render: (r) =>
+      transformAgentToNames(
+        (r as EntityCoreObjectTypes & { contributions?: Array<IContributor> | null }).contributions,
+        false
+      ),
+    renderForDetailView: (r) => renderContributors(r, 'organization'),
     vocabulary: {
       plural: 'Contributors',
       singular: 'Contributor',
@@ -260,3 +278,26 @@ export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObject
     isDisplayable: true,
   },
 };
+
+function DownloadButton({ entity }: { entity: EntityCoreObjectTypes }) {
+  const [, setDownloadPanelCircuit] = useAtom(downloadPanelCircuitAtom);
+
+  return (
+    <Button
+      className="p-2"
+      type="text"
+      htmlType="button"
+      onClick={(e) => {
+        const { type } = entity;
+        if (type !== 'circuit') return;
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        setDownloadPanelCircuit(entity as ICircuit);
+      }}
+    >
+      <DownloadIcon className="text-current" />
+    </Button>
+  );
+}

src/entity-configuration/definitions/fields-defs/enums.ts

@@ -20,6 +20,7 @@ export enum EntityCoreFields {
   RegistrationDate = 'registration_date',
   UpdateDate = 'update_date',
   Contributions = 'contribution',
+  InstitutionalContributions = 'institutional_contributions',
   License = 'license',
   BrainRegion = 'brain_region',
   MType = 'mtype',

src/entity-configuration/definitions/renderer.tsx

@@ -8,7 +8,6 @@ import isEmpty from 'lodash/isEmpty';
 import isNil from 'lodash/isNil';
 import find from 'lodash/find';
 
-import { ProcessedContributor } from '@/entity-configuration/definitions/fields-defs/common';
 import { getEntityByExtendedType } from '@/entity-configuration/domain/helpers';
 import { PreviewThumbnail } from '@/features/thumbnail/preview';
 import { tryCatch } from '@/api/utils';
@@ -18,6 +17,7 @@ import type { WorkspaceContext } from '@/types/common';
 import type {
   EntityCoreIdentifiable,
   EntityCoreResource,
+  IContributor,
   ILicense,
   MeasurementBase,
 } from '@/api/entitycore/types/shared/global';
@@ -254,61 +254,59 @@ export const renderMorphologyMeasurement = (
 // CONTRIBUTOR MODAL
 
 function ContributorsModalTrigger({
-  sortedContributors,
   contributors,
 }: {
-  sortedContributors: ProcessedContributor[];
-  contributors: Array<{ agent: { pref_label: string; type: string } }> | null | undefined;
+  contributors: Array<IContributor>;
 }): React.ReactElement {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <>
       <Button type="link" onClick={() => setIsOpen(true)} className="mt-2 h-auto p-0 text-gray-600">
-        View {sortedContributors.length} Contributor{sortedContributors.length > 1 ? 's' : ''}
+        View {contributors.length} Contributor{contributors.length > 1 ? 's' : ''}
       </Button>
       {renderContributorsModal(contributors, isOpen, () => setIsOpen(false), 'modal')}
     </>
   );
 }
 
 export const renderContributorsModal = (
-  contributors: Array<{ agent: { pref_label: string; type: string } }> | null | undefined,
+  contributors: Array<IContributor>,
   open: boolean,
   onClose: () => void,
   mode: 'modal' | 'inline' = 'modal'
 ): ReactNode => {
-  if (!contributors || contributors.length === 0) return EmptyValue;
+  const getName = (c: IContributor) =>
+    ('givenName' in c.agent && c.agent.givenName) || c.agent.pref_label;
 
-  const processedContributors: ProcessedContributor[] = contributors.map((contributor) => ({
-    name: contributor.agent.pref_label,
-    type: contributor.agent.type === 'organization' ? 0 : 1, // 0 for Org, 1 for Person
-  }));
+  const sortContributors = (a: IContributor, b: IContributor) => {
+    return getName(a).localeCompare(getName(b));
+  };
 
-  const sortedContributors = processedContributors.sort((a, b) =>
-    a.type === b.type ? String(a.name ?? '').localeCompare(String(b.name ?? '')) : a.type - b.type
-  );
+  const consortia = contributors
+    .filter((c) => c.agent.type === 'consortium')
+    .sort(sortContributors);
+  const other = contributors.filter((c) => c.agent.type !== 'consortium').sort(sortContributors);
+
+  const sortedContributors = [...consortia, ...other];
 
   if (mode === 'inline') {
     const displayContributors = sortedContributors.slice(0, 6);
     const hasMoreContributors = sortedContributors.length > 6;
 
     return (
       <div>
-        <span>
+        <span className="line-clamp-2">
           {displayContributors.map((contributor, index) => (
-            <span key={`${contributor.name}-${contributor.type}`}>
-              {contributor.name}
+            <span key={`${contributor.agent.pref_label}-${contributor.agent.type}`}>
+              {getName(contributor)}
               {index < displayContributors.length - 1 ? ', ' : ''}
             </span>
           ))}
         </span>
         {hasMoreContributors && (
           <>
             {displayContributors.length > 0 && ' '}
-            <ContributorsModalTrigger
-              sortedContributors={sortedContributors}
-              contributors={contributors}
-            />
+            <ContributorsModalTrigger contributors={contributors} />
           </>
         )}
       </div>
@@ -330,8 +328,8 @@ export const renderContributorsModal = (
     >
       <p className="text-primary-8" style={{ margin: 0, fontSize: '18px' }}>
         {sortedContributors.map((contributor, index) => (
-          <span key={`${contributor.name}-${contributor.type}`}>
-            {contributor.name}
+          <span key={`${contributor.agent.pref_label}-${contributor.agent.type}`}>
+            {getName(contributor)}
             {index < sortedContributors.length - 1 ? ', ' : ''}
           </span>
         ))}

src/entity-configuration/definitions/view-defs/index.tsx

@@ -15,6 +15,7 @@ import type { TExperimentTypeNames } from '@/entity-configuration/domain/experim
 export const CommonSummaryViewFields = [
   { field: EntityCoreFields.Description, className: 'col-span-3' },
   { field: EntityCoreFields.Contributions },
+  { field: EntityCoreFields.InstitutionalContributions },
   { field: EntityCoreFields.RegistrationDate },
 ] as TypeSummaryProps[];
 

src/entity-configuration/domain/simulation/paired-neurons-simulation.ts

@@ -159,7 +159,7 @@ export const PairedNeuronCircuitSimulation: EntityCoreTypeConfig<ICircuitSimulat
   },
   detailViewSections: ['overview', 'related-publications'],
   isBookmarkable: false,
-  isDownloadable: true,
+  isDownloadable: false,
   isCopyable: true,
   isSimulatable: true,
 } as const;

src/entity-configuration/domain/simulation/single-neuron-simulation.ts

@@ -59,7 +59,7 @@ export const SingleNeuronSimulation: EntityCoreTypeConfig<ISingleNeuronSimulatio
   },
   detailViewSections: ['overview', 'configuration', 'results', 'related-publications'],
   isBookmarkable: true,
-  isDownloadable: false,
+  isDownloadable: true,
   isCopyable: true,
   isSimulatable: false,
 } as const;

src/entity-configuration/domain/simulation/single-neuron-synaptome-simulation.ts

@@ -75,7 +75,7 @@ export const SingleNeuronSynaptomeSimulation: EntityCoreTypeConfig<ISingleNeuron
     },
     isBookmarkable: true,
     detailViewSections: ['overview', 'configuration', 'results', 'related-publications'],
-    isDownloadable: false,
+    isDownloadable: true,
     isCopyable: true,
     isSimulatable: false,
   } as const;

src/features/entities/circuit/elements/publication-item/header.tsx

@@ -6,7 +6,7 @@ interface PaperHeaderProps {
 export function Header({ title, className }: PaperHeaderProps) {
   return (
     <h2
-      className={`text-primary-8 flex-1 cursor-pointer text-xl leading-tight font-bold transition-colors ${className || ''}`}
+      className={`text-primary-8 flex-1 text-xl leading-tight font-bold transition-colors ${className || ''}`}
     >
       {title}
     </h2>

src/features/entities/circuit/elements/related-circuits/derived-from.tsx

@@ -11,7 +11,7 @@ import { BaseTable } from '@/components/explore-section/ExploreSectionListingVie
 import { ExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
 import { activeColumnsAtom } from '@/state/explore-section/list-view-atoms';
 import { ExploreDataScope } from '@/types/explore-section/application';
-import { resolveExploreDetailsPageUrl } from '@/utils/url-builder';
+import { resolveExploreDetailsPageUrl2 } from '@/utils/url-builder';
 
 import type { ICircuit } from '@/api/entitycore/types/entities/circuit';
 import type { WorkspaceContext } from '@/types/common';
@@ -47,7 +47,7 @@ export function DerivedFrom({ data }: Props) {
 
   const onCellClick = (basePath: string, record: ICircuit) => {
     navigate(
-      resolveExploreDetailsPageUrl({
+      resolveExploreDetailsPageUrl2({
         ctx: { virtualLabId, projectId },
         dataType: ExtendedEntitiesTypeDict.Circuit,
         entityId: record.id,