chart = { let canvas, svgNode, pcWrapEl, legendEl, tableSummaryEl, dataTableEl, tableScrollEl, resetBtn, colourBySelect; let W = Math.max(800, Math.floor(width - 40)); let H = 560; let TABLE_H = 260; const MARGIN = { top: 58, right: 30, bottom: 20, left: 60 }; let PLOT_W, PLOT_H; let LINE_WIDTH = 0.8; let CONTINUOUS_COLORMAP = "Viridis"; const AXIS_TITLE_FONT_SIZE = 10; const AXIS_TICK_FONT_SIZE = 8; const AXIS_CONTROL_FONT_SIZE = 10; const EXPORT_LEGEND_FONT_SIZE = 10; // Axes can be reordered by dragging the label area. // Numeric and time axes can be flipped interactively with the reverse button under their label. const BASE_AXES = [ { key: "measurement_time", label: "Time", type: "time" }, { key: "beamtime_date", label: "Date", type: "category" }, { key: "bar_id", label: "Bar", type: "category" }, { key: "measured", label: "Measured", type: "boolean" }, { key: "thin_film_id", label: "Thin film", type: "category" }, { key: "sample_center_position", label: "Sample Center", type: "number" }, { key: "sample_x_stage", label: "X Stage", type: "number" }, { key: "sample_y_stage", label: "Y Stage", type: "number" }, { key: "incident_angle_deg", label: "Incident (°)", type: "number" }, { key: "sample_alpha_stage", label: "Alpha Stage", type: "number" }, ]; let AVAILABLE_AXES =[...BASE_AXES]; let VISIBLE_AXIS_KEYS = BASE_AXES.map(ax => ax.key); let VISIBLE_TABLE_COLUMN_KEYS =[]; let COLUMN_TYPES = {}; let ORIGINAL_COLUMNS =[]; let AXIS_ORDER =[]; const AXIS_REVERSE_BY_KEY = {}; let _pendingAdditiveBrushStateByKey = {}; let DRAG_AXIS_KEY = null; let DRAG_AXIS_X = null; let AXES =[]; function getCurrentAxes() { const axisByKey = new Map(AVAILABLE_AXES.map(ax => [ax.key, ax])); const visible = VISIBLE_AXIS_KEYS.filter(key => axisByKey.has(key)); const orderedKeys = [ ...AXIS_ORDER.filter(key => visible.includes(key)), ...visible.filter(key => !AXIS_ORDER.includes(key)), ]; return orderedKeys.map(key => axisByKey.get(key)); } function getCurrentTableColumns() { const axisByKey = new Map(AVAILABLE_AXES.map(ax => [ax.key, ax])); const visible = VISIBLE_TABLE_COLUMN_KEYS.filter(key => axisByKey.has(key)); const orderedKeys = [ ...AXIS_ORDER.filter(key => visible.includes(key)), ...visible.filter(key => !AXIS_ORDER.includes(key)), ]; return orderedKeys.map(key => axisByKey.get(key)); } function defaultAxisOrderForCurrentOptions() { return BASE_AXES.map(ax => ax.key); } function applyAxisOrientationsToAvailableAxes() { AVAILABLE_AXES.forEach(ax => { ax.reverse = !!AXIS_REVERSE_BY_KEY[ax.key]; }); } function applyDefaultAxisOrientations() { applyAxisOrientationsToAvailableAxes(); } function coerceColumnValue(value, type) { if (type === "number") { return value === "" || value == null ? NaN : +value; } if (type === "boolean") { const v = String(value ?? "").trim().toLowerCase(); if (["1", "true", "yes", "y"].includes(v)) return 1; if (["0", "false", "no", "n"].includes(v)) return 0; return ""; } // Time remains as HH:MM:SS text; it is parsed to seconds only for plotting. if (type === "time") return value ?? ""; return value ?? ""; } function applyColumnTypesToData() { _data.forEach(d => { Object.keys(COLUMN_TYPES).forEach(key => { if (Object.prototype.hasOwnProperty.call(d, key)) { d[key] = coerceColumnValue(d[key], COLUMN_TYPES[key]); } }); }); } function rebuildAvailableAxesFromColumns() { AVAILABLE_AXES = BASE_AXES.map(ax => ({ ...ax, type: COLUMN_TYPES[ax.key] || ax.type, reverse: !!AXIS_REVERSE_BY_KEY[ax.key] })); applyAxisOrientationsToAvailableAxes(); } function isAxisReversed(key) { if (Object.prototype.hasOwnProperty.call(AXIS_REVERSE_BY_KEY, key)) return !!AXIS_REVERSE_BY_KEY[key]; const ax = AXES.find(ax => ax.key === key) || AVAILABLE_AXES.find(ax => ax.key === key) || BASE_AXES.find(ax => ax.key === key); return !!(ax && ax.reverse); } function isAxisReversible(ax) { return ax.type === "number" || ax.type === "time"; } function isAxisOrderable(ax) { return ax.type === "category" || ax.type === "boolean"; } function axisDirectionIcon(ax) { return ax.reverse ? "⇅" : "↕"; } const baseAxX = i => { const n = AXES.length; return MARGIN.left + (n === 1 ? 0 : (i / (n - 1)) * PLOT_W); }; const axX = i => { const ax = AXES[i]; if (DRAG_AXIS_KEY && ax && ax.key === DRAG_AXIS_KEY && Number.isFinite(DRAG_AXIS_X)) { return Math.max(MARGIN.left, Math.min(MARGIN.left + PLOT_W, DRAG_AXIS_X)); } return baseAxX(i); }; let COLOUR_BY = "sample_center_position"; let TABLE_SORT = { key: null, direction: "asc" }; let IS_RESTORING_BRUSHES = false; let _data = [], _scales = []; let _brushStateByKey = {}; let _brushes = []; const _brushFns = []; const _colorMaps = {}; const _continuousColorMaps = {}; // Explicit actions on categorical axes: // - order categories according to the current brushes on other axes // - reset to the default natural order // // This is action-only; it does not auto-recompute while brushing. let CATEGORY_CUSTOM_ORDERS = {}; function isSelectedIgnoringAxis(d, ignoredKey) { return AXES.every(ax => { if (ax.key === ignoredKey) return true; const state = _brushStateByKey[ax.key]; if (!state) return true; const v = d[ax.key]; if (isNumericAxis(ax)) { const value = ax.type === "time" ? parseTimeOfDaySeconds(v) : v; const ranges = state.ranges || (Number.isFinite(state.min) && Number.isFinite(state.max) ? [{ min: state.min, max: state.max }] : []); return Number.isFinite(value) && ranges.some(r => value >= r.min && value <= r.max); } return state.values && state.values.includes(v); }); } function naturalCategoryDomain(domain) { return [...domain].sort(); } function filteredCategoryValuesFromOtherBrushes(key) { const values = new Set(); _data.forEach(d => { if (isSelectedIgnoringAxis(d, key) && d[key] != null && d[key] !== "") { values.add(d[key]); } }); return values; } function orderedCategoryDomain(ax, domain) { const base = naturalCategoryDomain(domain); const customOrder = CATEGORY_CUSTOM_ORDERS[ax.key]; if (!Array.isArray(customOrder) || !customOrder.length) return base; const present = new Set(base); const orderedPresent = customOrder.filter(v => present.has(v)); const remaining = base.filter(v => !orderedPresent.includes(v)); return [...orderedPresent, ...remaining]; } function parseTimeOfDaySeconds(value) { if (value == null || value === "") return NaN; // measurement_time is expected to be HH:MM:SS or HH:MM. // Do not treat arbitrary numeric strings as time-of-day. const s = String(value).trim(); const match = s.match(/^(\d{1,2}):(\d{2})(?::(\d{2}(?:\.\d+)?))?$/); if (match) { const h = +match[1]; const m = +match[2]; const sec = match[3] == null ? 0 : +match[3]; if (!Number.isFinite(h) || !Number.isFinite(m) || !Number.isFinite(sec)) return NaN; if (h < 0 || h > 23 || m < 0 || m > 59 || sec < 0 || sec >= 60) return NaN; return h * 3600 + m * 60 + sec; } // Already-converted seconds are allowed only as actual numbers, not strings. if (typeof value === "number" && Number.isFinite(value) && value >= 0 && value < 24 * 3600) { return value; } return NaN; } function formatTimeOfDaySeconds(seconds) { if (!Number.isFinite(seconds)) return ""; const clamped = Math.max(0, Math.min(24 * 3600 - 1, seconds)); const h = Math.floor(clamped / 3600); const m = Math.floor((clamped % 3600) / 60); const s = Math.floor(clamped % 60); return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`; } function chooseTimeTickStep(spanSeconds) { const candidates = [ 5 * 60, 10 * 60, 15 * 60, 30 * 60, 60 * 60, 2 * 60 * 60, 3 * 60 * 60, 6 * 60 * 60, ]; return candidates.find(step => spanSeconds / step <= 6) || 12 * 60 * 60; } function timeTicksForScale(scale) { const domain = scale.domain(); const lo = Math.min(domain[0], domain[1]); const hi = Math.max(domain[0], domain[1]); const step = chooseTimeTickStep(Math.max(1, hi - lo)); const first = Math.ceil(lo / step) * step; const ticks = []; for (let t = first; t <= hi; t += step) ticks.push(t); if (!ticks.length) ticks.push(lo, hi); return ticks; } function formatTimeTick(seconds) { if (!Number.isFinite(seconds)) return ""; const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); if (m === 0) return `${String(h).padStart(2, "0")}h`; return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`; } function buildScales(data) { return AXES.map(ax => { if (ax.type === "number" || ax.type === "time") { const vals = data.map(d => ax.type === "time" ? parseTimeOfDaySeconds(d[ax.key]) : d[ax.key]) .filter(v => Number.isFinite(v)); const ext = d3.extent(vals); if (ext[0] == null) { return d3.scaleLinear() .domain([0, 1]) .range(ax.reverse ? [0, PLOT_H] : [PLOT_H, 0]); } const pad = ax.type === "time" ? ((ext[1] - ext[0]) === 0 ? 30 * 60 : 0) : ((ext[1] - ext[0]) * 0.05 || 1); return d3.scaleLinear() .domain([ext[0] - pad, ext[1] + pad]) .range(ax.reverse ? [0, PLOT_H] : [PLOT_H, 0]); } if (ax.type === "boolean") { const domain = [...new Set(data.map(d => d[ax.key]).filter(v => v !== null && v !== undefined && v !== ""))].sort(); return d3.scalePoint() .domain(domain) .range([0, PLOT_H]) .padding(0.35); } let domain = [...new Set(data.map(d => d[ax.key]).filter(v => v != null && v !== ""))].sort(); if (ax.type === "category") { domain = orderedCategoryDomain(ax, domain); } return d3.scalePoint() .domain(domain) .range([0, PLOT_H]) .padding(0.15); }); } function colorValueForAxis(d, ax) { const v = d[ax.key]; if (ax.type === "time") return parseTimeOfDaySeconds(v); return v; } function isContinuousColorAxis(ax) { return ax && (ax.type === "number" || ax.type === "time"); } function continuousInterpolator(name) { const key = `interpolate${name}`; return d3[key] || d3.interpolateViridis; } function formatColorLegendValue(value, ax) { if (!Number.isFinite(value)) return ""; if (ax && ax.type === "time") return formatTimeTick(value); return Math.abs(value) >= 100 ? d3.format(".3f")(value) : d3.format(".4g")(value); } function buildColorMaps(data) { Object.keys(_colorMaps).forEach(key => delete _colorMaps[key]); Object.keys(_continuousColorMaps).forEach(key => delete _continuousColorMaps[key]); AVAILABLE_AXES.forEach(ax => { const key = ax.key; if (isContinuousColorAxis(ax)) { const vals = data .map(d => colorValueForAxis(d, ax)) .filter(v => Number.isFinite(v)); const ext = d3.extent(vals); if (ext[0] != null) { const domain = ext[0] === ext[1] ? [ext[0] - 1, ext[1] + 1] : ext; _continuousColorMaps[key] = { axis: ax, domain, get: d3.scaleSequential(domain, continuousInterpolator(CONTINUOUS_COLORMAP)), }; } return; } const uniq = [...new Set(data.map(d => d[key]).filter(v => v != null && v !== ""))].sort(); const scale = d3.scaleOrdinal(d3.schemeDark2) .domain(uniq); _colorMaps[key] = { axis: ax, uniq, get: v => scale(v) }; }); } function updateColourByOptions() { const select = d3.select(colourBySelect); const current = COLOUR_BY; const colorable = AVAILABLE_AXES.filter(ax => ["category", "boolean", "number", "time"].includes(ax.type)); select.selectAll("option").remove(); colorable.forEach(ax => { select.append("option") .attr("value", ax.key) .property("selected", ax.key === current) .text(ax.label); }); if (!colorable.some(ax => ax.key === COLOUR_BY)) { COLOUR_BY = colorable.some(ax => ax.key === "bar_id") ? "bar_id" : colorable[0]?.key; select.property("value", COLOUR_BY); } } function lineColour(d) { const continuous = _continuousColorMaps[COLOUR_BY]; if (continuous) { const v = colorValueForAxis(d, continuous.axis); return Number.isFinite(v) ? continuous.get(v) : "#aaa"; } const m = _colorMaps[COLOUR_BY]; return m ? m.get(d[COLOUR_BY]) : "#777"; } function axisY(d, i) { const ax = AXES[i]; const v = d[ax.key]; if (ax.type === "number") { if (!Number.isFinite(v)) return null; return MARGIN.top + _scales[i](v); } if (ax.type === "time") { const seconds = parseTimeOfDaySeconds(v); if (!Number.isFinite(seconds)) return null; return MARGIN.top + _scales[i](seconds); } if (v == null || v === "") return null; return MARGIN.top + _scales[i](v); } // Store filters by axis key and data/category values rather than axis index. // This lets brushes persist when axes are reordered, reversed, or optional axes // are shown/hidden. function isNumericAxis(ax) { return ax.type === "number" || ax.type === "time"; } function cloneBrushState(state) { if (!state) return null; if (state.ranges || Number.isFinite(state.min)) { const ranges = state.ranges || [{ min: state.min, max: state.max }]; return { type: state.type, ranges: ranges.map(r => ({ min: r.min, max: r.max })) }; } return { type: state.type, values: [...(state.values || [])] }; } function mergeBrushStates(existing, incoming) { if (!existing) return cloneBrushState(incoming); if (!incoming) return cloneBrushState(existing); if (existing.type !== incoming.type) return cloneBrushState(incoming); if (incoming.ranges || existing.ranges || Number.isFinite(existing.min)) { const existingRanges = existing.ranges || [{ min: existing.min, max: existing.max }]; const incomingRanges = incoming.ranges || [{ min: incoming.min, max: incoming.max }]; return { type: existing.type, ranges: [...existingRanges, ...incomingRanges] .filter(r => Number.isFinite(r.min) && Number.isFinite(r.max)) .sort((a, b) => a.min - b.min), }; } return { type: existing.type, values: [...new Set([...(existing.values || []), ...(incoming.values || [])])], }; } function selectionToBrushState(ax, scale, selection) { if (!selection) return null; if (isNumericAxis(ax)) { const v0 = scale.invert(selection[0] - MARGIN.top); const v1 = scale.invert(selection[1] - MARGIN.top); return { type: ax.type, ranges: [{ min: Math.min(v0, v1), max: Math.max(v0, v1) }], }; } const domain = scale.domain(); const selectedValues = domain.filter(v => { const y = MARGIN.top + scale(v); return y >= selection[0] && y <= selection[1]; }); return { type: ax.type, values: selectedValues, }; } function brushStateToSelection(ax, scale, state) { if (!state) return null; if (isNumericAxis(ax)) { const ranges = state.ranges || (Number.isFinite(state.min) && Number.isFinite(state.max) ? [{ min: state.min, max: state.max }] : []); if (!ranges.length) return null; const ys = ranges.flatMap(r => [MARGIN.top + scale(r.min), MARGIN.top + scale(r.max)]); return [Math.min(...ys), Math.max(...ys)]; } const values = (state.values || []).filter(v => scale.domain().includes(v)); if (!values.length) return null; const ys = values.map(v => MARGIN.top + scale(v)); const pad = Math.max(6, PLOT_H / Math.max(1, scale.domain().length) * 0.35); return [ Math.max(MARGIN.top, Math.min(...ys) - pad), Math.min(MARGIN.top + PLOT_H, Math.max(...ys) + pad), ]; } function drawBrushRangeOverlays(svgSel) { svgSel.selectAll("g.brush-range-overlays").remove(); const overlayLayer = svgSel.append("g").attr("class", "brush-range-overlays"); AXES.forEach((ax, i) => { const state = _brushStateByKey[ax.key]; if (!state) return; const g = overlayLayer.append("g").attr("transform", `translate(${axX(i)},0)`); if (isNumericAxis(ax)) { const ranges = state.ranges || (Number.isFinite(state.min) && Number.isFinite(state.max) ? [{ min: state.min, max: state.max }] : []); ranges.forEach((r, idx) => { const y0 = MARGIN.top + _scales[i](r.min); const y1 = MARGIN.top + _scales[i](r.max); const y = Math.max(MARGIN.top, Math.min(y0, y1)); const h = Math.min(MARGIN.top + PLOT_H, Math.max(y0, y1)) - y; if (h <= 0) return; g.append("rect") .attr("class", `brush-range-overlay${idx > 0 ? " additive" : ""}`) .attr("x", -8) .attr("y", y) .attr("width", 16) .attr("height", h); }); return; } const values = (state.values || []).filter(v => _scales[i].domain().includes(v)); if (!values.length) return; // Group consecutive categories into ranges for clearer visualization const domain = _scales[i].domain(); const indices = values.map(v => domain.indexOf(v)).sort((a, b) => a - b); const ranges = []; let rangeStart = indices[0]; let rangeEnd = indices[0]; for (let j = 1; j < indices.length; j++) { if (indices[j] === rangeEnd + 1) { rangeEnd = indices[j]; } else { ranges.push({ start: rangeStart, end: rangeEnd }); rangeStart = indices[j]; rangeEnd = indices[j]; } } ranges.push({ start: rangeStart, end: rangeEnd }); const pad = Math.max(6, PLOT_H / Math.max(1, domain.length) * 0.35); ranges.forEach((range, idx) => { const yStart = MARGIN.top + _scales[i](domain[range.start]); const yEnd = MARGIN.top + _scales[i](domain[range.end]); const y = Math.max(MARGIN.top, Math.min(yStart, yEnd) - pad); const h = Math.min(MARGIN.top + PLOT_H, Math.max(yStart, yEnd) + pad) - y; g.append("rect") .attr("class", `brush-range-overlay${idx > 0 ? " additive" : ""}`) .attr("x", -8) .attr("y", y) .attr("width", 16) .attr("height", h); }); }); } function syncBrushPixelsFromState() { _brushes = AXES.map((ax, i) => brushStateToSelection(ax, _scales[i], _brushStateByKey[ax.key])); } function activeBrushCount() { return Object.values(_brushStateByKey).filter(Boolean).reduce((sum, state) => { if (state.ranges) return sum + state.ranges.length; if (state.values && state.values.length) return sum + 1; return sum; }, 0); } function isSelected(d) { return AXES.every(ax => { const state = _brushStateByKey[ax.key]; if (!state) return true; const v = d[ax.key]; if (isNumericAxis(ax)) { const value = ax.type === "time" ? parseTimeOfDaySeconds(v) : v; const ranges = state.ranges || (Number.isFinite(state.min) && Number.isFinite(state.max) ? [{ min: state.min, max: state.max }] : []); return Number.isFinite(value) && ranges.some(r => value >= r.min && value <= r.max); } return state.values && state.values.includes(v); }); } // `pts` is one entry per axis: a {x, y} object if the value is present, null if // missing. Draws each contiguous run as its own bezier path so a missing axis // breaks the line instead of bridging across it. function drawPath(pts, ctx) { let segment = []; const flush = () => { if (segment.length < 2) return; ctx.beginPath(); ctx.moveTo(segment[0].x, segment[0].y); for (let k = 0; k < segment.length - 1; k++) { const p0 = segment[k], p1 = segment[k + 1]; const dx = (p1.x - p0.x) / 3; ctx.bezierCurveTo(p0.x + dx, p0.y, p1.x - dx, p1.y, p1.x, p1.y); } ctx.stroke(); }; for (const p of pts) { if (p == null) { flush(); segment = []; } else segment.push(p); } flush(); } function redraw() { const ctx = canvas.getContext("2d"); const anyBrush = activeBrushCount() > 0; ctx.clearRect(0, 0, W, H); const buildPts = d => AXES.map((_, i) => { const y = axisY(d, i); return y == null ? null : { x: axX(i), y }; }); // Pass 1: unselected as faint grey if (anyBrush) { ctx.globalAlpha = 0.05; ctx.lineWidth = Math.max(0.2, LINE_WIDTH * 0.5); ctx.strokeStyle = "#aaa"; _data.forEach(d => { if (isSelected(d)) return; drawPath(buildPts(d), ctx); }); } // Pass 2: selected (or all) lines, coloured ctx.globalAlpha = anyBrush ? 0.6 : 0.35; ctx.lineWidth = LINE_WIDTH; _data.forEach(d => { if (anyBrush && !isSelected(d)) return; ctx.strokeStyle = lineColour(d); drawPath(buildPts(d), ctx); }); ctx.globalAlpha = 1; updateDataTable(); } function axisDragBehavior() { return d3.drag() .on("start", function (event, ax) { DRAG_AXIS_KEY = ax.key; DRAG_AXIS_X = baseAxX(AXES.findIndex(a => a.key === ax.key)); d3.select(this).style("cursor", "grabbing"); d3.select(this.parentNode) .raise() .attr("opacity", 0.88) .select("line") .attr("stroke", "#777") .attr("stroke-width", 1.6) .attr("stroke-dasharray", "3,2"); }) .on("drag", function (event, ax) { const [pointerX] = d3.pointer(event.sourceEvent, svgNode); DRAG_AXIS_KEY = ax.key; DRAG_AXIS_X = Math.max(MARGIN.left, Math.min(MARGIN.left + PLOT_W, pointerX)); // Move only the SVG axis overlay while dragging. Do not redraw the canvas // on every mousemove; with thousands of lines that is unnecessarily laggy. // The lines stay in their previous positions and the full plot snaps/redraws // once on release. d3.select(this.parentNode) .attr("transform", `translate(${DRAG_AXIS_X},${MARGIN.top})`); }) .on("end", function (event, ax) { const [pointerX] = d3.pointer(event.sourceEvent, svgNode); const oldIndex = AXES.findIndex(a => a.key === ax.key); const newIndex = Math.max( 0, Math.min( AXES.length - 1, Math.round(((pointerX - MARGIN.left) / PLOT_W) * (AXES.length - 1)) ) ); if (oldIndex >= 0 && newIndex !== oldIndex) { const moved = AXES.splice(oldIndex, 1)[0]; AXES.splice(newIndex, 0, moved); AXIS_ORDER = AXES.map(a => a.key); } DRAG_AXIS_KEY = null; DRAG_AXIS_X = null; d3.select(this).style("cursor", "grab"); d3.select(this.parentNode).attr("opacity", 1); // Snap all axes, brushes, table columns, and exported column order to the // new position. Existing brushes are preserved by key. rebuildPlot({ resetBrushes: false }); }); } function drawAxes(svgSel) { svgSel.selectAll("g.axis-g").remove(); AXES.forEach((ax, i) => { const x = axX(i); const g = svgSel.append("g").attr("class", "axis-g") .attr("transform", `translate(${x},${MARGIN.top})`) .attr("data-axis-key", ax.key); g.append("line") .attr("y1", 0) .attr("y2", PLOT_H) .attr("stroke", "#c0c0c0") .attr("stroke-width", 1); // Drag handle area above the axis. Drag this label region to reorder axes. // Reverse buttons are separate so button clicks do not start a drag. const handle = g.append("g") .datum(ax) .attr("class", "axis-drag-handle") .style("cursor", "grab") .call(axisDragBehavior()); handle.append("rect") .attr("x", -38) .attr("y", -43) .attr("width", 76) .attr("height", 18) .attr("rx", 4) .attr("fill", "transparent") .attr("stroke", "transparent"); handle.append("text").attr("y", -30).attr("text-anchor", "middle") .attr("font-size", AXIS_TITLE_FONT_SIZE).attr("font-weight", 700).attr("fill", "#333") .attr("stroke", "white").attr("stroke-width", 3).attr("stroke-linejoin", "round") .attr("paint-order", "stroke").text(ax.label); // Compact modern gray icon button directly underneath reversible axis labels. // The button is outside the drag handle and stops pointer/click propagation. if (isAxisReversible(ax)) { const button = g.append("g") .datum(ax) .attr("class", "axis-reverse-btn") .attr("transform", "translate(0,-16)") .style("cursor", "pointer") .on("pointerdown", function (event) { event.stopPropagation(); }) .on("mousedown", function (event) { event.stopPropagation(); }) .on("click", function (event, ax) { event.stopPropagation(); toggleAxisReverse(ax.key); }); button.append("rect") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("rx", 5) .attr("fill", ax.reverse ? "#d9d9d9" : "#f7f7f7") .attr("stroke", ax.reverse ? "#8f8f8f" : "#c7c7c7") .attr("stroke-width", 0.9); // A subtle inner shadow for the pressed state; a soft highlight for the normal state. if (ax.reverse) { button.append("path") .attr("d", "M -5 -4 Q -5 -5 -4 -5 L 5 -5") .attr("fill", "none") .attr("stroke", "#9a9a9a") .attr("stroke-width", 1.2) .attr("stroke-linecap", "round") .attr("opacity", 0.75); button.append("path") .attr("d", "M -5 -2 Q -5 -5 -2 -5") .attr("fill", "none") .attr("stroke", "#b0b0b0") .attr("stroke-width", 1.4) .attr("stroke-linecap", "round") .attr("opacity", 0.55); } else { button.append("path") .attr("d", "M -4 -5 L 4 -5") .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 1.2) .attr("stroke-linecap", "round") .attr("opacity", 0.9); } button.append("text") .attr("text-anchor", "middle") .attr("dy", "0.34em") .attr("font-size", AXIS_CONTROL_FONT_SIZE) .attr("font-weight", 600) .attr("fill", ax.reverse ? "#333" : "#666") .text(axisDirectionIcon(ax)); button.append("title") .text(ax.reverse ? `${ax.label} is reversed. Click to restore normal direction.` : `${ax.label} is normal. Click to reverse axis.`); } // Categorical helper actions: // ≡ orders categories according to the current brushes on other axes. // ↺ resets the category order to the default natural order. if (isAxisOrderable(ax)) { const makeActionButton = (tx, label, title, onClick) => { const btn = g.append("g") .attr("class", "category-action-btn") .attr("transform", `translate(${tx},-16)`) .style("cursor", "pointer") .on("pointerdown", function (event) { event.stopPropagation(); }) .on("mousedown", function (event) { event.stopPropagation(); }) .on("click", function (event) { event.stopPropagation(); onClick(); }); btn.append("rect") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("rx", 5) .attr("fill", "#f7f7f7") .attr("stroke", "#c7c7c7") .attr("stroke-width", 0.9); btn.append("text") .attr("text-anchor", "middle") .attr("dy", "0.34em") .attr("font-size", AXIS_CONTROL_FONT_SIZE) .attr("font-weight", 700) .attr("fill", "#666") .text(label); btn.append("title").text(title); }; makeActionButton(-11, "≡", `Order ${ax.label} categories according to the current brushes on other axes.`, () => orderCategoryFromCurrentBrush(ax.key)); makeActionButton(11, "↺", `Reset ${ax.label} categories to the default order.`, () => resetCategoryOrder(ax.key)); } if (ax.type === "number" || ax.type === "time") { const ticks = ax.type === "time" ? timeTicksForScale(_scales[i]) : _scales[i].ticks(5); ticks.forEach(t => { const y = _scales[i](t); const tickLabel = ax.type === "time" ? formatTimeTick(t) : t; g.append("line").attr("x1", -3).attr("x2", 3).attr("y1", y).attr("y2", y).attr("stroke", "#bbb"); g.append("text").attr("x", i === 0 ? 8 : -8).attr("y", y).attr("dy", "0.35em") .attr("text-anchor", i === 0 ? "start" : "end") .attr("font-size", AXIS_TICK_FONT_SIZE).attr("fill", "#666") .attr("stroke", "white").attr("stroke-width", 2.5).attr("stroke-linejoin", "round") .attr("paint-order", "stroke").text(tickLabel); }); } else { const domain = _scales[i].domain(); // Thin out labels if there are too many to read const stride = Math.max(1, Math.ceil(domain.length / 30)); domain.forEach((v, idx) => { const y = _scales[i](v); g.append("line").attr("x1", -3).attr("x2", 3).attr("y1", y).attr("y2", y).attr("stroke", "#bbb"); if (idx % stride !== 0) return; g.append("text").attr("x", i === 0 ? 8 : -8).attr("y", y).attr("dy", "0.35em") .attr("text-anchor", i === 0 ? "start" : "end") .attr("font-size", AXIS_TICK_FONT_SIZE) .attr("fill", "#666") .attr("stroke", "white").attr("stroke-width", 2.5).attr("stroke-linejoin", "round") .attr("paint-order", "stroke").text(v); }); } }); } function setupBrushes(svgSel) { _brushFns.length = 0; syncBrushPixelsFromState(); AXES.forEach((ax, i) => { const brush = d3.brushY() .extent([[-8, MARGIN.top], [8, MARGIN.top + PLOT_H]]) .on("start brush end", function (event) { if (IS_RESTORING_BRUSHES) return; const additive = !!(event.sourceEvent && (event.sourceEvent.shiftKey || event.sourceEvent.metaKey || event.sourceEvent.ctrlKey)); if (event.type === "start") { _pendingAdditiveBrushStateByKey[ax.key] = additive ? cloneBrushState(_brushStateByKey[ax.key]) : null; } const nextState = selectionToBrushState(ax, _scales[i], event.selection); _brushes[i] = event.selection; _brushStateByKey[ax.key] = additive ? mergeBrushStates(_pendingAdditiveBrushStateByKey[ax.key], nextState) : nextState; updateResetButton(); drawBrushRangeOverlays(d3.select(svgNode)); redraw(); if (event.type === "end" && additive) { IS_RESTORING_BRUSHES = true; d3.select(this).call(brush.move, null); IS_RESTORING_BRUSHES = false; syncBrushPixelsFromState(); drawBrushRangeOverlays(d3.select(svgNode)); redraw(); } }); _brushFns.push(brush); const bg = svgSel.append("g").attr("class", "axis-brush") .attr("transform", `translate(${axX(i)},0)`) .call(brush); // For multi-range filters and non-contiguous categorical selections, // the semantic filter state is shown by overlay rectangles only. // The native d3 brush handle is only restored for simple single-range selections. const state = _brushStateByKey[ax.key]; let shouldRestoreBrush = false; if (_brushes[i] && state) { if (isNumericAxis(ax)) { const ranges = state.ranges || (Number.isFinite(state.min) && Number.isFinite(state.max) ? [{ min: state.min, max: state.max }] : []); shouldRestoreBrush = ranges.length <= 1; } else { // For categorical, check if selection is contiguous const values = (state.values || []).filter(v => _scales[i].domain().includes(v)); if (values.length > 0) { const domain = _scales[i].domain(); const indices = values.map(v => domain.indexOf(v)).sort((a, b) => a - b); // Check if all indices are consecutive const isContiguous = indices.every((idx, i) => i === 0 || idx === indices[i - 1] + 1); shouldRestoreBrush = isContiguous; } } } if (shouldRestoreBrush) { IS_RESTORING_BRUSHES = true; bg.call(brush.move, _brushes[i]); IS_RESTORING_BRUSHES = false; } bg.on("dblclick", function () { _brushes[i] = null; _brushStateByKey[ax.key] = null; IS_RESTORING_BRUSHES = true; d3.select(this).call(brush.move, null); IS_RESTORING_BRUSHES = false; updateResetButton(); drawBrushRangeOverlays(d3.select(svgNode)); redraw(); }); }); drawBrushRangeOverlays(svgSel); } function resetBrushes() { _brushStateByKey = {}; _brushes.fill(null); d3.select(svgNode).selectAll(".axis-brush").each(function (_, i) { d3.select(this).call(_brushFns[i].move, null); }); d3.select(svgNode).selectAll("g.brush-range-overlays").remove(); updateResetButton(); redraw(); } function updateResetButton() { resetBtn.style.display = activeBrushCount() > 0 ? "inline-block" : "none"; } function buildLegend() { const leg = d3.select(legendEl); leg.selectAll("*").remove(); const top = leg.append("div").attr("class", "legend-top"); const continuous = _continuousColorMaps[COLOUR_BY]; if (continuous) { const wrap = top.append("div").attr("class", "legend-continuous-wrap"); wrap.append("div") .attr("class", "legend-title") .text(`${continuous.axis.label} · ${CONTINUOUS_COLORMAP}`); const stack = wrap.append("div").attr("class", "legend-gradient-stack"); const canvas = stack.append("canvas") .attr("class", "legend-gradient") .attr("width", 260) .attr("height", 12) .node(); const ctx = canvas.getContext("2d"); const interpolator = continuousInterpolator(CONTINUOUS_COLORMAP); for (let x = 0; x < canvas.width; x++) { ctx.fillStyle = interpolator(x / (canvas.width - 1)); ctx.fillRect(x, 0, 1, canvas.height); } const labels = stack.append("div").attr("class", "legend-gradient-labels"); labels.append("span").text(formatColorLegendValue(continuous.domain[0], continuous.axis)); labels.append("span").text(formatColorLegendValue((continuous.domain[0] + continuous.domain[1]) / 2, continuous.axis)); labels.append("span").text(formatColorLegendValue(continuous.domain[1], continuous.axis)); return; } const m = _colorMaps[COLOUR_BY]; if (!m) return; const group = top.append("div").attr("class", "legend-group"); group.append("div") .attr("class", "legend-title") .text(m.axis ? m.axis.label : COLOUR_BY); const content = group.append("div").attr("class", "legend-content"); const items = m.uniq.length > 30 ? m.uniq.slice(0, 30) : m.uniq; items.forEach(v => { const step = content.append("div").attr("class", "legend-step"); step.append("div") .attr("class", "legend-step-sq") .style("background", m.get(v)); step.append("span").text(v); }); if (m.uniq.length > 30) { content.append("span") .style("font-size", `${EXPORT_LEGEND_FONT_SIZE}px`) .style("color", "#999") .text(`(+${m.uniq.length - 30} more)`); } } function selectedRows() { const anyBrush = activeBrushCount() > 0; return anyBrush ? _data.filter(d => isSelected(d)) : _data; } function formatTableValue(v, col = null) { if (v == null || v === "") return ""; // Keep date/time/category identifiers as literal text in the table. if (col && (col.key === "beamtime_date" || col.key === "measurement_time")) return String(v); if (Number.isFinite(v)) return Math.abs(v) >= 100 ? d3.format(".3f")(v) : d3.format(".4g")(v); return v; } function compareTableValues(a, b, key) { const av = a[key]; const bv = b[key]; const aFinite = Number.isFinite(av); const bFinite = Number.isFinite(bv); // Keep missing/NaN values at the bottom for both ascending and descending. if (!aFinite && (av == null || av === "" || Number.isNaN(av))) return 1; if (!bFinite && (bv == null || bv === "" || Number.isNaN(bv))) return -1; if (aFinite && bFinite) return d3.ascending(av, bv); return d3.ascending(String(av ?? ""), String(bv ?? "")); } function sortedRows(rows) { if (!TABLE_SORT.key) return rows; const sorted = [...rows].sort((a, b) => compareTableValues(a, b, TABLE_SORT.key)); return TABLE_SORT.direction === "desc" ? sorted.reverse() : sorted; } function toggleTableSort(key) { if (TABLE_SORT.key === key) { TABLE_SORT.direction = TABLE_SORT.direction === "asc" ? "desc" : "asc"; } else { TABLE_SORT = { key, direction: "asc" }; } updateDataTable(); } function sortIndicator(key) { if (TABLE_SORT.key !== key) return ""; return TABLE_SORT.direction === "asc" ? " ▲" : " ▼"; } function readableTextColor(bg) { const c = d3.color(bg); if (!c) return "#222"; // Relative luminance approximation for choosing black/white text. const luminance = (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255; return luminance > 0.62 ? "#222" : "#fff"; } function updateDataTable() { const rows = selectedRows(); const displayRows = sortedRows(rows); const maxRows = 500; const summary = d3.select(tableSummaryEl); const sortLabel = TABLE_SORT.key ? `${AXES.find(ax => ax.key === TABLE_SORT.key)?.label ?? TABLE_SORT.key} ${TABLE_SORT.direction}` : ""; const filterCount = activeBrushCount(); summary.text( `${filterCount ? `${filterCount} active filter${filterCount === 1 ? "" : "s"} · ` : ""}` + `Showing ${Math.min(displayRows.length, maxRows)} of ${displayRows.length} selected rows` + (displayRows.length < _data.length ? ` (${_data.length} total)` : "") + (sortLabel ? ` · sorted by ${sortLabel}` : "") ); const tableWrap = d3.select(dataTableEl); tableWrap.selectAll("*").remove(); let cols = getCurrentTableColumns().map(ax => ({ key: ax.key, label: ax.label, type: ax.type })); // Defensive: Date should be available whenever the CSV has beamtime_date, // even if a previous axis-order operation accidentally omitted it. if (_data.length && Object.prototype.hasOwnProperty.call(_data[0], "beamtime_date") && !cols.some(c => c.key === "beamtime_date")) { cols = [{ key: "beamtime_date", label: "Date", type: "category" }, ...cols]; } const table = tableWrap.append("table").attr("class", "data-table"); const thead = table.append("thead"); const tbody = table.append("tbody"); thead.append("tr") .selectAll("th") .data(cols) .join("th") .attr("class", d => `sortable ${d.key === "beamtime_date" ? "date-col " : ""}${(d.type === "number" || d.type === "time") ? "num" : d.type === "boolean" ? "bool" : "cat"}`) .attr("title", "Click to sort") .style("box-shadow", d => d.key === COLOUR_BY ? "inset 0 -2px 0 #999" : null) .on("click", (_, d) => toggleTableSort(d.key)) .html(d => `${d.label}${sortIndicator(d.key)}`); tbody.selectAll("tr") .data(displayRows.slice(0, maxRows)) .join("tr") .selectAll("td") .data(row => cols.map(col => ({ row, col, value: row[col.key] }))) .join("td") .attr("class", d => `${d.col.key === "beamtime_date" ? "date-col " : ""}${(d.col.type === "number" || d.col.type === "time") ? "num" : d.col.type === "boolean" ? "bool" : "cat"}`) .style("background", d => d.col.key === COLOUR_BY ? lineColour(d.row) : null) .style("color", d => d.col.key === COLOUR_BY ? readableTextColor(lineColour(d.row)) : null) .style("font-weight", d => d.col.key === COLOUR_BY ? 600 : null) .text(d => formatTableValue(d.value, d.col)); } function setColourBy(val) { COLOUR_BY = val; buildColorMaps(_data); buildLegend(); redraw(); } // Recalculate derived axes. Called after loading data and whenever an axis // Rebuild the axis layer and brushes when the optional axis is toggled or when // an axis orientation changes. function rebuildPlot({ resetBrushes = false } = {}) { if (resetBrushes) _brushStateByKey = {}; const activeKeys = new Set(AXES.map(ax => ax.key)); Object.keys(_brushStateByKey).forEach(key => { if (!activeKeys.has(key)) delete _brushStateByKey[key]; }); _brushes = new Array(AXES.length).fill(null); _brushFns.length = 0; _scales = buildScales(_data); syncBrushPixelsFromState(); const svgSel = d3.select(svgNode); svgSel.selectAll("*").remove(); drawAxes(svgSel); setupBrushes(svgSel); updateResetButton(); redraw(); } function mergeAxisOrderWithDefaults() { const defaults = defaultAxisOrderForCurrentOptions(); const existing = AXIS_ORDER.filter(key => defaults.includes(key)); defaults.forEach((key, defaultIndex) => { if (existing.includes(key)) return; const previousDefaultKeys = defaults.slice(0, defaultIndex).filter(k => existing.includes(k)); const insertAfterKey = previousDefaultKeys.length ? previousDefaultKeys[previousDefaultKeys.length - 1] : null; if (insertAfterKey == null) existing.unshift(key); else existing.splice(existing.indexOf(insertAfterKey) + 1, 0, key); }); AXIS_ORDER = existing; } function orderCategoryFromCurrentBrush(key) { const allValues = naturalCategoryDomain([...new Set(_data.map(d => d[key]).filter(v => v != null && v !== ""))]); const filteredValues = filteredCategoryValuesFromOtherBrushes(key); if (!filteredValues.size) { CATEGORY_CUSTOM_ORDERS[key] = allValues; } else { const selected = allValues.filter(v => filteredValues.has(v)); const rest = allValues.filter(v => !filteredValues.has(v)); CATEGORY_CUSTOM_ORDERS[key] = [...selected, ...rest]; } rebuildPlot({ resetBrushes: false }); } function resetCategoryOrder(key) { delete CATEGORY_CUSTOM_ORDERS[key]; rebuildPlot({ resetBrushes: false }); } function updatePlotDimensions() { PLOT_W = W - MARGIN.left - MARGIN.right; PLOT_H = H - MARGIN.top - MARGIN.bottom; } function setCanvasSize(canvas, w, h) { const dpr = window.devicePixelRatio || 1; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; canvas.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0); } function responsivePlotWidth() { const available = Math.floor(window.innerWidth - 56); return Math.max(900, available); } function resizePlot(newHeight, newWidth = null) { H = Math.max(260, Math.min(1200, +newHeight || H)); W = Math.max(900, Math.floor(newWidth || responsivePlotWidth())); updatePlotDimensions(); tableScrollEl.style.setProperty("--table-height", `${TABLE_H}px`); const wrap = pcWrapEl; if (!canvas || !svgNode || !wrap) return; setCanvasSize(canvas, W, H); svgNode.setAttribute("width", W); svgNode.setAttribute("height", H); wrap.style.width = `${W}px`; wrap.style.height = `${H}px`; } function resetAxisOrder() { AXIS_ORDER = defaultAxisOrderForCurrentOptions(); AXES = getCurrentAxes(); rebuildPlot({ resetBrushes: false }); } function toggleAxisReverse(key) { const ax = AXES.find(ax => ax.key === key); if (!ax || !isAxisReversible(ax)) return; AXIS_REVERSE_BY_KEY[key] = !isAxisReversed(key); ax.reverse = AXIS_REVERSE_BY_KEY[key]; const availableAx = AVAILABLE_AXES.find(a => a.key === key); if (availableAx) availableAx.reverse = AXIS_REVERSE_BY_KEY[key]; rebuildPlot({ resetBrushes: false }); } const container = document.createElement("div"); container.style.cssText = "font-family:Helvetica,Arial,sans-serif;font-size:10px;color:#222;"; // Toolbar const toolbarDiv = container.appendChild(document.createElement("div")); toolbarDiv.className = "toolbar"; const titleEl = toolbarDiv.appendChild(document.createElement("h2")); titleEl.textContent = "GIWAXS Stage Positions — Parallel Coordinates"; const toolbarControls = toolbarDiv.appendChild(document.createElement("div")); toolbarControls.className = "toolbar-controls"; // Color-by label + select (options populated later by updateColourByOptions) const colourByWrap = toolbarControls.appendChild(document.createElement("label")); colourByWrap.className = "toolbar-label"; colourByWrap.appendChild(document.createTextNode("Color by ")); colourBySelect = colourByWrap.appendChild(document.createElement("select")); colourBySelect.className = "toolbar-select"; colourBySelect.addEventListener("change", () => setColourBy(colourBySelect.value)); // Reset filters button resetBtn = toolbarControls.appendChild(document.createElement("button")); resetBtn.className = "toolbar-button"; resetBtn.textContent = "Reset filters"; resetBtn.style.display = "none"; resetBtn.addEventListener("click", () => resetBrushes()); // Subtitle const subtitleEl = container.appendChild(document.createElement("p")); subtitleEl.className = "subtitle"; subtitleEl.textContent = "Each line = one scan · drag an axis to filter · Shift/Ctrl/⌘-drag to add another range on the same axis · double-click axis to clear filter · drag axis labels to reorder; use ≡ on categorical axes to order categories by current brushes and ↺ to reset; click ⇕ under numeric/time labels to reverse"; // Chart wrap pcWrapEl = container.appendChild(document.createElement("div")); // Legend legendEl = container.appendChild(document.createElement("div")); legendEl.id = "legend"; legendEl.style.cssText = "margin-top:8px; display:flex; flex-wrap:wrap; gap:8px;"; // Table summary + scroll + table tableSummaryEl = container.appendChild(document.createElement("div")); tableSummaryEl.className = "table-summary"; tableScrollEl = container.appendChild(document.createElement("div")); tableScrollEl.className = "table-scroll"; dataTableEl = tableScrollEl.appendChild(document.createElement("div")); _data = rawData .map(d => ({ ...d, bar_id: String(d.bar_id ?? "").trim(), thin_film_id: String(d.thin_film_id ?? "").trim(), beamtime_date: d.beamtime_date instanceof Date ? d.beamtime_date.toISOString().slice(0, 10) : String(d.beamtime_date ?? "").trim(), measurement_time: String(d.measurement_time ?? "").trim(), measured: d.measured === true || d.measured === "True", })); ORIGINAL_COLUMNS = Object.keys(rawData[0] || {}); if (!ORIGINAL_COLUMNS.includes("bar_id")) ORIGINAL_COLUMNS = ["bar_id", ...ORIGINAL_COLUMNS]; BASE_AXES.forEach(ax => { COLUMN_TYPES[ax.key] = ax.type; }); applyColumnTypesToData(); rebuildAvailableAxesFromColumns(); applyDefaultAxisOrientations(); VISIBLE_TABLE_COLUMN_KEYS = [...VISIBLE_AXIS_KEYS]; if (!AXIS_ORDER.length) AXIS_ORDER = defaultAxisOrderForCurrentOptions(); AXES = getCurrentAxes(); W = Math.max(800, Math.floor(width - 40)); updatePlotDimensions(); updateColourByOptions(); buildColorMaps(_data); _scales = buildScales(_data); updatePlotDimensions(); canvas = document.createElement("canvas"); setCanvasSize(canvas, W, H); canvas.style.position = "absolute"; svgNode = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgNode.setAttribute("width", W); svgNode.setAttribute("height", H); svgNode.style.cssText = "position:absolute; top:0; left:0;"; tableScrollEl.style.setProperty("--table-height", `${TABLE_H}px`); pcWrapEl.style.cssText = `position:relative; display:inline-block; width:${W}px; height:${H}px; max-width:100%;`; pcWrapEl.appendChild(canvas); pcWrapEl.appendChild(svgNode); const svgSel = d3.select(svgNode); syncBrushPixelsFromState(); drawAxes(svgSel); setupBrushes(svgSel); buildLegend(); redraw(); return container; }