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" />
<title>Fluoro Multiframe Test</title>
<style>
html,body{height:100%;margin:0}
.dicom-viewer-root{width:100%;height:100vh;background:#222;color:#fff}
html,
body {
height: 100%;
margin: 0;
}
.dicom-viewer-root {
width: 100%;
height: 100vh;
background: #222;
color: #fff;
}
</style>
</head>
<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 -->
<script>
window.$RefreshReg$ = window.$RefreshReg$ || function() {};
window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; };
window.$RefreshReg$ = window.$RefreshReg$ || function () {};
window.$RefreshSig$ =
window.$RefreshSig$ ||
function () {
return function (type) {
return type;
};
};
</script>
<script type="module" src="/src/main.tsx"></script>
@@ -23,49 +42,86 @@
<script>
// Viewer state for fluoro multiframe images (using relative paths from public/test_images/)
const state = {
"grid": {"rows": 1, "cols": 2},
"modes": ["stack", "stack"],
"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"]}
grid: { rows: 1, cols: 2 },
modes: ["stack", "stack"],
stacks: [
{
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],
"stackPos": [0, 1],
"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": []}}
stackIdx: [0, 1],
stackPos: [0, 1],
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: [] },
},
],
"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}
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,
},
],
"orientations": [null, null],
"volumeSliceIndices": [null, null]
orientations: [null, null],
volumeSliceIndices: [null, null],
};
function callWhenReady(fnName, payload) {
const maxWait = 5000;
const start = Date.now();
(function check() {
if (window[fnName] && typeof window[fnName] === 'function') {
if (window[fnName] && typeof window[fnName] === "function") {
try {
window[fnName](payload);
console.log('imported viewer state via', fnName);
console.log("imported viewer state via", fnName);
} catch (e) {
console.error('importViewerState call failed', e);
console.error("importViewerState call failed", e);
}
return;
}
if (Date.now() - start > maxWait) {
console.warn('Timed out waiting for', fnName);
console.warn("Timed out waiting for", fnName);
return;
}
setTimeout(check, 2000);
})();
}
document.addEventListener('DOMContentLoaded', () => {
callWhenReady('importViewerState', state);
document.addEventListener("DOMContentLoaded", () => {
callWhenReady("importViewerState", state);
});
</script>
</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 LoggerConfig = {
debug: boolean;
minLevel: LogLevel;
format: LogFormat;
namespace: string;
dedupeWindowMs: number;
};
const LEVEL_ORDER: Record<LogLevel, number> = {
debug: 0,
info: 1,
warn: 2,
error: 3,
silent: 4,
};
const DEFAULT_CONFIG: LoggerConfig = {
debug: false,
minLevel: "warn",
format: "compact",
namespace: "dv3d",
dedupeWindowMs: 1200,
@@ -46,14 +54,11 @@ function serializeArg(arg: unknown): unknown {
}
function shouldLog(level: LogLevel) {
if (level === "debug") {
return loggerConfig.debug;
}
return true;
return LEVEL_ORDER[level] >= LEVEL_ORDER[loggerConfig.minLevel];
}
function shouldDedupe(level: LogLevel) {
return level === "debug";
return level === "debug" || level === "info";
}
function buildFingerprint(level: LogLevel, args: unknown[], ctx?: LogContext): string {
@@ -138,18 +143,28 @@ export function parseLogFormat(value: unknown): LogFormat {
return DEFAULT_CONFIG.format;
}
export function parseDebugFlag(value: unknown): boolean {
if (typeof value === "boolean") {
/** Parse a log level string. Falls back to the default ("warn") for unknown values. */
export function parseLogLevel(value: unknown): LogLevel {
if (value === "debug" || value === "info" || value === "warn" || value === "error" || value === "silent") {
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") {
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") {
return value !== 0;
return value !== 0 ? "debug" : "warn";
}
return false;
return "warn";
}
export const logger = {
+29 -6
View File
@@ -8,14 +8,19 @@ import {
logger,
parseDebugFlag,
parseLogFormat,
parseLogLevel,
setLoggerConfig,
type LogFormat,
type LogLevel,
} from "./lib/logger";
type MountOptions = {
force?: boolean;
containerIds?: string[];
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;
format?: LogFormat;
};
@@ -40,8 +45,8 @@ declare global {
interface Window {
mountDicomViewers?: (options?: MountOptions) => void;
remountDicomViewer?: (containerId: string) => void;
setDicomViewerLogging?: (config: { debug?: boolean; format?: LogFormat }) => void;
getDicomViewerLogging?: () => { debug: boolean; format: LogFormat; namespace: string; dedupeWindowMs: number };
setDicomViewerLogging?: (config: { minLevel?: LogLevel; debug?: boolean; format?: LogFormat }) => void;
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 attrLevel = container.getAttribute("data-log-level");
const attrDebug = container.getAttribute("data-log-debug");
const attrFormat = container.getAttribute("data-log-format");
const debug = attrDebug !== null ? parseDebugFlag(attrDebug) : !!options?.logging?.debug;
const format = parseLogFormat(attrFormat ?? options?.logging?.format);
// Resolve minLevel: data-log-level > options.minLevel > data-log-debug (legacy) > options.debug (legacy)
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) => {
@@ -261,8 +279,13 @@ window.remountDicomViewer = (containerId: string) => {
mountDicomViewers({ force: true, containerIds: [containerId] });
};
window.setDicomViewerLogging = (config) => {
const minLevel = config.minLevel
? parseLogLevel(config.minLevel)
: config.debug !== undefined
? parseDebugFlag(config.debug)
: undefined;
setLoggerConfig({
debug: config.debug,
minLevel,
format: config.format ? parseLogFormat(config.format) : undefined,
});
};