@tpzdsp/next-toolkit 1.14.3 → 1.15.1

package/src/http/logger.ts

@@ -2,60 +2,376 @@ import type { BetterFetchPlugin, RequestContext } from '@better-fetch/fetch';
 
 import { Header } from './constants';
 
-// Tries to print the request/response body as a string, and clamps the length it it's too long.
-const preview = (data: unknown, maxLength: number): string | null => {
+const MAX_PREVIEW_LENGTH = 150;
+
+// Tries to print data as a string.
+const stringify = (data: unknown): string | null => {
   if (data == null) {
     return null;
   }
 
   try {
-    let str = typeof data === 'string' ? data : JSON.stringify(data);
-
-    if (str.length > maxLength) {
-      str = str.slice(0, maxLength) + '…';
-    }
-
-    return str;
+    return typeof data === 'string' ? data : JSON.stringify(data);
   } catch {
     return '[unserializable]';
   }
 };
 
+// Tries to print the request/response body as a string, and clamps the length if it's too long.
+const preview = (data: unknown): string | null => {
+  const str = stringify(data);
+
+  if (str == null) {
+    return null;
+  }
+
+  if (str.length > MAX_PREVIEW_LENGTH) {
+    return str.slice(0, MAX_PREVIEW_LENGTH) + '…';
+  }
+
+  return str;
+};
+
 type RequestMeta = {
   requestId: string;
 };
+
+type RequestLoggerMessageExtras = {
+  loggerOverrides?: {
+    requestFormat?: (args: { request: MetaContext }) => string;
+
+    successFormat?: (args: {
+      request: MetaContext;
+      response: Response;
+      data: unknown;
+      durationMs: number;
+    }) => string;
+
+    errorFormat?: (args: {
+      request: MetaContext;
+      response?: Response;
+      error: unknown;
+      durationMs: number;
+    }) => string;
+
+    retryFormat?: (args: { request: MetaContext; attempt: number }) => string;
+  };
+};
+
 type MetaContext = RequestContext & {
   meta: RequestMeta;
-};
+} & RequestLoggerMessageExtras;
 
 const UNKNOWN_ID = '???';
 
