Skip to content

Commit

Permalink
feat: api migration for browse all depositions page (#1357)
Browse files Browse the repository at this point in the history
  • Loading branch information
kne42 authored Dec 4, 2024
1 parent 72af8e9 commit dbec885
Show file tree
Hide file tree
Showing 12 changed files with 493 additions and 81 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { GetDepositionsDataQuery } from 'app/__generated__/graphql'
import { AuthorInfoType } from 'app/types/authorInfo'
import {
BrowseAllDepositionsPageDataType,
Deposition,
} from 'app/types/PageData/browseAllDepositionsPageData'
import { ObjectShapeType } from 'app/types/shapeTypes'
import { remapAPI } from 'app/utils/apiMigration'

const remapV1Author = remapAPI<
GetDepositionsDataQuery['depositions'][number]['authors'][number],
AuthorInfoType
>({
name: 'name',
primaryAuthorStatus: 'primary_author_status',
correspondingAuthorStatus: 'corresponding_author_status',
} as const)

const remapV1Deposition = remapAPI<
GetDepositionsDataQuery['depositions'][number],
Deposition
>({
id: 'id',
title: 'title',
keyPhotoThumbnailUrl: 'key_photo_thumbnail_url',
depositionDate: 'deposition_date',
authors: (deposition) => deposition.authors.map(remapV1Author),
annotationCount: (deposition) =>
deposition.annotations_aggregate.aggregate?.count ?? 0,
annotatedObjects: (deposition) =>
Array.from(
new Set(
deposition.annotations.map((annotation) => annotation.object_name),
),
).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })),
objectShapeTypes: (deposition) =>
Array.from(
new Set(
deposition.shape_types.flatMap((annotation) =>
annotation.files.map((file) => file.shape_type as ObjectShapeType),
),
),
).sort((a, b) => a.localeCompare(b)),
acrossDatasets: () => 0,
} as const)

export const remapV1BrowseAllDepositions = remapAPI<
GetDepositionsDataQuery,
BrowseAllDepositionsPageDataType
>({
totalDepositionCount: (data) =>
data.depositions_aggregate.aggregate?.count ?? 0,
filteredDepositionCount: (data) =>
data.filtered_depositions_aggregate.aggregate?.count ?? 0,
depositions: (data) => data.depositions.map(remapV1Deposition),
allObjectNames: (data) =>
Array.from(
new Set(data.object_names.map((annotation) => annotation.object_name)),
).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })),
allObjectShapeTypes: (data) =>
Array.from(
new Set(
data.object_shape_types.map(
(annotation) => annotation.shape_type as ObjectShapeType,
),
),
).sort((a, b) => a.localeCompare(b)),
} as const)
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { GetDepositionsDataV2Query } from 'app/__generated_v2__/graphql'
import {
BrowseAllDepositionsPageDataType,
Deposition,
} from 'app/types/PageData/browseAllDepositionsPageData'
import { ObjectShapeType } from 'app/types/shapeTypes'
import { remapAPI } from 'app/utils/apiMigration'

const remapV2Deposition = remapAPI<
GetDepositionsDataV2Query['depositions'][number],
Deposition
>({
id: 'id',
title: 'title',
keyPhotoThumbnailUrl: 'keyPhotoThumbnailUrl',
depositionDate: (deposition) => deposition.depositionDate.split('T')[0],
authors: (deposition) =>
deposition.authors?.edges?.map((edge) => edge.node) ?? [],
annotationCount: (deposition) =>
deposition.annotationsCount?.aggregate?.at(0)?.count ?? 0,
annotatedObjects: (deposition) =>
Array.from(
new Set(
deposition.objectNames?.aggregate
?.map((aggregate) => aggregate.groupBy?.objectName ?? '')
.filter((value) => value !== '') ?? [],
),
).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })),
// TODO: uncomment/remap when efficient query is available
// objectShapeTypes: (deposition) =>
// Array.from(
// new Set(
// deposition.shapeTypes?.edges.flatMap(
// (edge) =>
// edge.node.annotationShapes?.edges.flatMap(
// (edge2) => edge2.node?.shapeType as ObjectShapeType,
// ),
// ),
// ),
// ).sort((a, b) => a.localeCompare(b)),
objectShapeTypes: () => [],
acrossDatasets: (deposition) =>
deposition.annotationDatasetCount?.aggregate?.length ?? 0,
} as const)

