use REST API for repository related content (#438)

* use REST API for repository related content

* replace 'depositors' wording with 'creators and contributors'

src/app/repositories/[...repoid]/page.tsx

@@ -70,11 +70,11 @@ export default async function Page({ params }: Props) {
 
   if (!data) notFound()
 
-  return (
+  return <>
     <Suspense fallback={<Loading />}>
       <Content variables={{ id: repoid }} />
     </Suspense>
-  )
+  </>
 }
 
 

src/components/RepositoryDetail/RepositoryDashboard.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React from 'react'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Loading from 'src/components/Loading/Loading'
+import Error from 'src/components/Error/Error'
+import { useRepositoryRelatedContent } from 'src/data/queries/repositoryRelatedContentQuery'
+import VerticalBarChart from 'src/components/VerticalBarChart/VerticalBarChart'
+import ProductionChart from 'src/components/ProductionChart/ProductionChart'
+import HorizontalStackedBarChart from 'src/components/HorizontalStackedBarChart/HorizontalStackedBarChart';
+import { resourceTypeDomain, resourceTypeRange, licenseRange, otherDomain, otherRange } from 'src/data/color_palettes';
+import { compactNumbers, getTopFive, toBarRecord } from 'src/utils/helpers'
+import styles from './RepositoryDetail.module.scss'
+
+
+function facetToData(facetList) {
+  return facetList.map((x) => ({
+    title: x.title,
+    count: x.count
+  }))
+}
+
+
+interface Props {
+  repoId: string
+}
+
+export function RepositoryDashboard({ repoId }: Props) {
+  const { data: repo, loading, error } = useRepositoryRelatedContent(repoId)
+
+  if (loading) return <Row><Loading /></Row>
+
+  if (error) return (
+    <Row>
+      <Col md={{ span: 9, offset: 3 }}>
+        <Error title="An error occured." message={error.message} />
+      </Col>
+    </Row>
+  )
+
+
+  if (!repo || repo.works.totalCount < 1) {
+    return <></>
+  }
+
+  const works = getTopFive(repo.works.resourceTypes.map(toBarRecord))
+  const licenses = getTopFive(repo.works.licenses.map(toBarRecord))
+
+  return (
+    <>
+      <h3>{compactNumbers(repo.works.totalCount)} Works</h3>
+
+      <div className={styles.grid}>
+        <ProductionChart
+          title="Publication Year"
+          data={facetToData(repo.works.published)}
+        />
+        <HorizontalStackedBarChart
+          chartTitle={'Work Types'}
+          topCategory={{ title: works.topCategory, percent: works.topPercent }}
+          data={facetToData(repo.works.resourceTypes)}
+          domain={resourceTypeDomain}
+          range={resourceTypeRange}
+          tooltipText={'The field resourceType from DOI metadata was used to generate this chart.'} />
+        <HorizontalStackedBarChart
+          chartTitle='Licenses'
+          topCategory={{ title: licenses.topCategory, percent: licenses.topPercent }}
+          data={licenses.data}
+          domain={[...otherDomain, ...licenses.data.map(l => l.title)]}
+          range={[...otherRange, ...licenseRange]}
+          tooltipText={'The field "rights" from DOI metadata was used to generate this chart, showing the % of licenses used across works.'} />
+        <VerticalBarChart title="Top Creators and Contributors" data={repo.works.creatorsAndContributors || []} />
+        <VerticalBarChart title="Fields of Science" data={repo.works.fieldsOfScience} />
+        <VerticalBarChart title="Work Languages" data={repo.works.languages} />
+      </div>
+    </>
+  )
+}

src/components/RepositoryDetail/RepositoryDetail.tsx

@@ -2,32 +2,20 @@ import React from 'react'
 import Link from 'next/link'
 import Button from 'react-bootstrap/Button'
 import Badge from 'react-bootstrap/Badge'
-import VerticalBarChart from 'src/components/VerticalBarChart/VerticalBarChart'
-import ProductionChart from 'src/components/ProductionChart/ProductionChart'
 import { faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
 
-import { compactNumbers, getTopFive, toBarRecord } from 'src/utils/helpers'
 import styles from './RepositoryDetail.module.scss'
 import { MetricsDisplay } from 'src/components/MetricsDisplay/MetricsDisplay';
 import ShareLinks from 'src/components/ShareLinks/ShareLinks';
-import { resourceTypeDomain, resourceTypeRange, licenseRange, otherDomain, otherRange } from 'src/data/color_palettes';
-import HorizontalStackedBarChart from 'src/components/HorizontalStackedBarChart/HorizontalStackedBarChart';
 import { Repository } from 'src/data/types';
+import { RepositoryDashboard } from 'src/components/RepositoryDetail/RepositoryDashboard'
 
 type Props = {
   repo: Repository
 }
 
-function facetToData(facetList) {
-  return facetList.map((x) => ({
-    title: x.title,
-    count: x.count
-  }))
-}
-
-
 export function RepositorySidebar({ repo }: Props) {
   const gotoButtons = () => {
     return (
@@ -97,44 +85,6 @@ export function RepositorySidebar({ repo }: Props) {
 export function RepositoryDetail({ repo }: Props) {
 
 
-  const dashboard = () => {
-    if (repo.works.totalCount < 1) {
-      return (<></>)
-    }
-
-    const works = getTopFive(repo.works.resourceTypes.map(toBarRecord))
-    const licenses = getTopFive(repo.works.licenses.map(toBarRecord))
-
-    return (
-      <>
-        <h3>{compactNumbers(repo.works.totalCount)} Works</h3>
-
-        <div className={styles.grid}>
-          <ProductionChart
-            title="Publication Year"
-            data={facetToData(repo.works.published)}
-          />
-          <HorizontalStackedBarChart
-            chartTitle={'Work Types'}
-            topCategory={{ title: works.topCategory, percent: works.topPercent }}
-            data={facetToData(repo.works.resourceTypes)}
-            domain={resourceTypeDomain}
-            range={resourceTypeRange}
-            tooltipText={'The field resourceType from DOI metadata was used to generate this chart.'} />
-          <HorizontalStackedBarChart
-            chartTitle='Licenses'
-            topCategory={{ title: licenses.topCategory, percent: licenses.topPercent }}
-            data={licenses.data}
-            domain={[...otherDomain, ...licenses.data.map(l => l.title)]}
-            range={[...otherRange, ...licenseRange]}
-            tooltipText={'The field "rights" from DOI metadata was used to generate this chart, showing the % of licenses used across works.'} />
-          <VerticalBarChart title="Top Depositors" data={repo.works.authors} />
-          <VerticalBarChart title="Fields of Science" data={repo.works.fieldsOfScience} />
-          <VerticalBarChart title="Work Languages" data={repo.works.languages} />
-        </div>
-      </>
-    )
-  }
 
   const tags = () => {
     if (repo.re3dataDoi == null) return "";
@@ -250,7 +200,7 @@ export function RepositoryDetail({ repo }: Props) {
         {tags()}
       </div>
       <div className={styles.dashboard}>
-        {dashboard()}
+        <RepositoryDashboard repoId={repo.clientId} />
       </div>
       <div className={styles.advise}>
         {advise()}

src/data/queries/repositoryRelatedContentQuery.ts

@@ -0,0 +1,6 @@
+import { useSearchDoiFacetsQuery } from './searchDoiFacetsQuery'
+
+export function useRepositoryRelatedContent(id: string) {
+  const vars = { clientId: id }
+  return useSearchDoiFacetsQuery(vars)
+}

src/data/queries/searchDoiFacetsQuery.ts

@@ -42,6 +42,7 @@ function convertToQueryData(json: any): QueryData {
   // Missing authors, repositories, and multilevel
   return {
     works: {
+      totalCount: meta.total,
       published: meta.published,
       resourceTypes: meta.resourceTypes.slice(0, 10),
       languages: meta.languages.slice(0, 10),
@@ -89,5 +90,5 @@ export function useSearchDoiFacetsQuery(variables: QueryVar) {
 
 
 export interface QueryData {
-  works: Omit<Works, 'nodes' | 'totalCount' | 'pageInfo'>
+  works: Omit<Works, 'nodes' | 'pageInfo'>
 }

src/data/queries/searchDoiQuery.ts

@@ -32,6 +32,7 @@ export function appendFacets(variables: QueryVar, searchParams: URLSearchParams)
   if (variables.published) searchParams.append('published', variables.published)
   if (variables.resourceTypeId) searchParams.append('resource-type-id', variables.resourceTypeId)
   if (variables.fieldOfScience) searchParams.append('field-of-science', variables.fieldOfScience)
+  if (variables.clientId) searchParams.append('client-id', variables.clientId)
   if (variables.clientType) searchParams.append('client-type', variables.clientType)
 }
 
@@ -148,6 +149,7 @@ export interface QueryVar {
   query?: string
   filterQuery?: string
   rorId?: string
+  clientId?: string
   cursor?: string
   published?: string
   resourceTypeId?: string