Citation prototyping experiments

src/app/citations/[...doi]/layout.tsx

@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation";
+import ActionButtons from "@/components/ActionButtons";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import { fetchEntity } from "@/data/fetch";
+
+export default async function Layout({
+  children,
+}: LayoutProps<"/citations/[...doi]">) {
+
+  return (
+    <>
+      {children}
+    </>
+  );
+}

src/app/citations/[...doi]/page.tsx

@@ -0,0 +1,92 @@
+import { redirect } from "next/navigation";
+import * as Cards from "@/components/cards/Cards";
+import OverviewCard from "@/components/cards/OverviewCard";
+import { SectionHeader } from "@/components/datacite/Headings";
+import {
+  fetchDoiRecord,
+  fetchEvents,
+  fetchDoisRecords,
+  fetchDois,
+} from "@/data/fetch";
+import DoiRegistrationsChart from "@/components/DoiRegistrationsChart";
+import ResourceTypesChart from "@/components/ResourceTypesChart";
+import EventFeed from "@/components/EventFeed";
+import { Filter } from "lucide-react";
+import { DoiRecordList } from "@/components/DoiRecordList";
+import { H2 } from "@/components/datacite/Headings";
+
+interface PageProps {
+  params: { doi: string };
+}
+
+export default async function Page({ params }: PageProps) {
+  const { doi } = await params;
+  const doi_id = Array.isArray(doi) ? doi.join("/") : doi;
+
+  // Fetch the DOI record and events
+  const [record, eventsResult, doisRecords] = await Promise.all([
+    fetchDoiRecord(doi_id),
+    fetchEvents(doi_id),
+    fetchDoisRecords("reference_ids:" + doi_id),
+  ]);
+  const citationsOverTime = record?.data?.attributes?.citationsOverTime || [];
+  let chartData: { year: string; count: number }[] = [];
+  if (citationsOverTime.length > 0) {
+    const yearNums = citationsOverTime.map((item: { year: string }) =>
+      parseInt(item.year, 10),
+    );
+    const minYear = Math.min(...yearNums);
+    const maxYear = new Date().getFullYear();
+    const yearToCount: Record<string, number> = {};
+    citationsOverTime.forEach((item: { year: string; total: number }) => {
+      yearToCount[item.year] = item.total;
+    });
+    for (let y = minYear; y <= maxYear; y++) {
+      chartData.push({
+        year: y.toString(),
+        count: yearToCount[y.toString()] ?? 0,
+      });
+    }
+  }
+  const events = eventsResult?.data || [];
+
+  return (
+    <>
+      <div className="mt-8 mb-0">
+        <H2 >
+          {record.data.attributes.titles[0].title}
+        </H2>
+        <div className="text-gray-500 font-semibold">
+          {record.data.attributes.doi}
+        </div>
+      </div>
+      <main className="w-full mx-auto flex flex-row items-start gap-8">
+        <div className="w-1/2">
+          <div className="bg-card text-card-foreground border p-8 shadow-sm">
+            <h3 className="text-xl font-bold mb-4">Citations Over Time</h3>
+            {record.data.attributes.citationCount > 0 && (
+              <div className="max-w-300">
+                <DoiRegistrationsChart data={chartData} />
+              </div>
+            ) || (
+              <p>No citation data available.</p>
+            )}
+          </div>
+          <div className="bg-card text-card-foreground border p-8 shadow-sm  mt-8">
+            <h3 className="text-xl font-bold">Event Feed</h3>
+            <EventFeed events={events} doi={doi_id} />
+          </div>
+        </div>
+        <div className="w-1/2">
+          <div className="bg-card text-card-foreground border p-8 shadow-sm">
+            <h3 className="text-xl font-bold mb-4">
+              Available Citation Records
+            </h3>
+            {doisRecords.meta.resourceTypes && <ResourceTypesChart data={doisRecords.meta.resourceTypes} />}
+            <DoiRecordList records={doisRecords.data} />
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

src/app/citationsByEntity/[id]/Header.tsx

@@ -0,0 +1,13 @@
+import { H2 } from "@/components/datacite/Headings";
+import type { Entity } from "@/types";
+
+export default function Header(props: { entity: Entity }) {
+  return (
+    <div className="gap-0 mt-8">
+      <H2 className={`text-4xl w-full`}>{props.entity.name}</H2>
+        <div className="text-gray-500 font-semibold">
+          {props.entity.id}
+        </div>
+    </div>
+  );
+}

src/app/citationsByEntity/[id]/layout.tsx

@@ -0,0 +1,23 @@
+import { notFound } from "next/navigation";
+import ActionButtons from "@/components/ActionButtons";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import { fetchEntity } from "@/data/fetch";
+import Header from "./Header";
+
+export default async function Layout({
+  params,
+  children,
+}: LayoutProps<"/[id]">) {
+  const { id } = await params;
+
+  // Check if entity exists
+  const entity = await fetchEntity(id);
+  if (!entity) notFound();
+
+  return (
+    <>
+      <Header entity={entity} />
+      {children}
+    </>
+  );
+}

src/app/citationsByEntity/[id]/page.tsx

@@ -0,0 +1,82 @@
+import { redirect } from "next/navigation";
+import * as Cards from "@/components/cards/Cards";
+import OverviewCard from "@/components/cards/OverviewCard";
+import { SectionHeader } from "@/components/datacite/Headings";
+import { fetchDoisRecords, fetchEntity } from "@/data/fetch";
+import { fetchEntityCitations } from "@/data/fetch";
+import DoiRegistrationsChart from "@/components/DoiRegistrationsChart";
+import { DoiRecordList } from "@/components/DoiRecordList";
+
+export default async function Page({
+  params,
+  searchParams,
+}: PageProps<"/[id]">) {
+  const { id } = await params;
+
+    const [doisRecords] = await Promise.all([
+    fetchEntityCitations("provider.id:" + id + " OR client_id:" + id),
+    ]);
+
+const citationsOverTime = doisRecords?.meta?.citations || [];
+let chartData: { year: string; count: number }[] = [];
+if (citationsOverTime.length > 0) {
+  // Map citations to { year, count }
+  const mapped = citationsOverTime.map((item: { id: string; count: number }) => ({
+    year: item.id,
+    count: item.count,
+  }));
+  const yearNums = mapped.map((item: { year: string; count: number }) => parseInt(item.year, 10));
+  const minYear = Math.min(...yearNums);
+  const maxYear = new Date().getFullYear();
+  const yearToCount: Record<string, number> = {};
+  mapped.forEach((item: { year: string; count: number }) => {
+    yearToCount[item.year] = item.count;
+  });
+  for (let y = minYear; y <= maxYear; y++) {
+    chartData.push({
+      year: y.toString(),
+      count: yearToCount[y.toString()] ?? 0,
+    });
+  }
+}
+
+  // Redirect to lowercased id if it contains uppercase letters
+  if (id !== id.toLowerCase()) {
+    const urlSearchParams = new URLSearchParams();
+    Object.entries(await searchParams).forEach(([key, value]) => {
+      if (!value) return;
+
+      if (Array.isArray(value))
+        for (const v of value) urlSearchParams.append(key, v);
+      else urlSearchParams.append(key, value);
+    });
+
+    redirect(`/${id.toLowerCase()}?${urlSearchParams.toString()}`);
+  }
+
+  const entity = await fetchEntity(id);
+  if (!entity) return null;
+
+  return (
+    <main className="">
+      <main className="w-full mx-auto flex flex-row items-start gap-8">
+        <div className="w-1/2">
+          <div className="bg-card text-card-foreground border p-8 shadow-sm">
+            <h3 className="text-xl font-bold mb-4">Citations By Record Publication Year</h3>
+            <div className="max-w-300">
+              <DoiRegistrationsChart data={chartData} />
+            </div>
+          </div>
+        </div>
+        <div className="w-1/2">
+          <div className="bg-card text-card-foreground border p-8 shadow-sm">
+            <h3 className="text-xl font-bold mb-4">Most Cited Records</h3>
+            <div className="max-w-300">
+              <DoiRecordList records={doisRecords.data} />
+             </div>
+          </div>
+        </div>
+      </main>
+    </main>
+  );
+}

src/components/DoiRecordList.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import Link from "next/link";
+
+export type DoiRecord = {
+  id: string;
+  attributes: {
+    titles: { title: string }[];
+    doi: string;
+    descriptions?: { description: string }[];
+    types: { resourceTypeGeneral?: string };
+    citationCount?: number;
+    viewCount?: number;
+    downloadCount?: number;
+    publicationYear?: string;
+    publisher?: string;
+    agency?: string;
+  };
+};
+
+type DoiRecordListProps = {
+  records: DoiRecord[];
+};
+
+export function DoiRecordList({ records }: DoiRecordListProps) {
+  if (!records || records.length === 0) {
+    return <p>No citations found.</p>;
+  }
+  return (
+    <div className="flex flex-col py-4">
+      {records.map((record, idx) => (
+        <div key={record.id} className="flex flex-col">
+          <DoiRecordItem record={record} />
+          {idx < records.length - 1 && (
+            <div className="w-full flex justify-center">
+              <div className="h-px w-5/6 bg-gray-300 my-2" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+type DoiRecordItemProps = {
+  record: DoiRecord;
+};
+
+export function DoiRecordItem({ record }: DoiRecordItemProps) {
+  return (
+        <Link
+      href={`/citations/${record.attributes.doi}`}
+      className="cursor-pointer"
+      scroll={false}
+      shallow
+    >
+    <div className="py-2">
+      <div className="font-bold text-[#243B54]">
+        {record.attributes.titles[0].title}
+      </div>
+      <div className="text-gray-500 font-semibold text-sm">
+        https://doi.org/{record.attributes.doi}
+      </div>
+               <div className="text-gray-500 text-sm mt-2">
+            {record.attributes.publicationYear} · {record.attributes.publisher} · via {record.attributes.agency && record.attributes.agency.charAt(0).toUpperCase() + record.attributes.agency.slice(1)}
+            </div>
+      <div className="text-gray-500 line-clamp-3 text-sm mt-2">
+        {record.attributes.descriptions?.[0]?.description}
+      </div>
+
+      <div className="text-gray-500 text-sm mt-2">
+        {record.attributes.types.resourceTypeGeneral ? (
+          <span className="font-semibold mr-2 bg-[#e6f0fa] text-[#003366] rounded-full px-3 py-1 text-xs inline-block">
+            {record.attributes.types.resourceTypeGeneral}
+          </span>
+        ) : null}
+        <span className="align-right font-semibold mt-2 bg-gray-100 text-[#003366] rounded-sm px-3 py-1 text-xs inline-block">
+          Citations: <span className="font-bold mr-2">{record.attributes.citationCount} </span>
+          Views: <span className="font-bold mr-2">{record.attributes.viewCount} </span>
+          Downloads: <span className="font-bold mr-2">{record.attributes.downloadCount} </span>
+        </span>
+      </div>
+    </div>
+    </Link>
+  );
+}