export const remapV2BrowseAllDepositions = remapAPI<
GetDepositionsDataV2Query,
BrowseAllDepositionsPageDataType
>({
totalDepositionCount: (data) =>
data.totalDepositionCount?.aggregate?.at(0)?.count ?? 0,
filteredDepositionCount: (data) =>
data.filteredDepositionCount?.aggregate?.at(0)?.count ?? 0,
depositions: (data) =>
data.depositions.map(remapV2Deposition).sort((a, b) => {
const dateDiff =
new Date(b.depositionDate).getTime() -
new Date(a.depositionDate).getTime()
if (dateDiff !== 0) return dateDiff
return b.id - a.id
}),
allObjectNames: (data) =>
Array.from(
new Set(
data.allObjectNames?.aggregate
?.map((aggregate) => aggregate.groupBy?.objectName ?? '')
.filter((value) => value !== '') ?? [],
),
).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })),
allObjectShapeTypes: (data) =>
Array.from(
new Set(
data.allObjectShapeTypes?.aggregate?.map(
(aggregate) => aggregate.groupBy?.shapeType as ObjectShapeType,
) ?? [],
),
).sort((a, b) => a.localeCompare(b)),
} as const)
2 changes: 2 additions & 0 deletions frontend/packages/data-portal/app/apiNormalization/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './browseAllDepositionsV1'
export * from './browseAllDepositionsV2'
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,28 @@ import { shapeTypeToI18nKey } from 'app/constants/objectShapeTypes'
import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
import { QueryParams } from 'app/constants/query'
import { DepositionTableWidths } from 'app/constants/table'
import { Deposition, useDepositions } from 'app/hooks/useDepositions'
import { useDepositions } from 'app/hooks/useDepositions'
import { useI18n } from 'app/hooks/useI18n'
import { useIsLoading } from 'app/hooks/useIsLoading'
import { Events, usePlausible } from 'app/hooks/usePlausible'
import { LogLevel } from 'app/types/logging'
import { Deposition } from 'app/types/PageData/browseAllDepositionsPageData'
import { ObjectShapeType } from 'app/types/shapeTypes'
import { cnsNoMerge } from 'app/utils/cns'
import { sendLogs } from 'app/utils/logging'
import { getErrorMessage } from 'app/utils/string'

const LOADING_DEPOSITIONS = range(0, MAX_PER_PAGE).map(
(value) =>
({
authors: [],
id: value,
title: `loading-deposition-${value}`,
deposition_date: '',
annotations_aggregate: {},
dataset_aggregate: {},
annotations: [],
shape_types: [],
depositionDate: '',
annotationCount: 0,
authors: [],
annotatedObjects: [],
objectShapeTypes: [],
acrossDatasets: 0,
}) as Deposition,
)