-/**
- * Config options for the logger.
- */
+type RequestResponseToggle = {
+  request?: boolean;
+  response?: boolean;
+};
+
 type RequestLoggerOptions = {
   /**
-   * Enables/Disabled the logger. Can be a function/async function to toggle the logger dynamically
+   * Enables/disables the logger. Can be a function/async function to toggle dynamically.
    */
   enabled?: boolean | (() => Promise<boolean> | boolean);
+
   /**
-   * Controls how much of the request and response body is shown in the logs.
+   * Whether bodies should be truncated to `maxPreviewLength`.
+   * If false, the full body is printed and is placed on the following line.
    */
-  maxPreviewLength?: number;
+  truncateBody?: boolean;
+
+  /**
+   * Built-in output toggles.
+   */
+  showMethod?: boolean;
+  showUrl?: boolean;
+  showStatus?: boolean;
+  showDuration?: boolean;
+  showAcceptHeader?: boolean;
+  showContentType?: boolean;
+  showRetryAttempt?: boolean;
+  showBody?: RequestResponseToggle;
+  showHeaders?: RequestResponseToggle;
+};
+
+const defaultOptions = {
+  truncateBody: true,
+  showMethod: true,
+  showUrl: true,
+  showStatus: true,
+  showDuration: true,
+  showAcceptHeader: true,
+  showContentType: true,
+  showRetryAttempt: true,
+  showBody: {
+    request: true,
+    response: true,
+  },
+  showHeaders: {
+    request: false,
+    response: false,
+  },
+} as const;
+
+const getOptionOrDefault = <K extends keyof RequestLoggerOptions>(
+  options: RequestLoggerOptions | undefined,
+  key: K,
+): NonNullable<RequestLoggerOptions[K]> => {
+  return options?.[key] ?? (defaultOptions as Required<RequestLoggerOptions>)[key];
+};
+
+const formatHeaders = (headers: Headers): string => {
+  const entries = Array.from(headers.entries());
+
+  if (entries.length === 0) {
+    return 'N/A';
+  }
+
+  return entries.map(([key, value]) => `${key}: ${value}`).join(', ');
+};
+
+const joinLines = (lines: (string | null | undefined)[]): string =>
+  lines.filter((line): line is string => Boolean(line)).join('\n');
+
+const formatPrimaryLine = ({
+  icon,
+  request,
+  id,
+  showMethod,
+  showUrl,
+  suffix,
+}: {
+  icon: string;
+  request: MetaContext;
+  id: string;
+  showMethod: boolean;
+  showUrl: boolean;
+  suffix?: string;
+}): string => {
+  const parts = [
+    icon,
+    showMethod ? `[${request.method.toUpperCase()}]` : null,
+    `(${id})`,
+    showUrl ? `${request.url ?? ''}` : null,
+    suffix ?? null,
+  ].filter(Boolean);
+
+  return parts.join(' ');
+};
+
+const formatStatusDurationLine = ({
+  status,
+  durationMs,
+  showStatus,
+  showDuration,
+}: {
+  status?: number | string;
+  durationMs: number;
+  showStatus: boolean;
+  showDuration: boolean;
+}): string | null => {
+  const parts = [
+    showStatus ? `${status ?? 'unknown'}` : null,
+    showDuration ? `${durationMs.toFixed(1)}ms` : null,
+  ].filter(Boolean);
+
+  return parts.length > 0 ? `\t↳ ${parts.join(' | ')}` : null;
+};
+
+const formatBodyLine = ({
+  label,
+  body,
+  truncateBody,
+}: {
+  label: string;
+  body: unknown;
+  truncateBody: boolean;
+}): string | null => {
+  const rendered = truncateBody ? preview(body) : stringify(body);
+
+  if (!rendered) {
+    return null;
+  }
+
+  return truncateBody ? `\t↳ ${label}: ${rendered}` : `\t↳ ${label}:\n${rendered}`;
+};
+
+const getDurationMs = (timings: Map<string, number>, id: string): number =>
+  performance.now() - (timings.get(id) ?? 0);
+
+const defaultRequestFormatter = ({
+  request,
+  options,
+}: {
+  request: MetaContext;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showAcceptHeader = getOptionOrDefault(options, 'showAcceptHeader');
+  const showRequestContentType = getOptionOrDefault(options, 'showContentType');
+  const showRequestHeaders = getOptionOrDefault(options, 'showHeaders').request;
+  const showRequestBody = getOptionOrDefault(options, 'showBody').request;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '🚀',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    showRequestContentType
+      ? `\t↳ Req. Content-Type: ${request.headers.get(Header.ContentType) ?? 'N/A'}`
+      : null,
+    showAcceptHeader ? `\t↳ Req. Accept: ${request.headers.get(Header.Accept) ?? 'N/A'}` : null,
+    showRequestHeaders ? `\t↳ Req. Headers: ${formatHeaders(request.headers)}` : null,
+    showRequestBody
+      ? formatBodyLine({
+          label: 'Req. Body',
+          body: request.body,
+          truncateBody,
+        })
+      : null,
+  ]);
+};
+
+const defaultSuccessFormatter = ({
+  request,
+  response,
+  data,
+  durationMs,
+  options,
+}: {
+  request: MetaContext;
+  response: Response;
+  data: unknown;
+  durationMs: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showStatus = getOptionOrDefault(options, 'showStatus');
+  const showDuration = getOptionOrDefault(options, 'showDuration');
+  const showResponseContentType = getOptionOrDefault(options, 'showContentType');
+  const showResponseHeaders = getOptionOrDefault(options, 'showHeaders').response;
+  const showResponseBody = getOptionOrDefault(options, 'showBody').response;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '✅',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    formatStatusDurationLine({
+      status: response.status,
+      durationMs,
+      showStatus,
+      showDuration,
+    }),
+    showResponseContentType
+      ? `\t↳ Res. Content-Type: ${response.headers.get(Header.ContentType) ?? 'N/A'}`
+      : null,
+    showResponseHeaders ? `\t↳ Res. Headers: ${formatHeaders(response.headers)}` : null,
+    showResponseBody
+      ? formatBodyLine({
+          label: 'Res. Body',
+          body: data,
+          truncateBody,
+        })
+      : null,
+  ]);
+};
+
+const defaultRetryFormatter = ({
+  request,
+  attempt,
+  options,
+}: {
+  request: MetaContext;
+  attempt: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showRetryAttempt = getOptionOrDefault(options, 'showRetryAttempt');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '🔁',
+      request,
+      id,
+      showMethod,
+      showUrl,
+      suffix: 'Retrying...',
+    }),
+    showRetryAttempt ? `\t↳ Attempt: ${attempt}` : null,
+  ]);
+};
+
+const defaultErrorFormatter = ({
+  request,
+  response,
+  error,
+  durationMs,
+  options,
+}: {
+  request: MetaContext;
+  response?: Response;
+  error: unknown;
+  durationMs: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showStatus = getOptionOrDefault(options, 'showStatus');
+  const showDuration = getOptionOrDefault(options, 'showDuration');
+  const showResponseHeaders = getOptionOrDefault(options, 'showHeaders').response;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '❌',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    formatStatusDurationLine({
+      status: response?.status ?? 'unknown',
+      durationMs,
+      showStatus,
+      showDuration,
+    }),
+    showResponseHeaders && response ? `\t↳ Res. Headers: ${formatHeaders(response.headers)}` : null,
+    truncateBody
+      ? `\t↳ Error: ${preview(error)}`
+      : `\t↳ Error:\n${stringify(error) ?? '[unserializable]'}`,
+  ]);
 };
 
 /**
- * A logger for the fetch functions that prints detailed information on each request and respective response.
- * Each request is given a unique ID which is paired with a response to make finding matching request/response pairs easier.
- *
- * It currently, prints the method, url, `Accept` and `Content-Type` headers, and the body of the request, and it prints the
- * `Content-Type` header, status code, response body and duration of the response, for both successful and failed responses.
+ * A logger for fetch functions that prints detailed information for each request and response.
+ * Each request is given a unique ID which is paired with its response.
  */
