#13: marking rules to table description page

eslint.config.ts

@@ -53,6 +53,5 @@ export default tseslint.config(eslintConfigPrettier, {
     "no-var": "error",
     "prefer-const": "error",
     "require-await": "error",
-    // 'sort-imports': 'error' // TODO: add code formatter
   },
 });

src/assets/texts.json

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "catalog.designation": "Designation",
+    "catalog.icrs": "Celestial coordinates",
+    "catalog.redshift": "Redshift"
+  }
+}

src/components/ui/footer.tsx

@@ -10,7 +10,7 @@ const footerContent = (
       Information: <Link href="https://hyperleda.github.io/" />
     </div>
     <div>
-      Old version: <Link href="http://leda.univ-lyon1.fr/" />
+      Original version: <Link href="http://leda.univ-lyon1.fr/" />
     </div>
   </div>
 );
@@ -37,7 +37,7 @@ export function Footer() {
       </Button>
 
       <footer
-        className={`fixed bottom-0 border-1 left-0 right-0 py-3 z-10 shadow-lg backdrop-blur-sm bg-opacity-99 mx-10 mb-3 rounded transition-all duration-300 ease-in-out ${
+        className={`fixed bottom-0 border-1 left-0 right-0 py-3 z-10 shadow-lg backdrop-blur-sm mx-10 mb-3 rounded transition-all duration-300 ease-in-out ${
           isCollapsed
             ? "opacity-0 translate-y-full pointer-events-none"
             : "opacity-100 translate-y-0"

src/components/ui/hint.tsx

@@ -19,7 +19,7 @@ export function Hint(props: HintProps): ReactElement {
           content={props.hintContent}
           arrow={false}
           placement="top"
-          className="bg-gray-600 px-2 border-1 max-w-xl"
+          className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1 max-w-xl"
         >
           <MdHelpOutline />
         </Tooltip>

src/pages/ObjectDetails.tsx

@@ -134,7 +134,7 @@ function renderObjectDetails(
   ];
 
   return (
-    <div className="space-y-6 p-4 rounded-lg">
+    <div className="space-y-6 rounded-lg">
       <div className="flex items-start space-x-6">
         {object.catalogs?.coordinates?.equatorial && (
           <AladinViewer
@@ -222,7 +222,7 @@ export function ObjectDetailsPage(): ReactElement {
   }, [pgcId, navigate]);
 
   return (
-    <div className="p-4">
+    <div className="p-8">
       <SearchBar
         onSearch={searchHandler(navigate)}
         logoSize="small"

src/pages/TableDetails.tsx

@@ -13,6 +13,7 @@ import {
 } from "../components/ui/common-table";
 import { CopyButton } from "../components/ui/copy-button";
 import { Link } from "../components/ui/link";
+import { getResource } from "../resources/resources";
 
 function renderBibliography(bib: Bibliography): ReactElement {
   let authors = "";
@@ -77,36 +78,87 @@ function renderColumnName(name: CellPrimitive): ReactElement {
   );
 }
 
-function renderTableDetails(
-  tableName: string,
-  table: GetTableResponse,
-): ReactElement {
-  const infoColumns = [{ name: "Parameter" }, { name: "Value" }];
+interface TableMetaProps {
+  tableName: string;
+  table: GetTableResponse;
+}
+
+function TableMeta(props: TableMetaProps): ReactElement {
+  const columns = [{ name: "Parameter" }, { name: "Value" }];
 
-  const infoValues: Record<string, CellPrimitive>[] = [
+  const values: Record<string, CellPrimitive>[] = [
     {
       Parameter: "Table ID",
-      Value: table.id,
+      Value: props.table.id,
     },
     {
       Parameter: "Source paper",
-      Value: renderBibliography(table.bibliography),
+      Value: renderBibliography(props.table.bibliography),
     },
     {
       Parameter: "Number of records",
-      Value: table.rows_num,
+      Value: props.table.rows_num,
     },
     {
       Parameter: "Type of data",
-      Value: String(table.meta.datatype),
+      Value: String(props.table.meta.datatype),
     },
     {
       Parameter: "Modification time",
-      Value: renderTime(table.meta.modification_dt as string),
+      Value: renderTime(props.table.meta.modification_dt as string),
     },
   ];
 
-  const columnInfoColumns: Column[] = [
+  return (
+    <CommonTable columns={columns} data={values} className="pb-5">
+      <h2 className="text-2xl font-bold mb-2">{props.table.description}</h2>
+      <p className="text-gray-300 font-mono">{props.tableName}</p>
+    </CommonTable>
+  );
+}
+
+interface MarkingRulesProps {
+  table: GetTableResponse;
+}
+
+function renderCatalog(catalog: CellPrimitive): ReactElement {
+  return <span>{getResource(`catalog.${String(catalog)}`).Title}</span>;
+}
+
+function MarkingRules(props: MarkingRulesProps): ReactElement {
+  const columns: Column[] = [
+    { name: "Catalog", renderCell: renderCatalog },
+    { name: "Parameter" },
+    { name: "Column name", renderCell: renderColumnName },
+  ];
+
+  const values: Record<string, CellPrimitive>[] = [];
+
+  props.table.marking_rules.forEach((rules) => {
+    for (const key in rules.columns) {
+      values.push({
+        Catalog: rules.catalog,
+        Parameter: key,
+        "Column name": rules.columns[key],
+      });
+    }
+  });
+
+  return (
+    <CommonTable columns={columns} data={values} className="pb-5">
+      <h2 className="text-2xl font-bold">
+        Mapping of columns to catalog values for marking of records.
+      </h2>
+    </CommonTable>
+  );
+}
+
+interface ColumnInfoProps {
+  table: GetTableResponse;
+}
+
+function ColumnInfo(props: ColumnInfoProps): ReactElement {
+  const columns: Column[] = [
     { name: "Name", renderCell: renderColumnName },
     { name: "Description" },
     { name: "Unit" },
@@ -126,9 +178,9 @@ function renderTableDetails(
     },
   ];
 
-  const columnInfoValues: Record<string, CellPrimitive>[] = [];
+  const values: Record<string, CellPrimitive>[] = [];
 
-  table.column_info.forEach((col) => {
+  props.table.column_info.forEach((col) => {
     const colValue: Record<string, CellPrimitive> = {
       Name: col.name,
     };
@@ -143,21 +195,13 @@ function renderTableDetails(
       colValue.UCD = col.ucd;
     }
 
-    columnInfoValues.push(colValue);
+    values.push(colValue);
   });
 
   return (
-    <div className="p-4">
-      <CommonTable columns={infoColumns} data={infoValues} className="pb-5">
-        <h2 className="text-2xl font-bold text-white mb-2">
-          {table.description}
-        </h2>
-        <p className="text-gray-300 font-mono">{tableName}</p>
-      </CommonTable>
-      <CommonTable columns={columnInfoColumns} data={columnInfoValues}>
-        <h2 className="text-2xl font-bold text-white">Column information</h2>
-      </CommonTable>
-    </div>
+    <CommonTable columns={columns} data={values}>
+      <h2 className="text-2xl font-bold">Column information</h2>
+    </CommonTable>
   );
 }
 
@@ -214,13 +258,17 @@ export function TableDetailsPage(): ReactElement {
   }, [tableName, navigate]);
 
   return (
-    <div className="p-4">
+    <div className="p-8">
       {loading ? (
         <div className="flex justify-center items-center h-64">
           <p className="text-gray-300 text-lg">Loading...</p>
         </div>
       ) : table ? (
-        renderTableDetails(tableName ?? "", table)
+        <div>
+          <TableMeta tableName={tableName ?? ""} table={table} />
+          <MarkingRules table={table} />
+          <ColumnInfo table={table} />
+        </div>
       ) : error ? (
         renderError(error)
       ) : (

src/resources/resources.tsx

@@ -0,0 +1,19 @@
+import texts from "../assets/texts.json";
+
+export interface Resource {
+  Title: string;
+}
+
+export function getResource(key: string): Resource {
+  const titleProp = key as keyof typeof texts.title;
+
+  if (titleProp in texts.title) {
+    return {
+      Title: String(texts.title[titleProp]),
+    };
+  }
+
+  return {
+    Title: key,
+  };
+}