feat(logger): enhance logging configuration with minLevel and silent option

- Added a new LogLevel "silent" to suppress logging output.
- Replaced the debug boolean flag in LoggerConfig with a minLevel property to specify the minimum log level.
- Updated shouldLog function to respect the new minLevel configuration.
- Modified parseDebugFlag to return appropriate LogLevel based on truthy values.
- Updated main.tsx to accommodate changes in logging configuration, including parsing minLevel from attributes and options.
- Deprecated the debug flag in favor of minLevel for better clarity and control over logging behavior.
This commit is contained in:
Ross
2026-05-19 12:55:44 +01:00
parent 4dd63668b0
commit b0d8c72636
5 changed files with 988 additions and 244 deletions
+82 -26
View File
@@ -5,17 +5,36 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fluoro Multiframe Test</title> <title>Fluoro Multiframe Test</title>
<style> <style>
html,body{height:100%;margin:0} html,
.dicom-viewer-root{width:100%;height:100vh;background:#222;color:#fff} body {
height: 100%;
margin: 0;
}
.dicom-viewer-root {
width: 100%;
height: 100vh;
background: #222;
color: #fff;
}
</style> </style>
</head> </head>
<body> <body>
<div id="main_viewer" class="dicom-viewer-root" data-auto-cache-stack="false"></div> <div
id="main_viewer"
class="dicom-viewer-root"
data-auto-cache-stack="false"
></div>
<!-- Provide noop React Refresh preamble to avoid plugin-react runtime errors --> <!-- Provide noop React Refresh preamble to avoid plugin-react runtime errors -->
<script> <script>
window.$RefreshReg$ = window.$RefreshReg$ || function() {}; window.$RefreshReg$ = window.$RefreshReg$ || function () {};
window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; }; window.$RefreshSig$ =
window.$RefreshSig$ ||
function () {
return function (type) {
return type;
};
};
</script> </script>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
@@ -23,49 +42,86 @@
<script> <script>
// Viewer state for fluoro multiframe images (using relative paths from public/test_images/) // Viewer state for fluoro multiframe images (using relative paths from public/test_images/)
const state = { const state = {
"grid": {"rows": 1, "cols": 2}, grid: { rows: 1, cols: 2 },
"modes": ["stack", "stack"], modes: ["stack", "stack"],
"stacks": [ stacks: [
{"i": ["wadouri:test_images/fluro/series_2369/1.3.12.2.1107.5.4.5.180506.30000026031914043350300000126.4.dcm"]}, {
{"i": ["wadouri:test_images/multibvalues/IMG_792_og2P5S6.dcm", "wadouri:test_images/multibvalues/IMG_793_3tKkg87.dcm"]} i: [
"wadouri:https://www.penracourses.org.uk/media/atlas/dicom/1.3.12.2.1107.5.4.5.180506.30000026031914043350300000126.4.dcm",
],
},
], ],
"stackIdx": [0, 1], stackIdx: [0, 1],
"stackPos": [0, 1], stackPos: [0, 1],
"props": [ props: [
{"voiRange": {"lower": 0, "upper": 500}, "invert": false, "interpolationType": 1, "VOILUTFunction": "LINEAR", "colormap": {"name": "Grayscale", "opacity": []}}, {
{"voiRange": {"lower": 0, "upper": 500}, "invert": false, "interpolationType": 1, "VOILUTFunction": "LINEAR", "colormap": {"name": "Grayscale", "opacity": []}} voiRange: { lower: 0, upper: 500 },
invert: false,
interpolationType: 1,
VOILUTFunction: "LINEAR",
colormap: { name: "Grayscale", opacity: [] },
},
{
voiRange: { lower: 0, upper: 500 },
invert: false,
interpolationType: 1,
VOILUTFunction: "LINEAR",
colormap: { name: "Grayscale", opacity: [] },
},
], ],
"cam": [ cam: [
{"viewUp": [0, 0, 1], "viewPlaneNormal": [1, 0, 0], "position": [150, 0, 0], "focalPoint": [0, 0, 0], "parallelProjection": true, "parallelScale": 100, "viewAngle": 90, "flipHorizontal": false, "flipVertical": false, "rotation": 0}, {
{"viewUp": [0, 0, 1], "viewPlaneNormal": [1, 0, 0], "position": [150, 0, 0], "focalPoint": [0, 0, 0], "parallelProjection": true, "parallelScale": 100, "viewAngle": 90, "flipHorizontal": false, "flipVertical": false, "rotation": 0} viewUp: [0, 0, 1],
viewPlaneNormal: [1, 0, 0],
position: [150, 0, 0],
focalPoint: [0, 0, 0],
parallelProjection: true,
parallelScale: 100,
viewAngle: 90,
flipHorizontal: false,
flipVertical: false,
rotation: 0,
},
{
viewUp: [0, 0, 1],
viewPlaneNormal: [1, 0, 0],
position: [150, 0, 0],
focalPoint: [0, 0, 0],
parallelProjection: true,
parallelScale: 100,
viewAngle: 90,
flipHorizontal: false,
flipVertical: false,
rotation: 0,
},
], ],
"orientations": [null, null], orientations: [null, null],
"volumeSliceIndices": [null, null] volumeSliceIndices: [null, null],
}; };
function callWhenReady(fnName, payload) { function callWhenReady(fnName, payload) {
const maxWait = 5000; const maxWait = 5000;
const start = Date.now(); const start = Date.now();
(function check() { (function check() {
if (window[fnName] && typeof window[fnName] === 'function') { if (window[fnName] && typeof window[fnName] === "function") {
try { try {
window[fnName](payload); window[fnName](payload);
console.log('imported viewer state via', fnName); console.log("imported viewer state via", fnName);
} catch (e) { } catch (e) {
console.error('importViewerState call failed', e); console.error("importViewerState call failed", e);
} }
return; return;
} }
if (Date.now() - start > maxWait) { if (Date.now() - start > maxWait) {
console.warn('Timed out waiting for', fnName); console.warn("Timed out waiting for", fnName);
return; return;
} }
setTimeout(check, 2000); setTimeout(check, 2000);
})(); })();
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener("DOMContentLoaded", () => {
callWhenReady('importViewerState', state); callWhenReady("importViewerState", state);
}); });
</script> </script>
</body> </body>
File diff suppressed because one or more lines are too long
+630 -179
View File
File diff suppressed because it is too large Load Diff
+28 -13
View File
@@ -1,15 +1,23 @@
export type LogLevel = "debug" | "info" | "warn" | "error"; export type LogLevel = "debug" | "info" | "warn" | "error" | "silent";
export type LogFormat = "compact" | "verbose" | "json"; export type LogFormat = "compact" | "verbose" | "json";
export type LoggerConfig = { export type LoggerConfig = {
debug: boolean; minLevel: LogLevel;
format: LogFormat; format: LogFormat;
namespace: string; namespace: string;
dedupeWindowMs: number; dedupeWindowMs: number;
}; };
const LEVEL_ORDER: Record<LogLevel, number> = {
debug: 0,
info: 1,
warn: 2,
error: 3,
silent: 4,
};
const DEFAULT_CONFIG: LoggerConfig = { const DEFAULT_CONFIG: LoggerConfig = {
debug: false, minLevel: "warn",
format: "compact", format: "compact",
namespace: "dv3d", namespace: "dv3d",
dedupeWindowMs: 1200, dedupeWindowMs: 1200,
@@ -46,14 +54,11 @@ function serializeArg(arg: unknown): unknown {
} }
function shouldLog(level: LogLevel) { function shouldLog(level: LogLevel) {
if (level === "debug") { return LEVEL_ORDER[level] >= LEVEL_ORDER[loggerConfig.minLevel];
return loggerConfig.debug;
}
return true;
} }
function shouldDedupe(level: LogLevel) { function shouldDedupe(level: LogLevel) {
return level === "debug"; return level === "debug" || level === "info";
} }
function buildFingerprint(level: LogLevel, args: unknown[], ctx?: LogContext): string { function buildFingerprint(level: LogLevel, args: unknown[], ctx?: LogContext): string {
@@ -138,18 +143,28 @@ export function parseLogFormat(value: unknown): LogFormat {
return DEFAULT_CONFIG.format; return DEFAULT_CONFIG.format;
} }
export function parseDebugFlag(value: unknown): boolean { /** Parse a log level string. Falls back to the default ("warn") for unknown values. */
if (typeof value === "boolean") { export function parseLogLevel(value: unknown): LogLevel {
if (value === "debug" || value === "info" || value === "warn" || value === "error" || value === "silent") {
return value; return value;
} }
return DEFAULT_CONFIG.minLevel;
}
/** Backward-compat helper: maps a truthy debug flag to minLevel "debug" or "warn". */
export function parseDebugFlag(value: unknown): LogLevel {
if (typeof value === "boolean") {
return value ? "debug" : "warn";
}
if (typeof value === "string") { if (typeof value === "string") {
const normalized = value.trim().toLowerCase(); const normalized = value.trim().toLowerCase();
return normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on"; const truthy = normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on";
return truthy ? "debug" : "warn";
} }
if (typeof value === "number") { if (typeof value === "number") {
return value !== 0; return value !== 0 ? "debug" : "warn";
} }
return false; return "warn";
} }
export const logger = { export const logger = {
+29 -6
View File
@@ -8,14 +8,19 @@ import {
logger, logger,
parseDebugFlag, parseDebugFlag,
parseLogFormat, parseLogFormat,
parseLogLevel,
setLoggerConfig, setLoggerConfig,
type LogFormat, type LogFormat,
type LogLevel,
} from "./lib/logger"; } from "./lib/logger";
type MountOptions = { type MountOptions = {
force?: boolean; force?: boolean;
containerIds?: string[]; containerIds?: string[];
logging?: { logging?: {
/** Minimum log level to emit. Takes precedence over `debug`. */
minLevel?: LogLevel;
/** @deprecated Use minLevel instead. true maps to "debug", false maps to "warn". */
debug?: boolean; debug?: boolean;
format?: LogFormat; format?: LogFormat;
}; };
@@ -40,8 +45,8 @@ declare global {
interface Window { interface Window {
mountDicomViewers?: (options?: MountOptions) => void; mountDicomViewers?: (options?: MountOptions) => void;
remountDicomViewer?: (containerId: string) => void; remountDicomViewer?: (containerId: string) => void;
setDicomViewerLogging?: (config: { debug?: boolean; format?: LogFormat }) => void; setDicomViewerLogging?: (config: { minLevel?: LogLevel; debug?: boolean; format?: LogFormat }) => void;
getDicomViewerLogging?: () => { debug: boolean; format: LogFormat; namespace: string; dedupeWindowMs: number }; getDicomViewerLogging?: () => { minLevel: LogLevel; format: LogFormat; namespace: string; dedupeWindowMs: number };
} }
} }
@@ -158,13 +163,26 @@ const shouldMountContainer = (container: HTMLElement, options?: MountOptions): b
}; };
const getContainerLogConfig = (container: HTMLElement, options?: MountOptions) => { const getContainerLogConfig = (container: HTMLElement, options?: MountOptions) => {
const attrLevel = container.getAttribute("data-log-level");
const attrDebug = container.getAttribute("data-log-debug"); const attrDebug = container.getAttribute("data-log-debug");
const attrFormat = container.getAttribute("data-log-format"); const attrFormat = container.getAttribute("data-log-format");
const debug = attrDebug !== null ? parseDebugFlag(attrDebug) : !!options?.logging?.debug; // Resolve minLevel: data-log-level > options.minLevel > data-log-debug (legacy) > options.debug (legacy)
const format = parseLogFormat(attrFormat ?? options?.logging?.format); let minLevel: LogLevel;
if (attrLevel !== null) {
minLevel = parseLogLevel(attrLevel);
} else if (options?.logging?.minLevel) {
minLevel = options.logging.minLevel;
} else if (attrDebug !== null) {
minLevel = parseDebugFlag(attrDebug);
} else if (options?.logging?.debug !== undefined) {
minLevel = parseDebugFlag(options.logging.debug);
} else {
minLevel = "warn";
}
return { debug, format }; const format = parseLogFormat(attrFormat ?? options?.logging?.format);
return { minLevel, format };
}; };
const mountContainer = (container: HTMLElement, imageStacks: () => Promise<any[]>, options?: MountOptions) => { const mountContainer = (container: HTMLElement, imageStacks: () => Promise<any[]>, options?: MountOptions) => {
@@ -261,8 +279,13 @@ window.remountDicomViewer = (containerId: string) => {
mountDicomViewers({ force: true, containerIds: [containerId] }); mountDicomViewers({ force: true, containerIds: [containerId] });
}; };
window.setDicomViewerLogging = (config) => { window.setDicomViewerLogging = (config) => {
const minLevel = config.minLevel
? parseLogLevel(config.minLevel)
: config.debug !== undefined
? parseDebugFlag(config.debug)
: undefined;
setLoggerConfig({ setLoggerConfig({
debug: config.debug, minLevel,
format: config.format ? parseLogFormat(config.format) : undefined, format: config.format ? parseLogFormat(config.format) : undefined,
}); });
}; };