add deposition id filter ui

frontend/packages/data-portal/app/components/AnnotationFilter/AnnotationFilter.tsx

@@ -1,37 +1,52 @@
+import { NameOrIdFilterSection } from 'app/components/DepositionFilter'
 import {
   AnnotatedObjectNameFilter,
   AnnotatedObjectShapeTypeFilter,
   AuthorFilter,
   FilterPanel,
+  FilterSection,
 } from 'app/components/Filters'
 import { useI18n } from 'app/hooks/useI18n'
 import { useRunById } from 'app/hooks/useRunById'
+import { useFeatureFlag } from 'app/utils/featureFlags'
 
 import { AnnotationSoftwareFilter } from './AnnotationSoftwareFilter'
 import { GeneOntologyFilter } from './GeneOntologyFilter'
 import { MethodTypeFilter } from './MethodTypeFilter'
 
 export function AnnotationFilter() {
   const { t } = useI18n()
+  const showDepositions = useFeatureFlag('depositions')
   const { objectNames, objectShapeTypes, annotationSoftwares } = useRunById()
 
+  const annotationMetadataFilters = (
+    <>
+      <AuthorFilter label={t('annotationAuthor')} />
+      <AnnotatedObjectNameFilter
+        label={t('objectName')}
+        allObjectNames={objectNames}
+      />
+      <GeneOntologyFilter />
+      <AnnotatedObjectShapeTypeFilter allObjectShapeTypes={objectShapeTypes} />
+      <MethodTypeFilter />
+      <AnnotationSoftwareFilter allAnnotationSoftwares={annotationSoftwares} />
+    </>
+  )
+
   return (
     <FilterPanel>
-      <div className="pl-sds-l py-sds-default flex-col gap-sds-xxs">
-        <AuthorFilter label={t('annotationAuthor')} />
-        <AnnotatedObjectNameFilter
-          label={t('objectName')}
-          allObjectNames={objectNames}
-        />
-        <GeneOntologyFilter />
-        <AnnotatedObjectShapeTypeFilter
-          allObjectShapeTypes={objectShapeTypes}
-        />
-        <MethodTypeFilter />
-        <AnnotationSoftwareFilter
-          allAnnotationSoftwares={annotationSoftwares}
-        />
-      </div>
+      {showDepositions ? (
+        <>
+          <NameOrIdFilterSection />
+          <FilterSection title={t('annotationMetadata')}>
+            {annotationMetadataFilters}
+          </FilterSection>
+        </>
+      ) : (
+        <div className="pl-sds-l py-sds-default flex-col gap-sds-xxs">
+          {annotationMetadataFilters}
+        </div>
+      )}
     </FilterPanel>
   )
 }

frontend/packages/data-portal/app/components/DatasetFilter/DatasetFilter.tsx

@@ -25,7 +25,9 @@ export function DatasetFilter({
     },
     {
       logId: 'name-or-id-filter',
-      filter: <NameOrIdFilterSection />,
+      filter: (
+        <NameOrIdFilterSection depositionPageVariant={depositionPageVariant} />
+      ),
     },
     {
       logId: 'sample-and-experiments-filter',

frontend/packages/data-portal/app/components/DatasetFilter/NameOrIdFilterSection.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 
+import { DepositionIdFilter } from 'app/components/DepositionFilter'
 import {
   AuthorFilter,
   FilterSection,
@@ -10,7 +11,11 @@ import { QueryParams } from 'app/constants/query'
 import { useI18n } from 'app/hooks/useI18n'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 
-export function NameOrIdFilterSection() {
+export function NameOrIdFilterSection({
+  depositionPageVariant,
+}: {
+  depositionPageVariant?: boolean
+}) {
   const { t } = useI18n()
   const showDepositions = useFeatureFlag('depositions')
 
@@ -39,6 +44,7 @@ export function NameOrIdFilterSection() {
     <FilterSection title={t('nameOrId')}>
       <MultiInputFilter label={t('datasetIds')} filters={datasetIdFilters} />
       <AuthorFilter label={t(showDepositions ? 'datasetAuthor' : 'author')} />
+      {showDepositions && !depositionPageVariant && <DepositionIdFilter />}
     </FilterSection>
   )
 }

frontend/packages/data-portal/app/components/DepositionFilter/DepositionIdFilter.tsx

@@ -0,0 +1,17 @@
+import { IDFilter } from 'app/components/Filters'
+import { QueryParams } from 'app/constants/query'
+import { useI18n } from 'app/hooks/useI18n'
+
+export function DepositionIdFilter() {
+  const { t } = useI18n()
+
+  return (
+    <IDFilter
+      id="deposition-id-input"
+      title={t('filterByDepositionId')}
+      label={t('depositionId')}
+      queryParam={QueryParams.DepositionId}
+      prefix="CZCDP-"
+    />
+  )
+}

frontend/packages/data-portal/app/components/DepositionFilter/NameOrIdFilterSection.tsx

@@ -0,0 +1,14 @@
+import { FilterSection } from 'app/components/Filters'
+import { useI18n } from 'app/hooks/useI18n'
+
+import { DepositionIdFilter } from './DepositionIdFilter'
+
+export function NameOrIdFilterSection() {
+  const { t } = useI18n()
+
+  return (
+    <FilterSection title={t('nameOrId')}>
+      <DepositionIdFilter />
+    </FilterSection>
+  )
+}

frontend/packages/data-portal/app/components/DepositionFilter/index.ts

@@ -0,0 +1,2 @@
+export * from './DepositionIdFilter'
+export * from './NameOrIdFilterSection'

frontend/packages/data-portal/app/components/RunFilter/RunFilter.tsx

@@ -1,3 +1,4 @@
+import { NameOrIdFilterSection } from 'app/components/DepositionFilter'
 import {
   AnnotatedObjectNameFilter,
   AnnotatedObjectShapeTypeFilter,
@@ -8,11 +9,13 @@ import {
 } from 'app/components/Filters'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { useI18n } from 'app/hooks/useI18n'
+import { useFeatureFlag } from 'app/utils/featureFlags'
 
 import { QualityScoreFilter } from './QualityScoreFilter'
 
 export function RunFilter() {
   const { t } = useI18n()
+  const showDepositions = useFeatureFlag('depositions')
   const { objectNames, objectShapeTypes } = useDatasetById()
 
   return (
@@ -21,6 +24,8 @@ export function RunFilter() {
         <GroundTruthAnnotationFilter />
       </FilterSection>
 
+      {showDepositions && <NameOrIdFilterSection />}
+
       <FilterSection title={t('tiltSeriesMetadata')}>
         <QualityScoreFilter />
         <TiltRangeFilter />

frontend/packages/data-portal/app/constants/query.ts

@@ -7,6 +7,7 @@ export enum QueryParams {
   AvailableFiles = 'files',
   CameraManufacturer = 'camera_manufacturer',
   DatasetId = 'dataset_id',
+  DepositionId = 'deposition-id',
   DownloadConfig = 'download-config',
   DownloadStep = 'download-step',
   DownloadTab = 'download-tab',

frontend/packages/data-portal/public/locales/en/translation.json

@@ -148,6 +148,7 @@
   "fileSummary": "File Summary",
   "filterBy": "Filter by",
   "filterByAnyOfTheFollowing": "Filter by any of the following",
+  "filterByDepositionId": "Filter by Deposition ID",
   "filterByGeneOntologyId": "Filter by Gene Ontology ID",
   "filterCountOfMaxType": "{{count}} of {{max}} {{type}}",
   "filterNoResultsFound": "No results were found",