#27: fix links and render coordinates

src/components/ui/astronomy.tsx

@@ -0,0 +1,101 @@
+import React, { ReactElement, ReactNode } from "react";
+
+interface QuantityProps {
+  value: string | number;
+  unit?: string;
+  className?: string;
+  spaced?: boolean;
+}
+
+export function Quantity({
+  value,
+  unit,
+  className,
+  spaced = true,
+}: QuantityProps): React.ReactElement {
+  return (
+    <span className={className}>
+      {value}
+      {unit ? (
+        <span>
+          {spaced ? " " : ""}
+          {unit}
+        </span>
+      ) : (
+        ""
+      )}
+    </span>
+  );
+}
+
+interface QuantityWithErrorProps {
+  children: ReactNode;
+  error: number;
+  unit?: string;
+  decimalPlaces?: number;
+}
+
+export function QuantityWithError({
+  children,
+  error,
+  unit,
+  decimalPlaces = 2,
+}: QuantityWithErrorProps): ReactElement {
+  return (
+    <div className="flex items-center gap-2">
+      {children} ± <Quantity value={error.toFixed(decimalPlaces)} unit={unit} />
+    </div>
+  );
+}
+
+interface AstronomicalCoordinateProps {
+  value: number;
+  className?: string;
+}
+
+export function RightAscension({
+  value,
+  className,
+}: AstronomicalCoordinateProps): React.ReactElement {
+  if (isNaN(value)) {
+    return <span className={className}>N/A</span>;
+  }
+
+  const totalSeconds = value * 240;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = +(totalSeconds % 60).toFixed(2);
+
+  return (
+    <span className={className}>
+      <Quantity value={hours} unit="h" spaced={false} />{" "}
+      <Quantity value={minutes} unit="m" spaced={false} />{" "}
+      <Quantity value={seconds} unit="s" spaced={false} />
+    </span>
+  );
+}
+
+export function Declination({
+  value,
+  className,
+}: AstronomicalCoordinateProps): React.ReactElement {
+  if (isNaN(value)) {
+    return <span className={className}>N/A</span>;
+  }
+
+  const sign = value < 0 ? "-" : "+";
+  const absDec = Math.abs(value);
+  const degrees = Math.floor(absDec);
+  const minutesFloat = (absDec - degrees) * 60;
+  const minutes = Math.floor(minutesFloat);
+  const seconds = +(minutesFloat - minutes) * 60;
+
+  return (
+    <span className={className}>
+      {sign}
+      <Quantity value={degrees} unit="°" spaced={false} />{" "}
+      <Quantity value={minutes} unit="'" spaced={false} />{" "}
+      <Quantity value={seconds.toFixed(2)} unit={'"'} spaced={false} />
+    </span>
+  );
+}

src/components/ui/catalog-data.tsx

@@ -1,37 +1,25 @@
 import { ReactElement } from "react";
-import { CommonTable } from "./common-table";
+import { CommonTable, Column } from "./common-table";
 import { Catalogs, Schema } from "../../clients/backend/types.gen";
+import {
+  Declination,
+  RightAscension,
+  Quantity,
+  QuantityWithError,
+} from "./astronomy";
 
 interface CatalogDataProps {
   catalogs: Catalogs;
   schema: Schema;
 }
 
