No commit message

frontend/packages/data-portal/app/components/Deposition/MethodLinks/common.tsx

@@ -1,8 +1,10 @@
 import { Icon } from '@czi-sds/components'
 import { ReactNode } from 'react'
 
+import { Annotation_Method_Link_Type_Enum } from 'app/__generated_v2__/graphql'
 import { SourceCodeIcon, WeightsIcon } from 'app/components/icons'
 import { VariantLinkProps } from 'app/components/Link'
+import { AnnotationMethodLink } from 'app/types/gql/genericTypes'
 import { I18nKeys } from 'app/types/i18n'
 
 import { METHOD_LINK_TYPES, MethodLinkDataType, MethodLinkType } from './type'
@@ -81,3 +83,26 @@ export function generateMethodLinks(
     )
     .map((props) => methodLinkFromVariant(props))
 }
+
+export function generateMethodLinksV2(
+  links: AnnotationMethodLink[],
+): MethodLinkProps[] {
+  return links
+    .sort(
+      (a, b) =>
+        METHOD_LINK_TYPES.indexOf(getLinkType(a)) -
+        METHOD_LINK_TYPES.indexOf(getLinkType(b)),
+    )
+    .map((link) => ({
+      title: link.name ?? '',
+      url: link.link ?? '',
+      icon: ICON_MAP[getLinkType(link)],
+      i18nLabel: METHOD_TYPE_TO_I18N_KEY[getLinkType(link)],
+    }))
+}
+
+function getLinkType(
+  link: AnnotationMethodLink,
+): Annotation_Method_Link_Type_Enum {
+  return link.linkType ?? Annotation_Method_Link_Type_Enum.Other
+}

frontend/packages/data-portal/app/components/Download/FileFormatDropdown.tsx

@@ -21,6 +21,17 @@ const FILE_FORMAT_TOOLTIP_I18N: Record<string, I18nKeys> = {
 }
 
 export const FILE_FORMAT_ORDER = ['mrc', 'zarr', 'ndjson']
