#178 Bug fixes, performance improvements, cleaned up comments.

pacificclimate · Feb 16, 2024 · 6abbba2 · 6abbba2
1 parent fa03f5d
commit 6abbba2
Show file tree

Hide file tree

Showing 18 changed files with 267 additions and 216 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -34,7 +34,7 @@
   ],
   "customizations": {
     "vscode": {
-      "extensions": ["EditorConfig.EditorConfig"]
+      "extensions": ["EditorConfig.EditorConfig", "ms-vscode.makefile-tools"]
     }
   }
 }
diff --git a/Makefile b/Makefile
@@ -4,12 +4,12 @@ port = 30502
 public_url = http://localhost:${port}
 
 image:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker-compose -f docker/docker-compose.yaml build --build-arg REACT_APP_APP_VERSION='$(shell ./generate-commitish.sh)'
+	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml build --build-arg REACT_APP_APP_VERSION='$(shell ./generate-commitish.sh)'
 
 up:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker-compose -f docker/docker-compose.yaml up -d
+	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml up -d --force-recreate
 	@echo "Station Data Portal running at $(public_url)"
 	@docker logs -f station-data-portal-frontend
 
 down:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker-compose -f docker/docker-compose.yaml down
+	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml down
diff --git a/docker/bc.env b/docker/bc.env
@@ -1,2 +1,3 @@
-#PUBLIC_URL=...
-REACT_APP_BC_BASE_MAP_TILES_URL=https://services.pacificclimate.org/tiles/bc-albers-lite/{z}/{x}/{y}.png
+PUBLIC_PORT=30506
+PUBLIC_URL=https://localhost:8080/
+REACT_APP_BC_BASE_MAP_TILES_URL=https://services.pacificclimate.org/tiles/bc-albers-lite/{z}/{x}/{y}.png
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
@@ -3,6 +3,8 @@
 # `SDP_TAG`: Image tag
 # `SDP_PORT`: External port to map to
 # `SDP_PUBLIC_URL`: Public URL of app
+# Note: These values are set as part of the makefile, initialize the container
+# Using it.
 #
 # Their values are set appropriately in the Makefile for use on a workstation.
 # For use in a production setting, either set the shell
@@ -15,7 +17,7 @@ services:
     build:
       context: ..
       dockerfile: ./docker/Dockerfile
-    image: pcic/station-data-portal-frontend:${SDP_TAG}
+    #image: pcic/station-data-portal-frontend:${SDP_TAG}
     container_name: station-data-portal-frontend
     environment:
       - PUBLIC_URL=${SDP_PUBLIC_URL}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@tanstack/react-query": "^5.20.2",
+    "@tanstack/react-table": "^8.12.0",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",
     "chroma-js": "^2.4.2",