Expand All @@ -62,7 +64,7 @@ export function DepositionTable() {

try {
return [
columnHelper.accessor('key_photo_thumbnail_url', {
columnHelper.accessor('keyPhotoThumbnailUrl', {
header: () => <p />,

cell({ row: { original: deposition } }) {
Expand All @@ -77,7 +79,7 @@ export function DepositionTable() {
<KeyPhoto
className="max-w-[134px]"
title={deposition.title}
src={deposition.key_photo_thumbnail_url ?? undefined}
src={deposition.keyPhotoThumbnailUrl ?? undefined}
loading={isLoadingDebounced}
textOnGroupHover="openDeposition"
/>
Expand Down Expand Up @@ -149,7 +151,7 @@ export function DepositionTable() {
},
}),

columnHelper.accessor('deposition_date', {
columnHelper.accessor('depositionDate', {
header: () => (
<CellHeader
showSort
Expand Down Expand Up @@ -177,63 +179,50 @@ export function DepositionTable() {
),

cell({ row: { original: deposition } }) {
return <TableCell>{deposition.deposition_date}</TableCell>
return <TableCell>{deposition.depositionDate}</TableCell>
},
}),

columnHelper.accessor('annotations_aggregate', {
columnHelper.accessor('annotationCount', {
header: () => (
<CellHeader width={DepositionTableWidths.annotations}>
{t('annotations')}
</CellHeader>
),

cell({ row: { original: deposition } }) {
const annotationsCount =
deposition?.annotations_aggregate?.aggregate?.count ?? 0

// TODO: (kne42) uncomment this when we can fetch dataset counts properly
// const datasetsCount =
// deposition?.dataset_aggregate?.aggregate?.count ?? 0

return (
<TableCell loadingSkeleton={false}>
<p className="text-sds-body-s leading-sds-body-s mb-sds-xxxs">
{isLoadingDebounced ? (
<Skeleton variant="text" className="max-w-[40%] mt-2" />
) : (
annotationsCount.toLocaleString()
deposition.annotationCount.toLocaleString()
)}
</p>
{/* TODO: (kne42) uncomment this when we can fetch dataset counts properly

<p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
{isLoadingDebounced ? (
<Skeleton variant="text" className="max-w-[75%] mt-2" />
) : (
t('acrossDatasets', { count: datasetsCount })
t('acrossDatasets', {
count: deposition.acrossDatasets,
})
)}
</p> */}
</p>
</TableCell>
)
},
}),

columnHelper.accessor('annotations', {
columnHelper.accessor('annotatedObjects', {
header: () => (
<CellHeader width={DepositionTableWidths.annotatedObjects}>
{t('annotatedObjects')}
</CellHeader>
),

cell({ row: { original: deposition } }) {
const annotatedObjects = Array.from(
new Set(
deposition?.annotations?.flatMap(
(annotation) => annotation.object_name,
),
),
)

return (
<TableCell
width={DepositionTableWidths.annotatedObjects}
Expand All @@ -245,32 +234,26 @@ export function DepositionTable() {
</div>
)}
>
{annotatedObjects.length === 0 ? (
{deposition.annotatedObjects.length === 0 ? (
'--'
) : (
<AnnotatedObjectsList annotatedObjects={annotatedObjects} />
<AnnotatedObjectsList
annotatedObjects={deposition.annotatedObjects}
/>
)}
</TableCell>
)
},
}),

columnHelper.accessor('shape_types', {
columnHelper.accessor('objectShapeTypes', {
header: () => (
<CellHeader width={DepositionTableWidths.objectShapeTypes}>
{t('objectShapeType')}
</CellHeader>
),

cell({ row: { original: deposition } }) {
const shapeTypes = Array.from(
new Set(
deposition.shape_types?.flatMap((annotation) =>
annotation.files.flatMap((file) => file.shape_type),
),
),
)

return (
<TableCell
renderLoadingSkeleton={() => (
Expand All @@ -281,12 +264,16 @@ export function DepositionTable() {
</div>
)}
>
{shapeTypes.length === 0 ? (
{deposition.objectShapeTypes.length === 0 ? (
'--'
) : (
<ul className="list-none flex flex-col gap-sds-xs">
{Object.entries(shapeTypeToI18nKey)
.filter(([key]) => shapeTypes.includes(key))
.filter(([key]) =>
deposition.objectShapeTypes.includes(
key as ObjectShapeType,
),
)
.map(([k, v]) => (
<li
className="whitespace-nowrap overflow-x-hidden overflow-ellipsis"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const GET_DEPOSITIONS_DATA_QUERY = gql(`
depositions(
limit: $limit,
offset: $offset,
order_by: { deposition_date: $order_by_deposition },
order_by: { deposition_date: $order_by_deposition, id: desc },
where: $filter
) {
id
Expand Down
Loading

0 comments on commit dbec885

Please sign in to comment.