V2: Improve detail view styling

src/app/app/v2/[virtualLabId]/[projectId]/data/view/[type]/[id]/[section]/page.tsx

@@ -10,7 +10,6 @@ import {
 
 import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
 import Overview from '@/ui/segments/detail-view/overview';
-import Visualization from '@/ui/segments/detail-view/viz';
 import Analysis from '@/ui/segments/detail-view/analysis';
 import RelatedArtifacts from '@/ui/segments/detail-view/related-artifacts';
 import RelatedPublications from '@/ui/segments/detail-view/related-publications';
@@ -42,9 +41,6 @@ export default async function Page({
   if (section === 'overview') {
     return <Overview entity={entity} extendedType={entityType.extendedType} ctx={ctx} />;
   }
-  if (section === 'visualization') {
-    return <Visualization entity={entity} ctx={ctx} />;
-  }
   if (section === 'analysis') {
     return <Analysis entity={entity} extendedType={entityType.extendedType} />;
   }

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

@@ -31,6 +31,16 @@ import type {
 import type { FieldsDefinitionRegistry } from '@/entity-configuration/definitions/types';
 import type { IEType, IMType } from '@/api/entitycore/types/shared/global';
 
+const morphologyMtypes = (morphology?: IReconstructionMorphology) => {
+  if (!morphology) return [];
+  return renderEmptyOrValue(renderArray(morphology.mtypes?.map((m) => m.pref_label) || []));
+};
+
+const emodelEtypes = (emodel?: IEModel) => {
+  if (!emodel) return [];
+  return renderEmptyOrValue(renderArray(emodel.etypes?.map((m) => m.pref_label) || []));
+};
+
 export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObjectTypes>> = {
   [EntityCoreFields.License]: {
     title: 'License',
@@ -86,19 +96,20 @@ export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObject
     fieldType: CoreFieldType.CellType,
     title: 'M-Type',
     filter: CoreFieldFilterTypeEnum.CheckList,
-    render: (r) => {
+    render(r: EntityCoreObjectTypes) {
       if (isSingleNeuronSynaptome(r)) {
-        return renderEmptyOrValue(renderArray(r.me_model.mtypes?.map((m) => m.pref_label) || []));
-      }
-      if (isMemodel(r) && isEmpty(r.etypes)) {
         return renderEmptyOrValue(
           renderArray(
-            (
-              r.morphology as IReconstructionMorphology & { etypes: Array<IMType> | null }
-            ).mtypes?.map((m) => m.pref_label) || []
+            (r.me_model.mtypes &&
+              r.me_model.mtypes.length > 0 &&
+              r.me_model.mtypes.map((m) => m.pref_label)) ||
+              morphologyMtypes(r.me_model.morphology)
           )
         );
       }
+      if (isMemodel(r) && isEmpty(r.etypes)) {
+        return morphologyMtypes(r.morphology);
+      }
       return renderEmptyOrValue(
         renderArray(
           (r as EntityCoreObjectTypes & { mtypes: Array<IMType> | null }).mtypes?.map(
@@ -132,19 +143,20 @@ export const FieldsDefinition: Partial<FieldsDefinitionRegistry<EntityCoreObject
     fieldType: CoreFieldType.CellType,
     title: 'E-Type',
     filter: CoreFieldFilterTypeEnum.CheckList,
-    render: (r) => {
+    render(r: EntityCoreObjectTypes) {
       if (isSingleNeuronSynaptome(r)) {
-        return renderEmptyOrValue(renderArray(r.me_model.etypes?.map((m) => m.pref_label) || []));
-      }
-      if (isMemodel(r) && isEmpty(r.etypes)) {
         return renderEmptyOrValue(
           renderArray(
-            (r.emodel as IEModel & { etypes: Array<IEType> | null }).etypes?.map(
-              (e) => e.pref_label
-            ) || []
+            (r.me_model.etypes &&
+              r.me_model.etypes.length > 0 &&
+              r.me_model.etypes.map((m) => m.pref_label)) ||
+              emodelEtypes(r.me_model.emodel)
           )
         );
       }
+      if (isMemodel(r) && isEmpty(r.etypes)) {
+        return emodelEtypes(r.emodel);
+      }
       return renderEmptyOrValue(
         renderArray(
           (r as EntityCoreObjectTypes & { etypes: Array<IEType> | null }).etypes?.map(

src/entity-configuration/definitions/types.ts

@@ -129,7 +129,6 @@ export type FieldsDefinitionRegistry<T extends EntityCoreIdentifiable> = Record<
 export type DetailViewSection =
   | 'overview'
   | 'results'
-  | 'visualization'
   | 'analysis'
   | 'related-publications'
   | 'related-artifacts'

src/entity-configuration/definitions/view-defs/experimental.ts

@@ -178,10 +178,10 @@ export const ViewsDefinition: { [key: string]: ViewDefinitionConfig } = {
       { field: EntityCoreFields.Species },
       { field: EntityCoreFields.License },
       { field: EntityCoreFields.MType },
-      { field: EntityCoreFields.SubjectAge, className: 'col-span-2' },
-      { field: EntityCoreFields.EType, className: 'col-span-3' },
-      { field: EntityCoreFields.NeuronDensity, className: 'col-span-3' },
-      { field: EntityCoreFields.NumberOfMeasurements, className: 'col-span-3' },
+      { field: EntityCoreFields.SubjectAge },
+      { field: EntityCoreFields.EType },
+      { field: EntityCoreFields.NeuronDensity },
+      { field: EntityCoreFields.NumberOfMeasurements },
     ],
     miniDetailView: [
       { field: EntityCoreFields.BrainRegion },
@@ -211,11 +211,11 @@ export const ViewsDefinition: { [key: string]: ViewDefinitionConfig } = {
       { field: EntityCoreFields.Species },
       { field: EntityCoreFields.License },
       { field: EntityCoreFields.MType },
-      { field: EntityCoreFields.SubjectAge, className: 'col-span-2' },
+      { field: EntityCoreFields.SubjectAge },
       { field: EntityCoreFields.MeanSTD },
-      { field: EntityCoreFields.Weight, className: 'col-span-2' },
-      { field: EntityCoreFields.Sem, className: 'col-span-3' },
-      { field: EntityCoreFields.NumberOfMeasurements, className: 'col-span-3' },
+      { field: EntityCoreFields.Weight },
+      { field: EntityCoreFields.Sem },
+      { field: EntityCoreFields.NumberOfMeasurements },
     ],
     miniDetailView: [
       { field: EntityCoreFields.BrainRegion },
@@ -245,12 +245,12 @@ export const ViewsDefinition: { [key: string]: ViewDefinitionConfig } = {
       { field: EntityCoreFields.Species },
       { field: EntityCoreFields.License },
       { field: EntityCoreFields.PostSynapticBrainRegion },
-      { field: EntityCoreFields.SubjectAge, className: 'col-span-2' },
+      { field: EntityCoreFields.SubjectAge },
       { field: EntityCoreFields.PreSynapticCellType },
-      { field: EntityCoreFields.Weight, className: 'col-span-2' },
-      { field: EntityCoreFields.PostSynapticCellType, className: 'col-span-3' },
-      { field: EntityCoreFields.MeanSTD, className: 'col-span-3' },
-      { field: EntityCoreFields.Sem, className: 'col-span-3' },
+      { field: EntityCoreFields.Weight },
+      { field: EntityCoreFields.PostSynapticCellType },
+      { field: EntityCoreFields.MeanSTD },
+      { field: EntityCoreFields.Sem },
       // {
       //   field: EntityCoreFields.NumberOfConnections,
       // },

src/entity-configuration/definitions/view-defs/model.ts

@@ -25,7 +25,7 @@ export const ViewsDefinition: { [key: string]: ViewDefinitionConfig } = {
     summaryViewFields: [
       { field: EntityCoreFields.BrainRegion },
       { field: EntityCoreFields.EModelScore },
-      { field: EntityCoreFields.MType, className: 'col-span-3' },
+      { field: EntityCoreFields.MType },
       { field: EntityCoreFields.EType },
     ],
     miniDetailView: [
@@ -54,10 +54,10 @@ export const ViewsDefinition: { [key: string]: ViewDefinitionConfig } = {
     ],
     curated: false,
     summaryViewFields: [
-      { field: EntityCoreFields.BrainRegion, className: 'col-span-2' },
-      { field: EntityCoreFields.MEModelValidationStatus, className: 'col-span-2 text-left' },
-      { field: EntityCoreFields.MType, className: 'col-span-4' },
-      { field: EntityCoreFields.EType, className: 'col-span-4' },
+      { field: EntityCoreFields.BrainRegion },
+      { field: EntityCoreFields.MEModelValidationStatus },
+      { field: EntityCoreFields.MType },
+      { field: EntityCoreFields.EType },
     ],
     miniDetailView: [
       { field: EntityCoreFields.BrainRegion },

src/entity-configuration/domain/experimental/electrical-cell-recording.ts

@@ -40,7 +40,7 @@ export const ElectricalCellRecording: EntityCoreTypeConfig<IElectricalCellRecord
   asset: {
     extension: 'application/nwb',
   },
-  detailViewSections: ['overview', 'visualization', 'related-publications'],
+  detailViewSections: ['overview', 'related-publications'],
   isDownloadable: true,
   isBookmarkable: true,
   isCopyable: true,

src/entity-configuration/domain/experimental/reconstruction-morphology.ts

@@ -39,7 +39,7 @@ export const ReconstructionMorphology: EntityCoreTypeConfig<
     extension: 'application/swc',
   },
   viewDefinition: ViewsDefinitionRegistry[ExtendedEntitiesTypeDict.ReconstructionMorphology],
-  detailViewSections: ['overview', 'visualization', 'related-publications'],
+  detailViewSections: ['overview', 'related-publications'],
   isDownloadable: true,
   isBookmarkable: true,
   isCopyable: true,

src/features/ephys-viewer/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import dynamic from 'next/dynamic';
 
 const EphysViewer = dynamic(() => import('./ephys-viewer'), { ssr: false });

src/features/model-analysis/viewer/container.tsx

@@ -1,12 +1,10 @@
-import { useMemo, useState } from 'react';
-import { Collapse } from 'antd';
 import dynamic from 'next/dynamic';
 
+import groupBy from 'lodash/groupBy';
 import { AllowedTypes } from '@/features/model-analysis/viewer/storage';
-
 import type { IValidationConstructedResult } from '@/features/model-analysis/explorer/context';
 import type { TAllowedTypes } from '@/features/model-analysis/viewer/storage';
-import { Button } from '@/ui/molecules/button';
+import Tabs, { Tab } from '@/ui/molecules/tabbed-page';
 
 const Viewer = dynamic(() => import('@/features/model-analysis/viewer/viewer'), {
   ssr: false,
@@ -16,106 +14,24 @@ type Props = {
   validationResults: IValidationConstructedResult | null;
 };
 
-function cleanTitle(title: string): string {
-  const blacklist = ['Simulatable', 'Validation', 'Neuron'];
-  return title
-    .split(' ')
-    .filter((word) => !blacklist.includes(word))
-    .join(' ');
-}
-
-function TabLabel({ title, count }: { title: string; count: number }) {
-  return (
-    <span>
-      {title}
-      <span style={{ marginLeft: 8, color: '#999' }}>({count})</span>
-    </span>
-  );
-}
-
 export function ViewerContainer({ validationResults }: Props) {
   const allowedValidationResults = validationResults?.filter((o) =>
     o.assets?.some((obj) => AllowedTypes.includes(obj.content_type as TAllowedTypes))
   );
-  const allCount = allowedValidationResults?.reduce(
-    (acc, item) =>
-      acc +
-      (item.assets?.filter((o) => AllowedTypes.includes(o.content_type as TAllowedTypes)).length ||
-        0),
-    0
-  );
-  const allValidationResultsMap = allowedValidationResults?.map((validationResult) => [
-    { id: validationResult.id, name: validationResult.name },
-    validationResult,
-  ]) as Array<[{ id: string; name: string }, IValidationConstructedResult[number]]>;
 
-  const [type, setType] = useState<string | undefined>(allowedValidationResults?.[0]?.id);
-  const tabs = useMemo(
-    () => [
-      { key: 'all', label: <TabLabel title="All" count={allCount || 0} /> },
-      ...(allowedValidationResults?.map((item) => ({
-        key: item.id,
-        label: (
-          <TabLabel
-            title={cleanTitle(item.name)}
-            count={
-              item.assets?.filter((o) => AllowedTypes.includes(o.content_type as TAllowedTypes))
-                .length || 0
-            }
-          />
-        ),
-      })) ?? []),
-    ],
-    [allCount, allowedValidationResults]
-  );
+  const groupedvalidationResults = groupBy(allowedValidationResults, 'name');
 
   return (
-    <div className="bg-neutral-1 h-full w-full">
-      <div className="bg-neutral-1 sticky -top-10 z-10 flex flex-wrap gap-5">
-        {tabs.map((t) => (
-          <Button
-            key={t.key}
-            onClick={() => setType(t.key)}
-            active={type === t.key}
-            variant="outline"
-          >
-            {t.label}
-          </Button>
-        ))}
-      </div>
-
-      <div className="w-full">
-        <div className="w-full min-w-full">
-          {type === 'all' ? (
-            <Collapse
-              bordered={false}
-              className="bg-white"
-              items={allValidationResultsMap?.map(([{ id, name }, resultItem]) => ({
-                key: `result-item-cls/${id}/${resultItem.id}`,
-                label: (
-                  <span className="text-primary-8">
-                    {cleanTitle(name)}{' '}
-                    <span className="text-neutral-4">
-                      (
-                      {resultItem.assets?.filter((o) =>
-                        AllowedTypes.includes(o.content_type as TAllowedTypes)
-                      ).length || 0}
-                      )
-                    </span>
-                  </span>
-                ),
-                children: <Viewer validationResult={resultItem} key={resultItem.id} />,
-              }))}
-            />
-          ) : (
-            validationResults
-              ?.filter((o) => o.id === type)
-              ?.map((resultItem) => {
-                return <Viewer validationResult={resultItem} key={resultItem.id} />;
-              })
-          )}
-        </div>
-      </div>
-    </div>
+    <Tabs defaultMessage="No validation results found">
+      {Object.entries(groupedvalidationResults).map(([name, results]) => {
+        return (
+          <Tab label={name} key={name}>
+            {results.map((r) => (
+              <Viewer validationResult={r} key={r.id} />
+            ))}
+          </Tab>
+        );
+      })}
+    </Tabs>
   );
 }

src/features/model-analysis/viewer/viewer.tsx

@@ -33,20 +33,17 @@ export default function AssetViewer({ validationResult }: Props) {
   );
 
   return (
-    <div data-testid="documents-container" className="bg-neutral-1 mt-4 flex flex-col items-center">
+    <div data-testid="documents-container" className="mt-4 flex flex-col items-center">
       {validationResult.assets
         ?.filter((o) => AllowedTypes.includes(o.content_type as TAllowedTypes))
-        .map((asset, ix) => {
+        .map((asset) => {
           return (
             <div
               id={`document_${asset.id}`}
               key={`document_${asset.id}`}
               className="mb-5 flex w-full flex-col items-center"
             >
-              <h2 className="text-primary-8 mb-6 flex w-max items-center justify-center self-start p-3 text-center text-xl font-bold capitalize">
-                <span className="bg-neutral-1 flex h-12! w-12! items-center justify-center">
-                  {ix + 1}
-                </span>
+              <h2 className="text-primary-8 border-neutral-2 mb-6 block! w-full rounded-full border p-3 text-xl font-bold capitalize">
                 <span className="ml-4">{lowerCase(asset.path.split('.').at(0))}</span>
               </h2>
               {content(asset)}