diff --git a/src/components/daterange/sub/DataTrack.js b/src/components/daterange/sub/DataTrack.js
@@ -24,8 +24,10 @@ const getTrackStyle = ({ source, target, count, index, color }) => {
   const basicStyle = {
     top: `${topPosition}px`,
     height: `${height}px`,
+    minHeight: "1px",
     left: `${source.percent}%`,
-    width: `calc(${target.percent - source.percent}% + 1px)`,
+    width: `calc(${target.percent - source.percent}%)`,
+    minWidth: "1px",
     backgroundColor: color,
   };
 

diff --git a/src/components/info/NetworksMetadata/NetworkSpot.js b/src/components/info/NetworksMetadata/NetworkSpot.js
@@ -0,0 +1,14 @@
+import chroma from "chroma-js";
+
+export const NetworkSpot = ({ color }) => (
+  <div
+    style={{
+      width: "1em",
+      height: "1em",
+      borderRadius: "0.5em",
+      backgroundColor: chroma(color).css(),
+    }}
+  >
+    &nbsp;
+  </div>
+);
diff --git a/src/components/info/NetworksMetadata/NetworksMetadata.js b/src/components/info/NetworksMetadata/NetworksMetadata.js
@@ -5,147 +5,136 @@
 import PropTypes from "prop-types";
 import React from "react";
 import { Table } from "react-bootstrap";
-import { useSortBy, useTable } from "react-table";
+import {
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  flexRender,
+} from "@tanstack/react-table";
 import logger from "../../../logger";
-import chroma from "chroma-js";
 import "./NetworksMetadata.css";
 import { useConfig } from "../../../state/query-hooks/use-config";
 import { useNetworks } from "../../../state/query-hooks/use-networks";
+import { NetworkSpot } from "./NetworkSpot";
 
 logger.configure({ active: true });
 
 function NetworksMetadata() {
   const { data: config } = useConfig();
-  const { data, isLoading, isError } = useNetworks();
+  const { data: networks, isLoading, isError } = useNetworks();
+
+  const [sorting, setSorting] = React.useState([]);
+
+  const networkRenderer = (info) => (
+    <NetworkSpot color={info.getValue() ?? config.defaultNetworkColor} />
+  );
 
   const columns = React.useMemo(
     () => [
       {
-        id: "Colour",
-        Header: "",
+        id: "network_spot",
+        header: "",
         minWidth: 20,
         maxWidth: 20,
-        disableSortBy: true,
-        accessor: (network) => (
-          <div
-            style={{
-              width: "1em",
-              height: "1em",
-              borderRadius: "0.5em",
-              backgroundColor: chroma(
-                network.color ?? config.defaultNetworkColor,
-              ).css(),
-            }}
-          >
-            &nbsp;
-          </div>
-        ),
+        accessorKey: "color",
+        cell: networkRenderer,
       },
       {
-        id: "Short Name",
-        Header: "Short Name",
+        header: "Short Name",
         minWidth: 80,
         maxWidth: 100,
-        accessor: "name",
+        accessorKey: "name",
       },
       {
-        id: "Long Name",
-        Header: "Long Name",
+        header: "Long Name",
         minWidth: 80,
         maxWidth: 400,
-        accessor: "long_name",
+        accessorKey: "long_name",
       },
       {
-        id: "# Stations",
-        Header: "# Stations",
+        header: "# Stations",
         minWidth: 80,
         maxWidth: 100,
-        accessor: "station_count",
+        accessorKey: "station_count",
       },
     ],
-    [config?.defaultNetworkColor],
+    [],
   );
 
-  // TODO: do I need to add back the networks use memo?
-
-  // const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-  //   useTable(
-  //     {
-  //       columns,
-  //       data: (isLoading ? [] : data),
-  //       initialState: {
-  //         sortBy: [{ id: "Short Name" }],
-  //       },
-  //     },
-  //     useSortBy,
-  //   );
+  const table = useReactTable({
+    columns,
+    data: networks ?? [],
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
 
   if (isLoading) {
     return "Loading...";
   }
 
-  return <div>Networks Table</div>;
-  // return (
-  //   <div>
-  //     <Table {...getTableProps()}>
-  //       <thead>
-  //         {
-  //           // Header rows
-  //           headerGroups.map((headerGroup) => (
-  //             <tr {...headerGroup.getHeaderGroupProps()}>
-  //               {
-  //                 // Header cells
-  //                 headerGroup.headers.map((column) => {
-  //                   const sortClass = column.isSorted
-  //                     ? column.isSortedDesc
-  //                       ? "sorted-desc"
-  //                       : "sorted-asc"
-  //                     : "";
-  //                   return (
-  //                     <th
-  //                       {...column.getHeaderProps({
-  //                         ...column.getSortByToggleProps(),
-  //                         className: sortClass,
-  //                       })}
-  //                     >
-  //                       {column.render("Header")}
-  //                     </th>
-  //                   );
-  //                 })
-  //               }
-  //             </tr>
-  //           ))
-  //         }
-  //       </thead>
+  console.log("### NetworksMetadata", table.getRowModel(), networks);
 
-  //       <tbody {...getTableBodyProps()}>
-  //         {
-  //           // Body rows
-  //           rows.map((row) => {
-  //             // Prepare the row for display
-  //             prepareRow(row);
-  //             return (
-  //               <tr {...row.getRowProps()}>
-  //                 {
-  //                   // Body cells
-  //                   row.cells.map((cell) => {
-  //                     return (
-  //                       <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
-  //                     );
-  //                   })
-  //                 }
-  //               </tr>
-  //             );
-  //           })
-  //         }
-  //       </tbody>
-  //     </Table>
-  //   </div>
-  // );
-}
+  const getSortedCssClass = (column) => {
+    const classes = [];
+    if (!column.getCanSort()) {
+      return "";
+    }
+    classes.push("cursor-pointer select-none");
+    classes.push(`sorted-${column.getIsSorted().toString()}`);
+    return classes.join(" ");
+  };
 
-NetworksMetadata.propTypes = {
-  networks: PropTypes.array,
-};
+  return (
+    <div>
+      <Table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} colSpan={header.colSpan}>
+                  {header.isPlaceholder ? null : (
+                    <div
+                      {...{
+                        className: getSortedCssClass(header.column),
+                        onClick: header.column.getToggleSortingHandler(),
+                      }}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    </div>
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => {
+            return (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    </div>
+  );
+}
 
 export default NetworksMetadata;