-function formatValueWithError(
-  value: number | undefined,
-  error: number | undefined,
-  unit?: string,
-  decimalPlaces: number = 0,
-): string {
-  if (value === undefined) return "NULL";
-  const formattedValue = value.toFixed(decimalPlaces);
-  const formattedError =
-    error?.toFixed(decimalPlaces) || "0".padEnd(decimalPlaces + 1, "0");
-
-  if (!unit) {
-    return `${formattedValue} ± ${formattedError}`;
-  }
-
-  return `${formattedValue} ${unit} ± ${formattedError} ${unit}`;
-}
-
 export function CatalogData({
   catalogs,
   schema,
 }: CatalogDataProps): ReactElement {
   if (!catalogs) return <div />;
 
-  const columns = [{ name: "Parameter" }, { name: "Value" }];
+  const columns: Column[] = [{ name: "Parameter" }, { name: "Value" }];
 
   const data = [];
 
@@ -43,41 +31,61 @@ export function CatalogData({
   }
 
   if (catalogs?.coordinates) {
-    data.push(
-      {
+    if (catalogs.coordinates.equatorial?.ra !== undefined) {
+      data.push({
         Parameter: "Equatorial RA",
-        Value: formatValueWithError(
-          catalogs.coordinates.equatorial?.ra,
-          catalogs.coordinates.equatorial?.e_ra,
-          schema.units.coordinates?.equatorial?.ra,
-          2,
+        Value: (
+          <QuantityWithError
+            error={catalogs.coordinates.equatorial?.e_ra}
+            unit={schema.units.coordinates?.equatorial?.ra || "deg"}
+          >
+            <RightAscension value={catalogs.coordinates.equatorial.ra} />
+          </QuantityWithError>
         ),
-      },
-      {
+      });
+    }
+
+    if (catalogs.coordinates.equatorial?.dec !== undefined) {
+      data.push({
         Parameter: "Equatorial Dec",
-        Value: formatValueWithError(
-          catalogs.coordinates.equatorial?.dec,
-          catalogs.coordinates.equatorial?.e_dec,
-          schema.units.coordinates?.equatorial?.dec,
-          2,
+        Value: (
+          <QuantityWithError
+            error={catalogs.coordinates.equatorial?.e_dec}
+            unit={schema.units.coordinates?.equatorial?.dec || "deg"}
+          >
+            <Declination value={catalogs.coordinates.equatorial.dec} />
+          </QuantityWithError>
         ),
-      },
+      });
+    }
+
+    data.push(
       {
         Parameter: "Galactic l",
-        Value: formatValueWithError(
-          catalogs.coordinates.galactic?.lon,
-          catalogs.coordinates.galactic?.e_lon,
-          schema.units.coordinates?.galactic?.lon,
-          2,
+        Value: (
+          <QuantityWithError
+            error={catalogs.coordinates.galactic?.e_lon}
+            unit={schema.units.coordinates?.galactic?.lon}
+          >
+            <Quantity
+              value={catalogs.coordinates.galactic?.lon?.toFixed(2)}
+              unit={schema.units.coordinates?.galactic?.lon}
+            />
+          </QuantityWithError>
         ),
       },
       {
         Parameter: "Galactic b",
-        Value: formatValueWithError(
-          catalogs.coordinates.galactic?.lat,
-          catalogs.coordinates.galactic?.e_lat,
-          schema.units.coordinates?.galactic?.lat,
-          2,
+        Value: (
+          <QuantityWithError
+            error={catalogs.coordinates.galactic?.e_lat}
+            unit={schema.units.coordinates?.galactic?.lat}
+          >
+            <Quantity
+              value={catalogs.coordinates.galactic?.lat?.toFixed(2)}
+              unit={schema.units.coordinates?.galactic?.lat}
+            />
+          </QuantityWithError>
         ),
       },
     );
@@ -86,11 +94,10 @@ export function CatalogData({
   if (catalogs?.redshift) {
     data.push({
       Parameter: "Redshift z",
-      Value: formatValueWithError(
-        catalogs.redshift.z,
-        catalogs.redshift.e_z,
-        undefined,
-        5,
+      Value: (
+        <QuantityWithError error={catalogs.redshift.e_z} decimalPlaces={5}>
+          {catalogs.redshift.z?.toFixed(5) || "N/A"}
+        </QuantityWithError>
       ),
     });
   }
@@ -99,34 +106,58 @@ export function CatalogData({
     data.push(
       {
         Parameter: "Heliocentric Velocity",
-        Value: formatValueWithError(
-          catalogs.velocity.heliocentric?.v,
-          catalogs.velocity.heliocentric?.e_v,
-          schema.units.velocity?.heliocentric?.v,
+        Value: (
+          <QuantityWithError
+            error={catalogs.velocity.heliocentric?.e_v}
+            unit={schema.units.velocity?.heliocentric?.v}
+          >
+            <Quantity
+              value={catalogs.velocity.heliocentric?.v?.toFixed(0)}
+              unit={schema.units.velocity.heliocentric?.v}
+            />
+          </QuantityWithError>
         ),
       },
       {
         Parameter: "Local Group Velocity",
-        Value: formatValueWithError(
-          catalogs.velocity.local_group?.v,
-          catalogs.velocity.local_group?.e_v,
-          schema.units.velocity?.local_group?.v,
+        Value: (
+          <QuantityWithError
+            error={catalogs.velocity.local_group?.e_v}
+            unit={schema.units.velocity?.local_group?.v}
+          >
+            <Quantity
+              value={catalogs.velocity.local_group?.v?.toFixed(0)}
+              unit={schema.units.velocity.local_group?.v}
+            />
+          </QuantityWithError>
         ),
       },
       {
         Parameter: "CMB (old) Velocity",
-        Value: formatValueWithError(
-          catalogs.velocity.cmb_old?.v,
-          catalogs.velocity.cmb_old?.e_v,
-          schema.units.velocity?.cmb_old?.v,
+        Value: (
+          <QuantityWithError
+            error={catalogs.velocity.cmb_old?.e_v}
+            unit={schema.units.velocity?.cmb_old?.v}
+          >
+            <Quantity
+              value={catalogs.velocity.cmb_old?.v?.toFixed(0)}
+              unit={schema.units.velocity.cmb_old?.v}
+            />
+          </QuantityWithError>
         ),
       },
       {
         Parameter: "CMB Velocity",
-        Value: formatValueWithError(
-          catalogs.velocity.cmb?.v,
-          catalogs.velocity.cmb?.e_v,
-          schema.units.velocity?.cmb?.v,
+        Value: (
+          <QuantityWithError
+            error={catalogs.velocity.cmb?.e_v}
+            unit={schema.units.velocity?.cmb?.v}
+          >
+            <Quantity
+              value={catalogs.velocity.cmb?.v?.toFixed(0)}
+              unit={schema.units.velocity.cmb?.v}
+            />
+          </QuantityWithError>
         ),
       },
     );

src/components/ui/common-table.tsx

@@ -1,12 +1,12 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import classNames from "classnames";
 import { Hint } from "./hint";
 
 export type CellPrimitive = ReactElement | string | number;
 
 export interface Column {
   name: string;
-  renderCell?: (value: CellPrimitive) => ReactElement;
+  renderCell?: (value: CellPrimitive) => ReactNode;
   hint?: ReactElement;
 }
 
@@ -33,7 +33,7 @@ export function CommonTable({
   children,
   onRowClick,
 }: CommonTableProps): ReactElement {
-  function renderCell(value: CellPrimitive, column: Column): ReactElement {
+  function renderCell(value: CellPrimitive, column: Column): ReactNode {
     if (column.renderCell) {
       return column.renderCell(value);
     }

src/components/ui/pagination.tsx

@@ -0,0 +1,33 @@
+import { ReactElement } from "react";
+import { Button } from "./button";
+
+type PaginationProps = {
+  page: number;
+  pageSize: number;
+  records: unknown[];
+  handlePageChange: (newPage: number) => void;
+};
+
+export function Pagination({
+  page,
+  pageSize,
+  records,
+  handlePageChange,
+}: PaginationProps): ReactElement {
+  return (
+    <div className="flex justify-between items-center mt-4">
+      <Button onClick={() => handlePageChange(page - 1)} disabled={page === 0}>
+        Previous
+      </Button>
+      <span>
+        Page {page + 1} (showing {records.length} records)
+      </span>
+      <Button
+        onClick={() => handlePageChange(page + 1)}
+        disabled={(records.length || 0) < pageSize}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}