+export function getDefaultFileFormat(
+  availableFormats: string[],
+): string | undefined {
+  for (const fileFormat of FILE_FORMAT_ORDER) {
+    if (availableFormats.includes(fileFormat)) {
+      return fileFormat
+    }
+  }
+
+  return undefined
+}
 
 /**
  * Renders select dropdown with file formats specified in the `fileFormats`
@@ -41,7 +52,6 @@ export function FileFormatDropdown({
   const matchingFileFormats = FILE_FORMAT_ORDER.filter((format) =>
     fileFormats.includes(format),
   )
-  const defaultFormat = matchingFileFormats[0]
 
   const fileFormatOptions = useMemo<SelectOption[]>(
     () =>
@@ -53,7 +63,8 @@ export function FileFormatDropdown({
     [matchingFileFormats, t],
   )
 
-  const selectedFormat = fileFormat ?? defaultFormat
+  const selectedFormat =
+    fileFormat ?? getDefaultFileFormat(matchingFileFormats)!
 
   return (
     <Select

frontend/packages/data-portal/app/components/Run/AnnotationConfidenceTable.tsx

@@ -1,9 +1,9 @@
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { useI18n } from 'app/hooks/useI18n'
-import { useAnnotation } from 'app/state/annotation'
+import { useSelectedAnnotationShape } from 'app/state/annotation'
 
 export function AnnotationConfidenceTable() {
-  const { activeAnnotation: annotation } = useAnnotation()
+  const { activeAnnotation: annotation } = useSelectedAnnotationShape()
   const { t } = useI18n()
 
   if (!annotation) {

frontend/packages/data-portal/app/components/Run/AnnotationDrawer.tsx

@@ -2,15 +2,15 @@ import { MetadataDrawer } from 'app/components/MetadataDrawer'
 import { IdPrefix } from 'app/constants/idPrefixes'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
 import { i18n } from 'app/i18n'
-import { useAnnotation } from 'app/state/annotation'
+import { useSelectedAnnotationShape } from 'app/state/annotation'
 import { getAnnotationTitle } from 'app/utils/annotation'
 
 import { AnnotationConfidenceTable } from './AnnotationConfidenceTable'
 import { AnnotationObjectTable } from './AnnotationObjectTable/AnnotationObjectTable'
 import { AnnotationOverviewTable } from './AnnotationOveriewTable'
 
 export function AnnotationDrawer() {
-  const { activeAnnotation, setActiveAnnotation } = useAnnotation()
+  const { activeAnnotation, setActiveAnnotation } = useSelectedAnnotationShape()
 
   return (
     <MetadataDrawer

frontend/packages/data-portal/app/components/Run/AnnotationObjectTable/AnnotationObjectTable.tsx

@@ -1,15 +1,15 @@
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes'
 import { useI18n } from 'app/hooks/useI18n'
-import { useAnnotation } from 'app/state/annotation'
+import { useSelectedAnnotationShape } from 'app/state/annotation'
 import { ObjectShapeType } from 'app/types/shapeTypes'
 import { getTableData } from 'app/utils/table'
 
 import { ObjectIdLink } from './components/ObjectIdLink'
 
 export function AnnotationObjectTable() {
   const { t } = useI18n()
-  const { activeAnnotation: annotation } = useAnnotation()
+  const { activeAnnotation: annotation } = useSelectedAnnotationShape()
 
   if (!annotation) {
     return null

frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx

@@ -5,39 +5,40 @@ import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
 import { AuthorList } from 'app/components/AuthorList'
 import { MethodLink } from 'app/components/Deposition/MethodLinks'
-import { generateMethodLinks } from 'app/components/Deposition/MethodLinks/common'
-import { MethodLinkDataType } from 'app/components/Deposition/MethodLinks/type'
+import { generateMethodLinksV2 } from 'app/components/Deposition/MethodLinks/common'
 import { Link } from 'app/components/Link'
 import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { useRunById } from 'app/hooks/useRunById'
-import { useAnnotation } from 'app/state/annotation'
+import { useSelectedAnnotationShape } from 'app/state/annotation'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 
 import { I18n } from '../I18n'
 import { Tooltip } from '../Tooltip'
 
 export function AnnotationOverviewTable() {
-  const { activeAnnotation: annotation } = useAnnotation()
+  const { selectedAnnotationShape } = useSelectedAnnotationShape()
   const { t } = useI18n()
   const isDepositionsEnabled = useFeatureFlag('depositions')
 
   const methodLinks = useMemo(
     () =>
-      generateMethodLinks(
-        (annotation?.method_links ?? []) as MethodLinkDataType[],
+      generateMethodLinksV2(
+        selectedAnnotationShape?.annotation?.methodLinks.edges.map(
+          (methodLink) => methodLink.node,
+        ) ?? [],
       ),
-    [annotation],
+    [selectedAnnotationShape],
   )
 
   const { annotationShapes } = useRunById()
   const v2AnnotationShape = annotationShapes.find(
     (currentAnnotation) =>
-      currentAnnotation.annotation?.id === annotation?.id &&
-      currentAnnotation.shapeType === annotation?.shape_type,
+      currentAnnotation.annotation?.id === selectedAnnotationShape?.id &&
+      currentAnnotation.shapeType === selectedAnnotationShape?.shapeType,
   )
 
-  if (!annotation) {
+  if (!selectedAnnotationShape) {
     return null
   }
 
@@ -48,53 +49,69 @@ export function AnnotationOverviewTable() {
       data={[
         {
           label:
-            annotation.authors.length === 1
+            selectedAnnotationShape.annotation?.authors.edges.length === 1
               ? t('annotationAuthor')
               : t('annotationAuthors'),
           labelExtra: <AuthorLegend inline />,
           renderValue: () => {
-            return <AuthorList authors={annotation.authors} large />
+            return (
+              <AuthorList
+                authors={
+                  selectedAnnotationShape.annotation?.authors.edges.map(
+                    (author) => author.node,
+                  ) ?? []
+                }
+                large
+              />
+            )
           },
           values: [''],
           className: 'leading-sds-body-s',
         },
         {
           label: t('publication'),
-          values: [annotation.annotation_publication ?? '--'],
+          values: [
+            selectedAnnotationShape.annotation?.annotationPublication ?? '--',
+          ],
         },
 
-        ...(isDepositionsEnabled && annotation.deposition
+        ...(isDepositionsEnabled &&
+        selectedAnnotationShape.annotation?.deposition
           ? [
               {
                 label: t('depositionName'),
                 values: ['Deposition Name'],
                 renderValue: () => (
                   <Link
                     className="text-sds-color-primitive-blue-400"
-                    to={`/depositions/${annotation.deposition?.id}`}
+                    to={`/depositions/${selectedAnnotationShape.annotation?.deposition?.id}`}
                   >
-                    {annotation.deposition?.title}
+                    {selectedAnnotationShape.annotation?.deposition?.title}
                   </Link>
                 ),
               },
               {
                 label: t('depositionId'),
-                values: [`${IdPrefix.Deposition}-${annotation.deposition?.id}`],
+                values: [
+                  `${IdPrefix.Deposition}-${selectedAnnotationShape.annotation?.deposition?.id}`,
+                ],
               },
             ]
           : []),
 
         {
           label: t('depositionDate'),
-          values: [annotation.deposition_date],
+          values: [selectedAnnotationShape.annotation?.depositionDate ?? '--'],
         },
         {
           label: t('releaseDate'),
-          values: [annotation.release_date],
+          values: [selectedAnnotationShape.annotation?.releaseDate ?? '--'],
         },
         {
           label: t('lastModifiedDate'),
-          values: [annotation.last_modified_date ?? '--'],
+          values: [
+            selectedAnnotationShape.annotation?.lastModifiedDate ?? '--',
+          ],
         },
         {
           label: t('alignmentId'),
@@ -112,21 +129,24 @@ export function AnnotationOverviewTable() {
             </Tooltip>
           ),
           values: [
+            // Assumes all files have the same alignment ID.
             v2AnnotationShape?.annotationFiles.edges.at(0)?.node.alignmentId ??
               '--',
           ],
         },
         {
           label: t('methodType'),
-          values: [annotation.method_type ?? '--'],
+          values: [selectedAnnotationShape.annotation?.methodType ?? '--'],
         },
         {
           label: t('annotationMethod'),
-          values: [annotation.annotation_method],
+          values: [selectedAnnotationShape.annotation?.annotationMethod],
         },
         {
           label: t('annotationSoftware'),
-          values: [annotation.annotation_software ?? '--'],
+          values: [
+            selectedAnnotationShape.annotation?.annotationSoftware ?? '--',
+          ],
         },
 
         ...(isDepositionsEnabled