-export const requestLogger = (options?: RequestLoggerOptions): BetterFetchPlugin => {
+export const requestLogger = (
+  options?: RequestLoggerOptions,
+): BetterFetchPlugin<RequestLoggerMessageExtras> => {
   const enabled =
-    typeof options?.enabled !== 'function' ? () => options?.enabled ?? true : options?.enabled;
-
-  const maxPreview = options?.maxPreviewLength ?? 150;
+    typeof options?.enabled !== 'function' ? () => options?.enabled ?? true : options.enabled;
 
   const timings = new Map<string, number>();
 
@@ -64,99 +380,119 @@ export const requestLogger = (options?: RequestLoggerOptions): BetterFetchPlugin
   return {
     id: 'logger',
     name: 'Logger',
-    version: '0.1.0',
+    version: '0.3.0',
     hooks: {
       hookOptions: {
         cloneResponse: true,
       },
 
       onRequest: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const metaContext = context as MetaContext;
+        const request = context as MetaContext;
 
-        metaContext.meta = metaContext.meta ?? {};
+        request.meta = request.meta ?? ({} as RequestMeta);
+        request.loggerOverrides = request.loggerOverrides ?? {};
 
         const id = genId();
 
-        metaContext.meta.requestId = id;
-        context.headers.set(Header.XRequestId, id);
+        request.meta.requestId = id;
+        request.headers.set(Header.XRequestId, id);
 
         timings.set(id, performance.now());
 
-        const { url, method, body, headers } = context;
-
-        const bodyPreview = body ? preview(body, maxPreview) : '';
-        const contentType = headers.get(Header.ContentType) ?? 'N/A';
-        const accept = headers.get(Header.Accept) ?? 'N/A';
-
         const message =
-          `🚀 [${method}] (${id}) ${url}\n` +
-          `\t↳ Content-Type: ${contentType}\n` +
-          `\t↳ Accept: ${accept}` +
-          (bodyPreview ? `\n\t↳ Body: ${bodyPreview}` : '');
+          request.loggerOverrides.requestFormat?.({ request }) ??
+          defaultRequestFormatter({
+            request,
+            options,
+          });
 
-        console.log(message);
+        console.log(`${message}\n`);
       },
 
       onSuccess: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const { response, data, request } = context;
+        const request = context.request as MetaContext;
+        const { response, data } = context;
 
-        const id = (request as MetaContext).meta.requestId ?? UNKNOWN_ID;
-
-        const status = response.status;
-        const bodyPreview = preview(data, maxPreview);
-        const contentType = response.headers.get(Header.ContentType) ?? 'N/A';
-        const duration = (performance.now() - (timings.get(id) ?? 0)).toFixed(1);
+        const id = request.meta?.requestId ?? UNKNOWN_ID;
+        const durationMs = getDurationMs(timings, id);
 
         const message =
-          `✅ [${request.method}] (${id}) ${request.url}\n` +
-          `\t↳ Status: ${status} (${duration}ms)\n` +
-          `\t↳ Respone Content-Type: ${contentType}\n` +
-          `\t↳ Response: ${bodyPreview}`;
-
-        console.log(message);
+          request.loggerOverrides?.successFormat?.({
+            request,
+            response,
+            data,
+            durationMs,
+          }) ??
+          defaultSuccessFormatter({
+            request,
+            response,
+            data,
+            durationMs,
+            options,
+          });
+
+        console.log(`${message}\n`);
+        timings.delete(id);
       },
 
-      onRetry: async (ctx) => {
-        if (!(await enabled?.())) {
+      onRetry: async (context) => {
+        if (!(await enabled())) {
           return;
         }
 
-        const id = (ctx.request as MetaContext).meta.requestId ?? UNKNOWN_ID;
+        const request = context.request as MetaContext;
+        const attempt = (request.retryAttempt ?? 0) + 1;
 
-        console.warn(
-          `🔁 [${ctx.request.method}] (${id}) Retrying ${ctx.request.url}... Attempt: ${
-            (ctx.request.retryAttempt ?? 0) + 1
-          }`,
-        );
+        const message =
+          request.loggerOverrides?.retryFormat?.({
+            request,
+            attempt,
+          }) ??
+          defaultRetryFormatter({
+            request,
+            attempt,
+            options,
+          });
+
+        console.warn(`${message}\n`);
       },
 
       onError: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const { response, error, request } = context;
-
-        const id = (request as MetaContext).meta.requestId ?? UNKNOWN_ID;
+        const request = context.request as MetaContext;
+        const { response, error } = context;
 
-        const status = response?.status ?? 'unknown';
-        const errorPreview = preview(error, maxPreview);
-        const duration = (performance.now() - (timings.get(id) ?? 0)).toFixed(1);
+        const id = request.meta?.requestId ?? UNKNOWN_ID;
+        const durationMs = getDurationMs(timings, id);
 
         const message =
-          `❌ [${request.method}] (${id}) ${request.url}\n` +
-          `\t↳ Status: ${status} (${duration}ms)\n` +
-          `\t↳ Error: ${errorPreview}`;
-
-        console.error(message);
+          request.loggerOverrides?.errorFormat?.({
+            request,
+            response,
+            error,
+            durationMs,
+          }) ??
+          defaultErrorFormatter({
+            request,
+            response,
+            error,
+            durationMs,
+            options,
+          });
+
+        console.error(`${message}\n`);
+        timings.delete(id);
       },
     },
   };

package/src/map/MapComponent.tsx

@@ -2,7 +2,7 @@
 
 import { memo, useEffect, useRef, useState } from 'react';
 
-import { Map, Overlay, View } from 'ol';
+import { Feature, Map, Overlay, View } from 'ol';
 import { Attribution, ScaleLine, Zoom } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
 
@@ -11,7 +11,7 @@ import { FullScreenControl } from './FullScreenControl';
 import { LayerSwitcherControl } from './LayerSwitcherControl';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
-import { getPopupPositionClass } from './utils';
+import { getPopupPositionClass, LAYER_NAMES } from './utils';
 import type { PopupDirection } from '../types/map';
 
 export type MapComponentProps = {
@@ -44,7 +44,7 @@ const arrowStyles: Record<PopupDirection, string> = {
  * @return {*}
  */
 const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
-  const [popupFeatures, setPopupFeatures] = useState([]);
+  const [popupFeatures, setPopupFeatures] = useState<Feature[]>([]);
   const [popupCoordinate, setPopupCoordinate] = useState<number[] | null>(null);
   const [popupPositionClass, setPopupPositionClass] = useState<PopupDirection>('bottom-right');
 
@@ -117,17 +117,41 @@ const MapComponentBase = ({ osMapsApiKey, basePath }: MapComponentProps) => {
         return;
       }
 
-      newMap.forEachFeatureAtPixel(event.pixel, (feature) => {
-        const features = feature.get('features');
+      newMap.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
+        const clusterFeatures = feature.get('features');
+        const layerName = (layer as { get(k: string): unknown } | null)?.get('name');
 
-        if (features?.length > 0) {
+        if (clusterFeatures?.length > 0) {
           const coordinate = event.coordinate;
           const direction = getPopupPositionClass(coordinate, newMap);
 
-          setPopupFeatures(features);
+          setPopupFeatures(clusterFeatures);
           setPopupCoordinate(coordinate);
           setPopupPositionClass(direction);
           overlay.setPosition(event.coordinate);
+
+          return true; // stop iteration
+        }
+
+        // Direct feature (e.g. polygon) — only show popup for the sampling points
+        // layer, not boundary or AOI layers which may also have name properties.
+        if (layerName !== LAYER_NAMES.SamplingPoints) {
+          return;
+        }
+
+        const name = feature.get('name');
+        const notation = feature.get('notation');
+
+        if (name || notation) {
+          const coordinate = event.coordinate;
+          const direction = getPopupPositionClass(coordinate, newMap);
+
+          setPopupFeatures([feature as Feature]);
+          setPopupCoordinate(coordinate);
+          setPopupPositionClass(direction);
+          overlay.setPosition(event.coordinate);
+
+          return true; // stop iteration
         }
       });
     });

package/src/map/Popup.tsx

@@ -41,13 +41,16 @@ export const Popup = ({
           rounded-lg divide-y divide-gray-300"
       >
         {features.map((feature) => {
-          const id = feature.get('id');
           const name = feature.get('name');
           const notation = feature.get('notation');
-          const url = `${baseUrl}${notation}`;
+          const libraryNotation = feature.get('libraryNotation');
+          const identifier = notation ?? name;
+          const url = libraryNotation
+            ? `${baseUrl}${libraryNotation}/${identifier}`
+            : `${baseUrl}${identifier}`;
 
           return (
-            <div key={id}>
+            <div key={identifier}>
               <strong>
                 <ExternalLink
                   href={url}

package/src/map/useKeyboardDrawing.ts

@@ -70,19 +70,23 @@ export const useKeyboardDrawing = ({
       }
 
       switch (event.key) {
-        case KeyboardKeys.ArrowUp:
+        case KeyboardKeys.W:
+        case KeyboardKeys.I:
           moveCursor(0, -1);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowDown:
+        case KeyboardKeys.S:
+        case KeyboardKeys.K:
           moveCursor(0, 1);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowLeft:
+        case KeyboardKeys.A:
+        case KeyboardKeys.J:
           moveCursor(-1, 0);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowRight:
+        case KeyboardKeys.D:
+        case KeyboardKeys.L:
           moveCursor(1, 0);
           event.preventDefault();
           break;