diff --git a/index.html b/index.html index 1153c9b..08b4e00 100644 --- a/index.html +++ b/index.html @@ -210,30 +210,26 @@

Log Source

-
@@ -288,6 +284,27 @@

View Controls

+
+

Math Channels

+ +
+

+ Create virtual sensors using formulas (e.g. Boost, HP). +

+ + +
+
+

Anomaly Scanner

@@ -853,6 +870,57 @@

XY Scatter Analysis

+ +
@@ -892,5 +960,6 @@

XY Scatter Analysis

+ diff --git a/src/mathchannels.js b/src/mathchannels.js new file mode 100644 index 0000000..4b01219 --- /dev/null +++ b/src/mathchannels.js @@ -0,0 +1,490 @@ +import { AppState } from './config.js'; +import { UI } from './ui.js'; + +class MathChannels { + #definitions; + + constructor() { + this.#definitions = this.#getDefinitions(); + this.#initWindowBindings(); + } + + #getDefinitions() { + return [ + { + id: 'acceleration', + name: 'Acceleration (m/s²) [0-100 Logic]', + description: + 'Calculates acceleration from Speed. Use window to smooth noise.', + inputs: [ + { name: 'speed', label: 'Speed (km/h)' }, + { + name: 'window', + label: 'Smoothing Window (Samples)', + isConstant: true, + defaultValue: 4, + }, + ], + customProcess: (sourceData, constants) => { + const windowSize = Math.max(1, Math.round(constants[0])); + const result = []; + + for (let i = windowSize; i < sourceData.length; i++) { + const p1 = sourceData[i - windowSize]; + const p2 = sourceData[i]; + + const dt = (p2.x - p1.x) / 1000; + if (dt <= 0) continue; + + const dv = (p2.y - p1.y) / 3.6; + + const accel = dv / dt; + + result.push({ + x: p2.x, + y: accel, + }); + } + return result; + }, + }, + { + id: 'smoothing', + name: 'Smooth Signal (Moving Average)', + description: 'Reduces noise by averaging the last N samples.', + inputs: [ + { name: 'source', label: 'Signal to Smooth' }, + { + name: 'window', + label: 'Window Size (Samples)', + isConstant: true, + defaultValue: 5, + }, + ], + customProcess: (sourceData, constants) => { + const windowSize = Math.max(1, Math.round(constants[0])); + const smoothed = []; + + for (let i = 0; i < sourceData.length; i++) { + let sum = 0; + let count = 0; + + for (let j = 0; j < windowSize; j++) { + if (i - j >= 0) { + sum += sourceData[i - j].y; + count++; + } + } + + smoothed.push({ + x: sourceData[i].x, + y: sum / count, + }); + } + return smoothed; + }, + }, + { + id: 'est_power_kgh', + name: 'Estimated Power (HP) [Source: kg/h]', + description: + 'Converts kg/h to g/s, then estimates HP. (MAF / 3.6 * Factor)', + inputs: [ + { name: 'maf', label: 'Air Mass Flow (kg/h)' }, + { + name: 'factor', + label: 'Factor (Diesel ~1.35, Petrol ~1.25)', + isConstant: true, + defaultValue: 1.35, + }, + ], + formula: (values) => (values[0] / 3.6) * values[1], + }, + { + id: 'est_power_gs', + name: 'Estimated Power (HP) [Source: g/s]', + description: 'Direct g/s calculation. (MAF * Factor)', + inputs: [ + { name: 'maf', label: 'Air Mass Flow (g/s)' }, + { + name: 'factor', + label: 'Factor (Diesel ~1.35, Petrol ~1.25)', + isConstant: true, + defaultValue: 1.35, + }, + ], + formula: (values) => values[0] * values[1], + }, + { + id: 'power_from_torque', + name: 'Calculated Power (HP) [Source: Torque]', + description: + 'Calculates HP from Torque (Nm) and RPM. (Torque * RPM / 7127)', + inputs: [ + { name: 'torque', label: 'Torque (Nm)' }, + { name: 'rpm', label: 'Engine RPM' }, + ], + formula: (values) => (values[0] * values[1]) / 7127, + }, + { + id: 'boost', + name: 'Boost Pressure (Bar)', + description: 'MAP - Baro (Manifold - Atmospheric)', + inputs: [ + { name: 'map', label: 'Intake Manifold Pressure' }, + { name: 'baro', label: 'Atmospheric Pressure' }, + ], + formula: (values) => values[0] - values[1], + }, + { + id: 'afr_error', + name: 'AFR Error', + description: 'Commanded AFR - Measured AFR', + inputs: [ + { name: 'commanded', label: 'AFR Commanded' }, + { name: 'measured', label: 'AFR Measured' }, + ], + formula: (values) => values[0] - values[1], + }, + { + id: 'pressure_ratio', + name: 'Pressure Ratio', + description: 'MAP / Baro', + inputs: [ + { name: 'map', label: 'Intake Manifold Pressure' }, + { name: 'baro', label: 'Atmospheric Pressure' }, + ], + formula: (values) => (values[1] !== 0 ? values[0] / values[1] : 0), + }, + { + id: 'multiply_const', + name: 'Multiply by Constant', + description: 'Signal * Factor (Generic helper)', + inputs: [ + { name: 'source', label: 'Source Signal' }, + { + name: 'factor', + label: 'Factor', + isConstant: true, + defaultValue: 1.0, + }, + ], + formula: (values) => values[0] * values[1], + }, + ]; + } + + #initWindowBindings() { + window.openMathModal = () => this.#openModal(); + window.closeMathModal = () => this.#closeModal(); + window.onMathFormulaChange = () => this.#onFormulaChange(); + window.createMathChannel = () => this.#executeCreation(); + } + + createChannel(fileIndex, formulaId, inputMapping, newChannelName) { + const file = AppState.files[fileIndex]; + if (!file) throw new Error('No file selected or loaded.'); + + const definition = this.#definitions.find((d) => d.id === formulaId); + if (!definition) throw new Error('Invalid formula definition.'); + + if (definition.customProcess) { + return this.#executeCustomProcess( + file, + definition, + inputMapping, + newChannelName + ); + } + + const sourceSignals = []; + let masterTimeBase = null; + + definition.inputs.forEach((input, idx) => { + if (input.isConstant) { + const val = parseFloat(inputMapping[idx]); + if (isNaN(val)) + throw new Error(`Invalid constant value for ${input.label}`); + sourceSignals.push({ isConstant: true, value: val }); + } else { + const signalName = inputMapping[idx]; + const signalData = file.signals[signalName]; + + if (!signalData) + throw new Error(`Signal '${signalName}' not found in file.`); + + sourceSignals.push({ isConstant: false, data: signalData }); + + if (!masterTimeBase) masterTimeBase = signalData; + } + }); + + if (!masterTimeBase) + throw new Error('At least one input must be a signal.'); + + const resultData = []; + let min = Infinity; + let max = -Infinity; + + for (let i = 0; i < masterTimeBase.length; i++) { + const currentTime = masterTimeBase[i].x; + const currentValues = []; + + sourceSignals.forEach((source) => { + if (source.isConstant) { + currentValues.push(source.value); + } else { + const val = this.#interpolate(source.data, currentTime); + currentValues.push(val); + } + }); + + const calculatedY = definition.formula(currentValues); + + if (calculatedY < min) min = calculatedY; + if (calculatedY > max) max = calculatedY; + + resultData.push({ + x: currentTime, + y: calculatedY, + }); + } + + const finalName = newChannelName || `Math: ${definition.name}`; + + file.signals[finalName] = resultData; + + if (!file.metadata) file.metadata = {}; + file.metadata[finalName] = { + min: min, + max: max, + unit: 'Math', + }; + + if (!file.availableSignals.includes(finalName)) { + file.availableSignals.push(finalName); + file.availableSignals.sort(); + } + + return finalName; + } + + #executeCustomProcess(file, definition, inputMapping, newChannelName) { + // Extract inputs strictly for custom processor + const signals = []; + const constants = []; + + definition.inputs.forEach((input, idx) => { + if (input.isConstant) { + const val = parseFloat(inputMapping[idx]); + if (isNaN(val)) + throw new Error(`Invalid constant value for ${input.label}`); + constants.push(val); + } else { + const signalName = inputMapping[idx]; + const signalData = file.signals[signalName]; + if (!signalData) throw new Error(`Signal '${signalName}' not found.`); + signals.push(signalData); + } + }); + + // For smoothing, we assume 1 signal input. + // Generalizing this would require more complex mapping, but for now: + if (signals.length === 0) + throw new Error('Custom process requires at least one signal.'); + + // Run the custom processor logic defined in #getDefinitions + const resultData = definition.customProcess(signals[0], constants); + + return this.#finalizeChannel( + file, + resultData, + newChannelName || `Math: ${definition.name}` + ); + } + + #finalizeChannel(file, resultData, finalName) { + let min = Infinity; + let max = -Infinity; + + for (const point of resultData) { + if (point.y < min) min = point.y; + if (point.y > max) max = point.y; + } + + file.signals[finalName] = resultData; + + if (!file.metadata) file.metadata = {}; + file.metadata[finalName] = { + min: min, + max: max, + unit: 'Math', + }; + + if (!file.availableSignals.includes(finalName)) { + file.availableSignals.push(finalName); + file.availableSignals.sort(); + } + + return finalName; + } + + #interpolate(data, targetTime) { + if (!data || data.length === 0) return 0; + + if (targetTime <= data[0].x) return parseFloat(data[0].y); + if (targetTime >= data[data.length - 1].x) + return parseFloat(data[data.length - 1].y); + + let left = 0; + let right = data.length - 1; + + while (left <= right) { + const mid = Math.floor((left + right) / 2); + if (data[mid].x < targetTime) { + left = mid + 1; + } else { + right = mid - 1; + } + } + + const p1 = data[left - 1]; + const p2 = data[left]; + + if (!p1) return parseFloat(p2.y); + if (!p2) return parseFloat(p1.y); + + const t1 = p1.x; + const t2 = p2.x; + const y1 = parseFloat(p1.y); + const y2 = parseFloat(p2.y); + + if (t2 === t1) return y1; + + const fraction = (targetTime - t1) / (t2 - t1); + return y1 + (y2 - y1) * fraction; + } + + #openModal() { + if (AppState.files.length === 0) { + alert('Please load a log file first.'); + return; + } + + const modal = document.getElementById('mathModal'); + if (modal) modal.style.display = 'flex'; + + const select = document.getElementById('mathFormulaSelect'); + if (!select) return; + + select.innerHTML = ''; + this.#definitions.forEach((def) => { + select.innerHTML += ``; + }); + + document.getElementById('mathInputsContainer').innerHTML = ''; + document.getElementById('mathChannelName').value = ''; + } + + #closeModal() { + const modal = document.getElementById('mathModal'); + if (modal) modal.style.display = 'none'; + } + + #onFormulaChange() { + const formulaId = document.getElementById('mathFormulaSelect').value; + const container = document.getElementById('mathInputsContainer'); + container.innerHTML = ''; + + const definition = this.#definitions.find((d) => d.id === formulaId); + if (!definition) return; + + document.getElementById('mathChannelName').value = + `Math: ${definition.name}`; + + if (AppState.files.length === 0) { + container.innerHTML = "

No log file loaded.

"; + return; + } + const file = AppState.files[0]; + const signalOptions = file.availableSignals + .map((s) => ``) + .join(''); + + definition.inputs.forEach((input, idx) => { + const wrapper = document.createElement('div'); + wrapper.style.marginBottom = '10px'; + + let inputHtml = ''; + if (input.isConstant) { + inputHtml = ``; + } else { + inputHtml = ``; + } + + wrapper.innerHTML = ` + + ${inputHtml} + `; + container.appendChild(wrapper); + + if (!input.isConstant) { + const sel = wrapper.querySelector('select'); + for (let opt of sel.options) { + if (opt.value.toLowerCase().includes(input.name.toLowerCase())) { + sel.value = opt.value; + break; + } + } + } + }); + } + + #executeCreation() { + const formulaId = document.getElementById('mathFormulaSelect').value; + const newName = document.getElementById('mathChannelName').value; + + if (!formulaId) { + alert('Please select a formula.'); + return; + } + + const definition = this.#definitions.find((d) => d.id === formulaId); + const inputMapping = []; + + for (let i = 0; i < definition.inputs.length; i++) { + const el = document.getElementById(`math-input-${i}`); + inputMapping.push(el.value); + } + + try { + const createdName = this.createChannel( + 0, + formulaId, + inputMapping, + newName + ); + + this.#closeModal(); + + if (typeof UI.renderSignalList === 'function') { + UI.renderSignalList(); + + setTimeout(() => { + const checkbox = document.querySelector( + `input[data-key="${createdName}"]` + ); + if (checkbox) { + checkbox.checked = true; + checkbox.dispatchEvent(new Event('change')); + } + }, 100); + } + } catch (e) { + console.error(e); + alert('Error creating channel: ' + e.message); + } + } +} + +export const mathChannels = new MathChannels(); diff --git a/src/palettemanager.js b/src/palettemanager.js index 2aacf46..7f7ea5d 100644 --- a/src/palettemanager.js +++ b/src/palettemanager.js @@ -3,101 +3,155 @@ import { Preferences } from './preferences.js'; import { UI } from './ui.js'; import { AppState } from './config.js'; -/** - * PaletteManager Module - * Manages color assignment for chart signals, including custom palette overrides. - */ -export const PaletteManager = { - // Brand and vibrant palettes for dark mode - DARK_PALETTE: [ - '#e31837', - '#0051ba', - '#2dcc70', - '#f1c40f', - '#8e44ad', - '#e67e22', - '#00F2FF', - '#39FF14', - '#FF007F', - '#FFFF00', - '#BC13FE', - '#FF4D00', - '#00FF9F', - '#FFD700', - '#FF0000', - ], - - // Muted, high-contrast palettes for light mode - LIGHT_PALETTE: [ - '#1A73E8', - '#2E7D32', - '#C2185B', - '#F57C00', - '#7B1FA2', - '#D32F2F', - '#0097A7', - '#607D8B', - '#AFB42B', - ], - - DEFAULT_COLOR: '#888888', // Fallback for missing signals - - // --- Lifecycle --- +class PaletteManagerClass { + #DARK_PALETTE; + #LIGHT_PALETTE; + #DEFAULT_COLOR; + + // Performance: Cache results to avoid re-calculation and DOM access + #colorCache; + #cachedPalette; + + constructor() { + this.#DARK_PALETTE = [ + '#e31837', + '#0051ba', + '#2dcc70', + '#f1c40f', + '#8e44ad', + '#e67e22', + '#00F2FF', + '#39FF14', + '#FF007F', + '#FFFF00', + '#BC13FE', + '#FF4D00', + '#00FF9F', + '#FFD700', + '#FF0000', + ]; + + this.#LIGHT_PALETTE = [ + '#1A73E8', + '#2E7D32', + '#C2185B', + '#F57C00', + '#7B1FA2', + '#D32F2F', + '#0097A7', + '#607D8B', + '#AFB42B', + ]; + + this.#DEFAULT_COLOR = '#888888'; + this.#colorCache = new Map(); + this.#cachedPalette = null; + } init() { const customToggle = document.getElementById('pref-custom-palette'); - - // Use optional chaining and cleaner listener logic customToggle?.addEventListener('change', () => { Preferences.savePreferences(); + this.resetCache(); UI.renderSignalList(); if (typeof ChartManager !== 'undefined') { ChartManager.render(); } }); - }, - // --- Color Logic --- + // Performance: Observe DOM for theme changes instead of checking classList on every render + const observer = new MutationObserver((mutations) => { + for (const mutation of mutations) { + if (mutation.attributeName === 'class') { + this.resetCache(); + break; + } + } + }); + observer.observe(document.body, { + attributes: true, + attributeFilter: ['class'], + }); + } + + resetCache() { + this.#colorCache.clear(); + this.#cachedPalette = null; + } - /** - * Generates a unique key for signal-specific color storage - */ getSignalKey(fileName, signalName) { return `${fileName}_${signalName}`; - }, + } - /** - * Resolves the color for a signal based on index, file, and custom preferences. - */ getColorForSignal(fileIdx, sigIdx) { const fIdx = parseInt(fileIdx) || 0; const sIdx = parseInt(sigIdx) || 0; + // 1. Check Cache (Fastest Path) + const cacheKey = `${fIdx}:${sIdx}`; + if (this.#colorCache.has(cacheKey)) { + return this.#colorCache.get(cacheKey); + } + const file = AppState.files[fIdx]; - if (!file) return this.DEFAULT_COLOR; // + if (!file) return this.#DEFAULT_COLOR; + + const signalName = file.availableSignals[sIdx] || `Signal_${sIdx}`; + const color = this.#resolveColor(file.name, signalName, fIdx, sIdx); + + // 2. Update Cache + this.#colorCache.set(cacheKey, color); - const signalName = file.availableSignals[sIdx]; - const key = this.getSignalKey(file.name, signalName); + return color; + } - // 1. Check for custom palette overrides + #resolveColor(fileName, signalName, fIdx, sIdx) { + const key = this.getSignalKey(fileName, signalName); const { useCustomPalette } = Preferences.prefs; - const customMap = Preferences.customPalette; - if (useCustomPalette && customMap[key]) { - return customMap[key]; + if (useCustomPalette) { + const custom = Preferences.customPalette[key]; + if (custom) return custom; + } + + if (signalName.startsWith('Math:')) { + return this.#generateHashColor(signalName); + } + + const palette = this.#getDefaultChartColors(); + + // Handle overflow or unknown signals gracefully + if (sIdx === 999) { + return this.#generateHashColor(signalName, palette); } - // 2. Fallback to thematic rotation - const palette = this.getDefaultChartColors(); const colorIndex = (fIdx * 10 + sIdx) % palette.length; return palette[colorIndex]; - }, + } + + #getDefaultChartColors() { + // Return cached palette reference if valid + if (this.#cachedPalette) return this.#cachedPalette; - /** - * Returns the active color palette based on current theme state - */ - getDefaultChartColors() { + // DOM access happens only once per theme change const isDarkMode = document.body.classList.contains('pref-theme-dark'); - return isDarkMode ? this.DARK_PALETTE : this.LIGHT_PALETTE; - }, -}; + this.#cachedPalette = isDarkMode ? this.#DARK_PALETTE : this.#LIGHT_PALETTE; + return this.#cachedPalette; + } + + #generateHashColor(str, palette = null) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + + if (palette) { + return palette[Math.abs(hash) % palette.length]; + } + + const c = (hash & 0x00ffffff).toString(16).toUpperCase(); + return '#' + '00000'.substring(0, 6 - c.length) + c; + } +} + +export const PaletteManager = new PaletteManagerClass(); diff --git a/src/style.css b/src/style.css index 7cd5494..07d391d 100644 --- a/src/style.css +++ b/src/style.css @@ -1,18 +1,13 @@ :root { - /* Brand Color Palette */ --brand-green: #01804f; --brand-red: #c22636; --brand-blue: #1c3d72; - - /* Global Colors */ --dark-bg: #0a0a0a; --light-text: #f4f4f4; --gray-text: #a0a0a0; --bg-color: #fcfcfc; --sidebar-bg: #f8f9fa; --border-color: #ddd; - - /* Functional Variable Mappings */ --primary-red: var(--brand-red); --text-main: #333; --text-muted: #666; @@ -27,15 +22,26 @@ --nav-border: rgb(255 255 255 / 10%); --nav-text: #fff; --nav-shadow: 0 4px 30px rgb(0 0 0 / 10%); + --input-bg: #fff; + --input-border: #ddd; + --btn-radius: 8px; + --btn-shadow: 0 2px 5px rgb(0 0 0 / 10%); + --btn-hover-shadow: 0 4px 10px rgb(0 0 0 / 15%); + --btn-font-weight: 600; } body.dark-theme { --chart-canvas-bg: #1a1a1a; --text-main: #333; --text-muted: #666; + --card-bg: #1e1e1e; + --sidebar-bg: #252525; + --border-color: #333; + --input-bg: #2d2d2d; + --input-border: #444; + --text-color: #eee; } -/* Combined the duplicate sidebar selectors into one block */ body.dark-theme .sidebar-left, body.dark-theme .sidebar-right { font-weight: 500; @@ -69,7 +75,6 @@ canvas { border-radius: 4px; } -/* Base Layout */ body, html { margin: 0; @@ -163,7 +168,6 @@ body.docs-body.dark-theme .feature-card { user-select: none; } -/* Add a chevron icon using CSS */ .control-group h3::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; @@ -255,15 +259,38 @@ input[type='number'] { } .btn { - background: white; - border: 1px solid #ccc; - padding: 6px 12px; + border-radius: var(--btn-radius); + padding: 10px 16px; + font-size: 0.9rem; + font-weight: var(--btn-font-weight); cursor: pointer; - border-radius: 4px; - font-weight: 600; - color: #333; - width: 100%; - transition: all 0.2s; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + background-color: #fff; + color: var(--text-main); + border: 1px solid var(--border-color); + box-shadow: var(--btn-shadow); +} + +.btn:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: var(--btn-hover-shadow); + background-color: #f8f9fa; +} + +.btn:active:not(:disabled) { + transform: translateY(0); +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; + box-shadow: none; + filter: grayscale(0.4); + pointer-events: none; } .btn:hover { @@ -271,19 +298,47 @@ input[type='number'] { } .btn-primary { - background: var(--brand-green); + background-color: var(--brand-green); color: white; border: none; } +.btn-primary:hover:not(:disabled) { + background-color: #016b42; +} + .btn-primary:hover { background: #01633d; } +.btn-add, +.btn-secondary { + background-color: var(--brand-blue); + color: white; + border: none; +} + +.btn-add:hover:not(:disabled), +.btn-secondary:hover:not(:disabled) { + background-color: #152e56; +} + +.btn-danger { + background-color: var(--brand-red); + color: white; + border: none; +} + +.btn-danger:hover:not(:disabled) { + background-color: #a01e2b; + color: white; + box-shadow: var(--btn-hover-shadow); +} + .btn-sm { - width: auto; - padding: 2px 8px; - font-size: 0.8em; + padding: 4px 10px; + font-size: 0.8rem; + border-radius: 6px; } .btn-add { @@ -753,38 +808,151 @@ input[type='range']::-webkit-slider-thumb { left: 0; width: 100%; height: 100%; - background: rgb(0 0 0 / 70%); - display: flex; - justify-content: center; + z-index: 10000; + display: none; align-items: center; - z-index: 2000; + justify-content: center; backdrop-filter: blur(4px); + background-color: rgb(0 0 0 / 50%); + transition: opacity 0.3s ease; } .modal-content { - background: white; - width: 90%; - max-width: 600px; + background: var(--card-bg, #fff); border-radius: 12px; - box-shadow: 0 20px 40px rgb(0 0 0 / 30%); - animation: slideUp 0.3s ease-out; + box-shadow: 0 20px 50px rgb(0 0 0 / 30%); + border: 1px solid rgb(255 255 255 / 10%); + width: 100%; + max-width: 480px; + overflow: hidden; + display: flex; + flex-direction: column; + animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#xyModal .modal-content { + max-width: 95vw !important; + height: 90vh !important; } .modal-header { - padding: 2px 20px; - border-bottom: 1px solid #eee; + background: var(--sidebar-bg, #f8f9fa); + padding: 15px 20px; + border-bottom: 1px solid var(--border-color, #eaeaea); display: flex; justify-content: space-between; align-items: center; } +.modal-header h2 { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-color, #333); + margin: 0; + letter-spacing: 0.5px; +} + +.btn-close { + background: none; + border: none; + font-size: 1.5rem; + color: #999; + cursor: pointer; + transition: color 0.2s; + line-height: 1; + padding: 0 5px; +} + +.btn-close:hover { + color: var(--brand-red, #e31837); +} + .modal-body { + padding: 25px; + display: flex; + flex-direction: column; + gap: 15px; overflow-y: auto; max-height: calc(85vh - 120px); +} + +.modal-content .control-group label { + display: block; + margin-bottom: 8px; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-muted, #666); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.template-select, +input[type='text'], +input[type='number'] { + width: 100%; + padding: 12px 15px; + border: 1px solid var(--border-color, #ddd); + border-radius: 8px; + background-color: var(--input-bg, #fff); + color: var(--text-color, #333); + font-size: 0.95rem; + transition: all 0.2s ease; + box-sizing: border-box; +} + +.template-select:focus, +input:focus { + outline: none; + border-color: var(--brand-red, #e31837); + box-shadow: 0 0 0 3px rgb(227 24 55 / 15%); +} + +.modal-footer { + padding: 15px 25px; + background: var(--sidebar-bg, #fff); + border-top: 1px solid var(--border-color, #eee); display: flex; - flex-direction: column; - height: 100%; - padding: 0; + justify-content: flex-end; +} + +.modal-footer .btn-primary { + background: linear-gradient( + 135deg, + var(--brand-red, #e31837) 0%, + #c0152e 100% + ); + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 600; + border: none; + cursor: pointer; + box-shadow: 0 4px 10px rgb(227 24 55 / 30%); + transition: + transform 0.1s, + box-shadow 0.2s; + width: auto; +} + +.modal-footer .btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 6px 15px rgb(227 24 55 / 40%); +} + +.modal-footer .btn-primary:active { + transform: translateY(1px); +} + +@keyframes modalPopIn { + 0% { + opacity: 0; + transform: scale(0.9) translateY(20px); + } + + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } } .app-description { @@ -904,7 +1072,6 @@ input[type='range']::-webkit-slider-thumb { .info-grid { display: grid; grid-template-columns: 1fr; - /* Stacked by default for mobile */ gap: 12px; margin-bottom: 15px; } @@ -1477,12 +1644,10 @@ body.analyzer-active .integrated-toolbar { display: none !important; } -/* Force the chart cards and canvases to be visible */ #chartContainer.has-data .chart-card-compact { display: flex; flex-direction: column; flex: 1; - /* Allow them to grow */ min-height: 300px; } @@ -1546,7 +1711,6 @@ a { font-weight: bold; } -/* --- Docs/Landing Page Specific Styles --- */ .docs-body { background-color: var(--dark-bg); color: var(--light-text); @@ -1665,7 +1829,6 @@ a { color: var(--text-muted); } -/* Modern Switch Toggle */ .switch { position: relative; display: inline-block; @@ -1843,7 +2006,6 @@ body.analyzer-active .nav-title { max-width: 280px; } -/* SPA Navigation Logic */ .analyzer-active .top-nav { position: static; background-color: var(--sidebar-bg); @@ -1918,7 +2080,6 @@ body.analyzer-active { padding: 0; } -/* Expand the scan results visibility */ #driveList { max-height: 450px !important; overflow-y: auto; @@ -2008,7 +2169,6 @@ body.analyzer-active { opacity: 0.7; } -/* Sidebar Source Container Polish */ .source-container { padding: 15px !important; background: #fff !important; @@ -2016,22 +2176,18 @@ body.analyzer-active { box-shadow: 0 4px 20px rgb(0 0 0 / 5%) !important; } -/* Modern Button Grid */ .source-button-grid { display: flex; gap: 10px; margin-bottom: 15px; } -.source-btn { - flex: 1; - border: none; - border-radius: 10px; - padding: 12px 5px; - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; +.template-select, +input[type='text'], +input[type='number'] { + border-radius: var(--btn-radius) !important; + padding: 10px !important; + border: 1px solid var(--border-color); } .btn-content { @@ -2049,7 +2205,6 @@ body.analyzer-active { font-size: 1.3em; } -/* Primary Style (Red) */ .source-btn.primary { background: #e31837; color: white; @@ -2062,7 +2217,6 @@ body.analyzer-active { box-shadow: 0 6px 18px rgb(227 24 55 / 35%); } -/* Secondary Style (Dark) */ .source-btn.secondary { background: #2c3e50; color: white; @@ -2137,18 +2291,23 @@ body.analyzer-active { .view-mode-btn { flex: 1; padding: 10px; - font-size: 0.9rem; - font-weight: 500; + border-radius: var(--btn-radius); border: 1px solid var(--border-color); - background-color: white; + background: #fff; color: var(--text-muted); - border-radius: 6px; + font-weight: 500; cursor: pointer; + transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; - transition: all 0.2s ease; + box-shadow: var(--btn-shadow); +} + +.view-mode-btn:hover:not(.active) { + background-color: #f1f3f5; + color: var(--text-main); } .view-mode-btn:not(.active):hover { @@ -2162,7 +2321,7 @@ body.analyzer-active { color: white; border-color: var(--brand-blue); font-weight: 600; - box-shadow: 0 4px 6px rgb(28 61 114 / 20%); + box-shadow: 0 4px 8px rgb(28 61 114 / 30%); } .view-mode-btn.active i { @@ -2181,40 +2340,6 @@ body.analyzer-active { background-color: #fff5f5; } -#xyModal .modal-content { - width: 95vw !important; - max-width: none !important; - height: 90vh !important; - display: flex; - flex-direction: column; -} - -#xyModal .modal-body { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - padding-bottom: 0; -} - -#chartContainer::-webkit-scrollbar { - width: 8px; -} - -#chartContainer::-webkit-scrollbar-track { - background: #f1f1f1; -} - -#chartContainer::-webkit-scrollbar-thumb { - background: #ccc; - border-radius: 4px; -} - -#chartContainer::-webkit-scrollbar-thumb:hover { - background: #999; -} - -/* --- Export & Annotation Controls --- */ .btn-xs { padding: 2px 6px; font-size: 0.7em; @@ -2240,9 +2365,9 @@ body.analyzer-active { .xy-legend-strip { position: relative; - width: 90px; /* Increased width to fit values */ + width: 90px; display: flex; - flex-direction: row; /* Side-by-side layout */ + flex-direction: row; align-items: stretch; padding: 10px 0; margin-left: 5px; @@ -2269,7 +2394,7 @@ body.analyzer-active { .legend-values { display: flex; flex-direction: column; - justify-content: space-between; /* Evenly spaces the numbers */ + justify-content: space-between; font-size: 0.75em; font-weight: bold; font-family: monospace; @@ -2280,7 +2405,7 @@ body.analyzer-active { .xy-legend-strip .gradient-bar { flex: 1; width: 12px; - margin: 5px 0 5px 15px; /* Add left margin to make room for text */ + margin: 5px 0 5px 15px; border-radius: 6px; border: 1px solid #ccc; background: linear-gradient(to top, blue, cyan, lime, yellow, red); @@ -2301,7 +2426,7 @@ body.analyzer-active { } .xy-panel-toolbar select { - min-width: 0; /* Flexbox fix */ + min-width: 0; } #analyzer-page { @@ -2320,3 +2445,30 @@ body.analyzer-active { .empty-state-container { background: transparent !important; } + +.signal-separator { + display: flex; + align-items: center; + text-align: center; + margin: 10px 0 5px; + color: var(--text-muted); + font-size: 0.7em; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.signal-separator::before, +.signal-separator::after { + content: ''; + flex: 1; + border-bottom: 1px dashed var(--border-color); +} + +.signal-separator::before { + margin-right: 0.5em; +} + +.signal-separator::after { + margin-left: 0.5em; +} diff --git a/src/ui.js b/src/ui.js index 0adea29..9898ceb 100644 --- a/src/ui.js +++ b/src/ui.js @@ -5,6 +5,7 @@ import { Alert } from './alert.js'; import { PaletteManager } from './palettemanager.js'; import { ChartManager } from './chartmanager.js'; import { messenger } from './bus.js'; +import './mathchannels.js'; export const UI = { STORAGE_KEY: 'sidebar_collapsed_states', @@ -95,20 +96,19 @@ export const UI = { updateDataLoadedState: (hasData) => { const container = document.getElementById('chartContainer'); - if (!container) { - return; - } - - if (hasData) { - container.classList.add('has-data'); - } else { - container.classList.remove('has-data'); + if (container) { + if (hasData) { + container.classList.add('has-data'); + } else { + container.classList.remove('has-data'); + } } const xyBtn = document.querySelector('.xy-btn'); const histBtn = document.querySelector('button[title="View Histogram"]'); + const mathBtn = document.getElementById('btn-create-math'); - [xyBtn, histBtn].forEach((btn) => { + [xyBtn, histBtn, mathBtn].forEach((btn) => { if (btn) { btn.disabled = !hasData; btn.style.opacity = hasData ? '1' : '0.5'; @@ -314,9 +314,15 @@ export const UI = { const container = UI.elements.signalList; if (!container) return; + if (!AppState.files || AppState.files.length === 0) { + container.innerHTML = + '
No signals available. Load a file first.
'; + return; + } + const isCustomEnabled = Preferences.prefs.useCustomPalette; - container.innerHTML = ` + const searchHtml = `
@@ -330,6 +336,8 @@ export const UI = {
`; + container.innerHTML = searchHtml; + const contentContainer = document.getElementById('signalListContent'); const fragment = document.createDocumentFragment(); @@ -342,16 +350,16 @@ export const UI = { fileHeader.style.cssText = `padding: 8px 5px; font-weight: bold; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: var(--sidebar-bg);`; fileHeader.innerHTML = ` - - - - ${file.name} - -
- - -
- `; + + + + ${file.name} + +
+ + +
+ `; const signalListContainer = document.createElement('div'); signalListContainer.id = `sig-list-f${fileIdx}`; @@ -365,10 +373,39 @@ export const UI = { : 'fas fa-chevron-right'; }; - file.availableSignals.forEach((signal, sigIdx) => { + const mathSignals = file.availableSignals + .filter((s) => s.startsWith('Math:')) + .sort(); + const regularSignals = file.availableSignals + .filter((s) => !s.startsWith('Math:')) + .sort(); + + const createSignalItem = (signal) => { + const sigIdx = file.availableSignals.indexOf(signal); + const isMath = signal.startsWith('Math:'); const isImportant = DEFAULT_SIGNALS.some((k) => signal.includes(k)); + + let isCurrentlyVisible = false; + if (ChartManager.viewMode === 'overlay') { + const chart = AppState.chartInstances[0]; + if (chart) { + const ds = chart.data.datasets.find( + (d) => d._fileIdx === fileIdx && d._signalKey === signal + ); + if (ds && !ds.hidden) isCurrentlyVisible = true; + } + } else { + const chart = AppState.chartInstances[fileIdx]; + if (chart) { + const ds = chart.data.datasets.find((d) => d.label === signal); + if (ds && !ds.hidden) isCurrentlyVisible = true; + } + } + + const isChecked = isCurrentlyVisible || isImportant; const color = PaletteManager.getColorForSignal(fileIdx, sigIdx); const signalKey = PaletteManager.getSignalKey(file.name, signal); + const uniqueId = `chk-f${fileIdx}-s${sigIdx}`; const signalItem = document.createElement('div'); signalItem.className = 'signal-item'; @@ -376,17 +413,19 @@ export const UI = { signalItem.style.cssText = 'display: flex; align-items: center; gap: 8px; padding: 2px 5px;'; - const uniqueId = `chk-f${fileIdx}-s${sigIdx}`; - const pickerStyle = `width: 18px; height: 18px; border: none; padding: 0; background: none; cursor: ${isCustomEnabled ? 'pointer' : 'default'}; opacity: ${isCustomEnabled ? '1' : '0.4'};`; + const labelStyle = isMath + ? 'font-size: 0.85em; flex-grow: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #01804f; font-weight: bold;' + : 'font-size: 0.85em; flex-grow: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'; + signalItem.innerHTML = ` - - - `; + + + `; const picker = signalItem.querySelector('.signal-color-picker'); picker.onchange = (e) => { @@ -396,7 +435,31 @@ export const UI = { if (typeof ChartManager !== 'undefined') ChartManager.render(); }; - signalListContainer.appendChild(signalItem); + return signalItem; + }; + + if (mathSignals.length > 0) { + const mathSeparator = document.createElement('div'); + mathSeparator.className = 'signal-separator'; + mathSeparator.innerText = 'Math Channels'; + mathSeparator.setAttribute('data-type', 'separator'); + signalListContainer.appendChild(mathSeparator); + + mathSignals.forEach((signal) => { + signalListContainer.appendChild(createSignalItem(signal)); + }); + } + + if (mathSignals.length > 0 && regularSignals.length > 0) { + const separator = document.createElement('div'); + separator.className = 'signal-separator'; + separator.innerText = 'Log Data'; + separator.setAttribute('data-type', 'separator'); + signalListContainer.appendChild(separator); + } + + regularSignals.forEach((signal) => { + signalListContainer.appendChild(createSignalItem(signal)); }); fileGroup.appendChild(fileHeader); @@ -404,7 +467,6 @@ export const UI = { fragment.appendChild(fileGroup); }); - contentContainer.innerHTML = ''; contentContainer.appendChild(fragment); const searchInput = document.getElementById('signalSearchInput'); @@ -422,6 +484,7 @@ export const UI = { groups.forEach((group) => { let matchCount = 0; const items = group.querySelectorAll('.signal-item'); + const separators = group.querySelectorAll('.signal-separator'); items.forEach((item) => { const attr = item.getAttribute('data-signal-name'); @@ -430,6 +493,10 @@ export const UI = { if (isMatch) matchCount++; }); + separators.forEach((sep) => { + sep.style.display = term.length > 0 ? 'none' : 'flex'; + }); + group.style.display = matchCount > 0 ? 'block' : 'none'; const sigList = group.querySelector('[id^="sig-list-f"]'); if (term.length > 0 && matchCount > 0 && sigList) @@ -465,6 +532,8 @@ export const UI = { if (dataset) { dataset.hidden = !isVisible; chart.update('none'); + } else if (isVisible) { + ChartManager.render(); } } } else { @@ -474,6 +543,8 @@ export const UI = { if (dataset) { dataset.hidden = !isVisible; chart.update('none'); + } else if (isVisible) { + ChartManager.render(); } } } diff --git a/tests/mathchannels.test.js b/tests/mathchannels.test.js new file mode 100644 index 0000000..e0af074 --- /dev/null +++ b/tests/mathchannels.test.js @@ -0,0 +1,500 @@ +import { + jest, + describe, + test, + expect, + beforeEach, + afterEach, +} from '@jest/globals'; +import { mathChannels } from '../src/mathchannels.js'; +import { AppState } from '../src/config.js'; +import { UI } from '../src/ui.js'; + +// Mock UI methods used in mathchannels +UI.renderSignalList = jest.fn(); + +describe('MathChannels', () => { + let alertMock; + + beforeEach(() => { + // Reset AppState + AppState.files = []; + + // Mock window.alert + alertMock = jest.spyOn(window, 'alert').mockImplementation(() => {}); + + // Setup basic DOM for UI tests + document.body.innerHTML = ` + + `; + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + describe('createChannel Logic', () => { + test('throws error if no file is loaded', () => { + AppState.files = []; + expect(() => { + mathChannels.createChannel(0, 'boost', [], 'Test'); + }).toThrow('No file selected or loaded'); + }); + + test('throws error for invalid formula definition', () => { + AppState.files = [{ signals: {} }]; + expect(() => { + mathChannels.createChannel(0, 'non_existent_formula', [], 'Test'); + }).toThrow('Invalid formula definition'); + }); + + test('throws error if signal missing in file', () => { + AppState.files = [ + { + signals: { ExistingSignal: [] }, + availableSignals: ['ExistingSignal'], + }, + ]; + + // 'boost' requires map and baro. We only provide mapping for map, baro is missing. + const inputMapping = ['ExistingSignal', 'MissingSignal']; + + expect(() => { + mathChannels.createChannel(0, 'boost', inputMapping, 'Boost'); + }).toThrow("Signal 'MissingSignal' not found"); + }); + + test('Calculated Power from Torque (Torque * RPM / 7127)', () => { + // Torque = 400 Nm, RPM = 5000 + // HP = (400 * 5000) / 7127 = 280.62... + const torqueData = [{ x: 100, y: 400 }]; + const rpmData = [{ x: 100, y: 5000 }]; + + AppState.files = [ + { + signals: { TQ: torqueData, RPM: rpmData }, + availableSignals: ['TQ', 'RPM'], + }, + ]; + + mathChannels.createChannel(0, 'power_from_torque', ['TQ', 'RPM'], 'HP'); + const result = AppState.files[0].signals['HP']; + + const expected = (400 * 5000) / 7127; + expect(result[0].y).toBeCloseTo(expected, 4); + }); + + test('Estimated Power from kg/h (MAF/3.6 * Factor)', () => { + // MAF = 360 kg/h -> 100 g/s. Factor = 1.35. Result should be 135. + const mafData = [{ x: 1, y: 360 }]; + + AppState.files = [ + { + signals: { MAF: mafData }, + availableSignals: ['MAF'], + }, + ]; + + // Input 0: Signal, Input 1: Constant + mathChannels.createChannel(0, 'est_power_kgh', ['MAF', '1.35'], 'EstHP'); + const result = AppState.files[0].signals['EstHP']; + + expect(result[0].y).toBeCloseTo(135, 1); + }); + + test('Estimated Power from g/s (MAF * Factor)', () => { + // MAF = 100 g/s. Factor = 1.35. Result should be 135. + const mafData = [{ x: 1, y: 100 }]; + + AppState.files = [ + { + signals: { MAF: mafData }, + availableSignals: ['MAF'], + }, + ]; + + mathChannels.createChannel(0, 'est_power_gs', ['MAF', '1.35'], 'EstHP'); + const result = AppState.files[0].signals['EstHP']; + + expect(result[0].y).toBeCloseTo(135, 1); + }); + + test('successfully creates a channel with Multiply by Constant (Signal + Constant)', () => { + const signalData = [ + { x: 0, y: 10 }, + { x: 1000, y: 20 }, + { x: 2000, y: 30 }, + ]; + + AppState.files = [ + { + name: 'test.log', + signals: { RPM: signalData }, + availableSignals: ['RPM'], + metadata: {}, + }, + ]; + + // Formula: multiply_const (Source * Factor) + // Inputs: Source (RPM), Factor (2.0) + const inputMapping = ['RPM', '2.0']; + + const newName = mathChannels.createChannel( + 0, + 'multiply_const', + inputMapping, + 'RPM_Doubled' + ); + + expect(newName).toBe('RPM_Doubled'); + + const newSignal = AppState.files[0].signals['RPM_Doubled']; + expect(newSignal).toBeDefined(); + expect(newSignal.length).toBe(3); + expect(newSignal[0].y).toBe(20); // 10 * 2 + expect(newSignal[1].y).toBe(40); // 20 * 2 + expect(newSignal[2].y).toBe(60); // 30 * 2 + + // Check metadata update + expect(AppState.files[0].availableSignals).toContain('RPM_Doubled'); + expect(AppState.files[0].metadata['RPM_Doubled']).toEqual({ + min: 20, + max: 60, + unit: 'Math', + }); + }); + + test('successfully calculates Boost (Signal - Signal) with aligned timestamps', () => { + const mapData = [{ x: 1000, y: 2.5 }]; + const baroData = [{ x: 1000, y: 1.0 }]; + + AppState.files = [ + { + signals: { MAP: mapData, Baro: baroData }, + availableSignals: ['MAP', 'Baro'], + }, + ]; + + // Formula: boost (MAP - Baro) + const inputMapping = ['MAP', 'Baro']; + + mathChannels.createChannel(0, 'boost', inputMapping, 'MyBoost'); + + const result = AppState.files[0].signals['MyBoost']; + expect(result[0].y).toBe(1.5); // 2.5 - 1.0 + }); + + test('interpolates data when timestamps do not match', () => { + // MAP has points at 0, 2000 + // Baro has points at 1000 (needs to interpolate MAP) + // Note: The logic iterates over the *first* signal passed (Master Time Base). + // Let's set MAP as master. + const mapData = [ + { x: 0, y: 100 }, + { x: 2000, y: 300 }, + ]; + // Baro is constant-ish or different time base + const baroData = [ + { x: 0, y: 50 }, + { x: 1000, y: 60 }, // This point is at t=1000 + { x: 2000, y: 50 }, + ]; + + AppState.files = [ + { + signals: { MAP: mapData, Baro: baroData }, + availableSignals: ['MAP', 'Baro'], + }, + ]; + + // We want to calculate MAP - Baro. + // Since 'MAP' is the first input for 'boost', the loop will run for x=0 and x=2000. + // It will interpolate 'Baro' at x=0 and x=2000. + const inputMapping = ['MAP', 'Baro']; + mathChannels.createChannel(0, 'boost', inputMapping, 'InterpBoost'); + + const result = AppState.files[0].signals['InterpBoost']; + + // At x=0: MAP=100, Baro=50 -> 50 + expect(result[0].x).toBe(0); + expect(result[0].y).toBe(50); + + // At x=2000: MAP=300, Baro=50 -> 250 + expect(result[1].x).toBe(2000); + expect(result[1].y).toBe(250); + }); + + test('interpolates correctly (linear interpolation logic check)', () => { + // Test specifically the interpolation math embedded in createChannel logic + // We use 'multiply_const' but cheat by treating the constant input as a second signal via code manipulation + // or easier: use 'afr_error' (Cmd - Measured). + + const cmdData = [{ x: 100, y: 14.7 }]; // Target time + const measuredData = [ + { x: 0, y: 10 }, + { x: 200, y: 20 }, + ]; + // At x=100, Measured should be interpolated to 15 ((10+20)/2) + + AppState.files = [ + { + signals: { CMD: cmdData, MEAS: measuredData }, + availableSignals: ['CMD', 'MEAS'], + }, + ]; + + mathChannels.createChannel(0, 'afr_error', ['CMD', 'MEAS'], 'AFR_Err'); + const res = AppState.files[0].signals['AFR_Err']; + + // 14.7 - 15 = -0.3 + expect(res[0].y).toBeCloseTo(-0.3); + }); + + test('handles boundary conditions for interpolation (timestamps outside range)', () => { + const master = [{ x: 500, y: 10 }]; + const slave = [ + { x: 1000, y: 20 }, + { x: 2000, y: 30 }, + ]; + + AppState.files = [ + { + signals: { M: master, S: slave }, + availableSignals: ['M', 'S'], + }, + ]; + + // boost: M - S + // At x=500, S is not defined (starts at 1000). Should take first value (20). + mathChannels.createChannel(0, 'boost', ['M', 'S'], 'Result'); + const res = AppState.files[0].signals['Result']; + + expect(res[0].y).toBe(10 - 20); // -10 + }); + + test('Acceleration (m/s²) - Custom Process', () => { + // 0 to 100 km/h in 5 seconds linear acceleration. + // 100 km/h = 27.777 m/s + // Accel = 27.777 / 5 = 5.55 m/s^2 + + const speedData = [ + { x: 0, y: 0 }, + { x: 1000, y: 20 }, // 20 km/h + { x: 2000, y: 40 }, // 40 km/h + ]; + // At t=1000 (1s), deltaV = 20 km/h = 5.555... m/s. deltaT = 1s. + + AppState.files = [ + { + signals: { Speed: speedData }, + availableSignals: ['Speed'], + }, + ]; + + // Input 0: Speed, Input 1: Window Size (1) + mathChannels.createChannel(0, 'acceleration', ['Speed', '1'], 'Accel'); + const result = AppState.files[0].signals['Accel']; + + // The logic loop starts at i=windowSize (1) + expect(result.length).toBeGreaterThan(0); + + // Obliczamy oczekiwaną wartość dokładnie tak jak kod: (20 km/h w m/s) / 1s + const expectedValue = 20 / 3.6 / 1; + + expect(result[0].y).toBeCloseTo(expectedValue, 4); + }); + + test('Smoothing (Moving Average) - Custom Process', () => { + const noisySignal = [ + { x: 1, y: 10 }, + { x: 2, y: 20 }, + { x: 3, y: 10 }, + { x: 4, y: 20 }, + ]; + + AppState.files = [ + { + signals: { Noisy: noisySignal }, + availableSignals: ['Noisy'], + }, + ]; + + // Input 0: Signal, Input 1: Window Size (2) + mathChannels.createChannel(0, 'smoothing', ['Noisy', '2'], 'Smooth'); + const result = AppState.files[0].signals['Smooth']; + + // Index 0 (x=1): Avg(10) = 10 + expect(result[0].y).toBe(10); + + // Index 1 (x=2): Avg(10, 20) = 15 + expect(result[1].y).toBe(15); + + // Index 2 (x=3): Avg(20, 10) = 15 + expect(result[2].y).toBe(15); + }); + + test('Pressure Ratio (MAP / Baro) with Zero Division check', () => { + const mapData = [ + { x: 1, y: 2000 }, + { x: 2, y: 2000 }, + ]; + const baroData = [ + { x: 1, y: 1000 }, // Normal case + { x: 2, y: 0 }, // Edge case: Division by zero + ]; + + AppState.files = [ + { + signals: { MAP: mapData, Baro: baroData }, + availableSignals: ['MAP', 'Baro'], + }, + ]; + + mathChannels.createChannel(0, 'pressure_ratio', ['MAP', 'Baro'], 'PR'); + const result = AppState.files[0].signals['PR']; + + // Case 1: 2000 / 1000 = 2 + expect(result[0].y).toBe(2); + + // Case 2: 2000 / 0 -> Should be handled (returns 0 in formula) + expect(result[1].y).toBe(0); + }); + }); + + describe('UI Interactions', () => { + test('openModal alerts if no files loaded', () => { + AppState.files = []; + window.openMathModal(); // Calls mathChannels.#openModal via binding + expect(alertMock).toHaveBeenCalledWith('Please load a log file first.'); + expect(document.getElementById('mathModal').style.display).toBe('none'); + }); + + test('openModal shows modal and populates select if file exists', () => { + AppState.files = [{ availableSignals: [] }]; + window.openMathModal(); + + const modal = document.getElementById('mathModal'); + const select = document.getElementById('mathFormulaSelect'); + + expect(modal.style.display).toBe('flex'); + expect(select.options.length).toBeGreaterThan(1); // Default + definitions + }); + + test('onMathFormulaChange populates inputs correctly', () => { + AppState.files = [ + { + availableSignals: ['MAF g/s', 'Intake Press'], + signals: {}, + }, + ]; + + // Open modal first to populate formula select + window.openMathModal(); + + const select = document.getElementById('mathFormulaSelect'); + // Find ID for "multiply_const" (Signal * Factor) + // We assume definitions order or check values. + // Let's iterate options to find 'multiply_const' + let targetVal = ''; + for (let opt of select.options) { + if (opt.value === 'multiply_const') targetVal = opt.value; + } + select.value = targetVal; + + // Trigger change + window.onMathFormulaChange(); + + const container = document.getElementById('mathInputsContainer'); + const inputs = container.querySelectorAll('.template-select'); + + // multiply_const has 2 inputs: Source (select) and Factor (number) + expect(inputs.length).toBe(2); + expect(inputs[0].tagName).toBe('SELECT'); // Signal selector + expect(inputs[1].tagName).toBe('INPUT'); // Constant input + expect(inputs[1].type).toBe('number'); + + // Check auto-name generation + const nameInput = document.getElementById('mathChannelName'); + expect(nameInput.value).toContain('Math:'); + }); + + test('createMathChannel (executeCreation) validates form and calls createChannel', () => { + // Setup valid state + const signalData = [{ x: 1, y: 1 }]; + AppState.files = [ + { + name: 'f1', + signals: { SigA: signalData }, + availableSignals: ['SigA'], + }, + ]; + + // 1. Simulate opening + window.openMathModal(); + + // 2. Select 'multiply_const' + const select = document.getElementById('mathFormulaSelect'); + select.value = 'multiply_const'; + window.onMathFormulaChange(); + + // 3. Fill inputs + // Input 0 is signal select + const sigSelect = document.getElementById('math-input-0'); + sigSelect.value = 'SigA'; + + // Input 1 is factor + const factorInput = document.getElementById('math-input-1'); + factorInput.value = '5'; + + // 4. Click Create + window.createMathChannel(); + + // 5. Verification + // Should have created channel 'Math: Multiply by Constant' + const newSig = AppState.files[0].signals['Math: Multiply by Constant']; + expect(newSig).toBeDefined(); + expect(newSig[0].y).toBe(5); // 1 * 5 + + // Should close modal + expect(document.getElementById('mathModal').style.display).toBe('none'); + + // Should refresh UI + expect(UI.renderSignalList).toHaveBeenCalled(); + }); + + test('createMathChannel handles errors gracefully', () => { + // Setup state where creation fails (e.g. invalid factor) + AppState.files = [{ signals: { SigA: [] }, availableSignals: ['SigA'] }]; + window.openMathModal(); + + const select = document.getElementById('mathFormulaSelect'); + select.value = 'multiply_const'; + window.onMathFormulaChange(); + + // Force invalid input by not selecting signal? + // Or simpler: Mock createChannel to throw + const spy = jest + .spyOn(mathChannels, 'createChannel') + .mockImplementation(() => { + throw new Error('Mock Error'); + }); + + const consoleSpy = jest + .spyOn(console, 'error') + .mockImplementation(() => {}); + + window.createMathChannel(); + + expect(alertMock).toHaveBeenCalledWith( + expect.stringContaining('Error creating channel: Mock Error') + ); + + spy.mockRestore(); + consoleSpy.mockRestore(); + }); + }); +}); diff --git a/tests/palettemanager.test.js b/tests/palettemanager.test.js index 9540677..f3789b9 100644 --- a/tests/palettemanager.test.js +++ b/tests/palettemanager.test.js @@ -1,4 +1,11 @@ -import { jest, describe, test, expect, beforeEach } from '@jest/globals'; +import { + jest, + describe, + test, + expect, + beforeEach, + afterEach, +} from '@jest/globals'; import { PaletteManager } from '../src/palettemanager.js'; import { Preferences } from '../src/preferences.js'; @@ -6,106 +13,251 @@ import { UI } from '../src/ui.js'; import { ChartManager } from '../src/chartmanager.js'; import { AppState } from '../src/config.js'; +// --- Expected Palettes (Private in class, replicated here for assertions) --- +const EXPECTED_LIGHT_PALETTE = [ + '#1A73E8', + '#2E7D32', + '#C2185B', + '#F57C00', + '#7B1FA2', + '#D32F2F', + '#0097A7', + '#607D8B', + '#AFB42B', +]; + +const EXPECTED_DARK_PALETTE = [ + '#e31837', + '#0051ba', + '#2dcc70', + '#f1c40f', + '#8e44ad', + '#e67e22', + '#00F2FF', + '#39FF14', + '#FF007F', + '#FFFF00', + '#BC13FE', + '#FF4D00', + '#00FF9F', + '#FFD700', + '#FF0000', +]; + +// --- Mocks --- UI.setLoading = jest.fn(); UI.renderSignalList = jest.fn(); UI.updateDataLoadedState = jest.fn(); -UI.setTheme = jest.fn(); ChartManager.render = jest.fn(); AppState.files = jest.fn(); Preferences.savePreferences = jest.fn(); +// Mock MutationObserver globally +const mockObserverInstance = { + observe: jest.fn(), + disconnect: jest.fn(), + trigger: null, // Custom helper to trigger callback manually +}; + +global.MutationObserver = class { + constructor(callback) { + this.callback = callback; + mockObserverInstance.trigger = (mutations) => callback(mutations); + } + observe(element, options) { + mockObserverInstance.observe(element, options); + } + disconnect() { + mockObserverInstance.disconnect(); + } +}; + describe('PaletteManager', () => { beforeEach(() => { document.body.innerHTML = ''; - document.body.classList.remove('pref-theme-dark'); + document.body.className = ''; // Reset theme jest.clearAllMocks(); - }); - - test('getColorForSignal returns default gray if file does not exist', () => { - AppState.files = []; // Ensure empty - const color = PaletteManager.getColorForSignal(0, 0); - expect(color).toBe('#888888'); - }); + PaletteManager.resetCache(); // Ensure clean state for singleton - test('getColorForSignal returns custom color when enabled and exists', () => { - // Setup AppState + // Default AppState AppState.files = [ { name: 'log.csv', - availableSignals: ['RPM'], + availableSignals: ['RPM', 'Speed', 'Math: Boost'], }, ]; - // Mock Preferences to return "useCustomPalette: true" - const key = PaletteManager.getSignalKey('log.csv', 'RPM'); - + // Default Preferences Object.defineProperty(Preferences, 'prefs', { - get: jest.fn(() => ({ useCustomPalette: true })), - configurable: true, // allows us to change it again in other tests + get: jest.fn(() => ({ useCustomPalette: false })), + configurable: true, + }); + Preferences.customPalette = {}; + }); + + describe('Basic Color Resolution', () => { + test('returns default color if file does not exist', () => { + AppState.files = []; + const color = PaletteManager.getColorForSignal(0, 0); + expect(color).toBe('#888888'); + }); + + test('returns correct Light Mode color by default', () => { + const color = PaletteManager.getColorForSignal(0, 0); + expect(color).toBe(EXPECTED_LIGHT_PALETTE[0]); }); - Preferences.customPalette = { [key]: '#FF00FF' }; + test('returns correct Dark Mode color', () => { + document.body.classList.add('pref-theme-dark'); + // Reset cache because we changed theme manually before first call logic test + PaletteManager.resetCache(); - const color = PaletteManager.getColorForSignal(0, 0); - expect(color).toBe('#FF00FF'); + const color = PaletteManager.getColorForSignal(0, 0); + expect(color).toBe(EXPECTED_DARK_PALETTE[0]); + }); + + test('cycles through palette when index exceeds length', () => { + const len = EXPECTED_LIGHT_PALETTE.length; + // Request index equal to length (should wrap to 0) + const color = PaletteManager.getColorForSignal(0, len); + expect(color).toBe(EXPECTED_LIGHT_PALETTE[0]); + + // Request index equal to length + 1 (should be 1) + const color2 = PaletteManager.getColorForSignal(0, len + 1); + expect(color2).toBe(EXPECTED_LIGHT_PALETTE[1]); + }); }); - test('getDefaultChartColors switches based on body class', () => { - // Test Light Mode (Default) - expect(PaletteManager.getDefaultChartColors()).toEqual( - PaletteManager.LIGHT_PALETTE - ); - - // Test Dark Mode - document.body.classList.add('pref-theme-dark'); - expect(PaletteManager.getDefaultChartColors()).toEqual( - PaletteManager.DARK_PALETTE - ); + describe('Performance & Caching', () => { + test('caches color result and returns cached value on subsequent calls', () => { + // 1. First call - Light Mode + const color1 = PaletteManager.getColorForSignal(0, 0); + expect(color1).toBe(EXPECTED_LIGHT_PALETTE[0]); + + // 2. Change DOM to Dark Mode MANUALLY (bypassing observer) + document.body.classList.add('pref-theme-dark'); + + // 3. Second call - Should still return Light color because it's cached + const color2 = PaletteManager.getColorForSignal(0, 0); + expect(color2).toBe(EXPECTED_LIGHT_PALETTE[0]); // Cache Hit! + + // 4. Force reset + PaletteManager.resetCache(); + + // 5. Third call - Should now calculate Dark color + const color3 = PaletteManager.getColorForSignal(0, 0); + expect(color3).toBe(EXPECTED_DARK_PALETTE[0]); + }); }); - test('getColorForSignal uses theme palette when custom is disabled', () => { - AppState.files = [ - { - name: 'log.csv', - availableSignals: ['RPM'], - }, - ]; + describe('Theme Observer', () => { + test('init sets up MutationObserver', () => { + PaletteManager.init(); + expect(mockObserverInstance.observe).toHaveBeenCalledWith(document.body, { + attributes: true, + attributeFilter: ['class'], + }); + }); - // Use defineProperty to mock the return value of the getter - Object.defineProperty(Preferences, 'prefs', { - get: jest.fn(() => ({ useCustomPalette: false })), - configurable: true, // allows us to change it again in other tests + test('observer callback clears cache on class change', () => { + PaletteManager.init(); + + // 1. Populate cache (Light mode) + const col1 = PaletteManager.getColorForSignal(0, 0); + expect(col1).toBe(EXPECTED_LIGHT_PALETTE[0]); + + // 2. Simulate Theme Change + document.body.classList.add('pref-theme-dark'); + + // 3. Trigger Observer Callback + mockObserverInstance.trigger([{ attributeName: 'class' }]); + + // 4. Next call should return Dark color (proving cache was cleared) + const col2 = PaletteManager.getColorForSignal(0, 0); + expect(col2).toBe(EXPECTED_DARK_PALETTE[0]); }); - const color = PaletteManager.getColorForSignal(0, 0); - expect(color).toBe(PaletteManager.LIGHT_PALETTE[0]); + test('observer ignores non-class attribute changes', () => { + PaletteManager.init(); + const col1 = PaletteManager.getColorForSignal(0, 0); + + // Trigger irrelevant mutation + mockObserverInstance.trigger([{ attributeName: 'style' }]); + + // Even if we changed theme in DOM, cache shouldn't clear if observer ignores it + document.body.classList.add('pref-theme-dark'); + + const col2 = PaletteManager.getColorForSignal(0, 0); + expect(col2).toBe(EXPECTED_LIGHT_PALETTE[0]); // Cache persists + }); }); - test('init attaches change listener to custom palette toggle', () => { - PaletteManager.init(); - const toggle = document.getElementById('pref-custom-palette'); + describe('Special Signal Types', () => { + test('Math channels generate consistent hash colors', () => { + const mathSignalIdx = 2; // defined in beforeEach as 'Math: Boost' + + const color1 = PaletteManager.getColorForSignal(0, mathSignalIdx); + const color2 = PaletteManager.getColorForSignal(0, mathSignalIdx); - // Simulate changing the toggle - toggle.dispatchEvent(new Event('change')); + expect(color1).toMatch(/^#[0-9A-F]{6}$/i); // Hex format + expect(color1).toBe(color2); // Deterministic - // These will now work because they are explicitly defined as jest.fn() - expect(Preferences.savePreferences).toHaveBeenCalled(); - expect(UI.renderSignalList).toHaveBeenCalled(); - expect(ChartManager.render).toHaveBeenCalled(); + // Ensure it doesn't just pick from the standard index-based logic + // Standard index 2 is #C2185B in Light Palette. + // Hash likely differs. + // (This assertion depends on hash implementation, mainly checking it runs separate logic) + }); + + test('Index 999 (Overflow/Unknown) generates hash from palette', () => { + const color = PaletteManager.getColorForSignal(0, 999); + // Logic: hash string -> modulo palette length -> pick from palette + expect(EXPECTED_LIGHT_PALETTE).toContain(color); + }); }); - test('init does not crash if ChartManager is undefined', () => { - const originalChartManager = global.ChartManager; - delete global.ChartManager; // Simulate it being missing + describe('Custom Palette', () => { + test('returns custom color when preference enabled', () => { + // Mock Preference ON + Object.defineProperty(Preferences, 'prefs', { + get: jest.fn(() => ({ useCustomPalette: true })), + configurable: true, + }); - PaletteManager.init(); - const toggle = document.getElementById('pref-custom-palette'); + // Set custom color + const key = PaletteManager.getSignalKey('log.csv', 'RPM'); + Preferences.customPalette = { [key]: '#123456' }; + + const color = PaletteManager.getColorForSignal(0, 0); // RPM is index 0 + expect(color).toBe('#123456'); + }); + + test('listener updates UI on toggle', () => { + PaletteManager.init(); + const toggle = document.getElementById('pref-custom-palette'); - expect(() => { toggle.dispatchEvent(new Event('change')); - }).not.toThrow(); - global.ChartManager = originalChartManager; // Restore it + expect(Preferences.savePreferences).toHaveBeenCalled(); + expect(UI.renderSignalList).toHaveBeenCalled(); + expect(ChartManager.render).toHaveBeenCalled(); + }); + }); + + describe('Utils', () => { + test('getSignalKey formats correctly', () => { + expect(PaletteManager.getSignalKey('file1', 'sig1')).toBe('file1_sig1'); + }); + + test('init safe when ChartManager missing', () => { + const originalCM = global.ChartManager; + delete global.ChartManager; + + PaletteManager.init(); + const toggle = document.getElementById('pref-custom-palette'); + expect(() => toggle.dispatchEvent(new Event('change'))).not.toThrow(); + + global.ChartManager = originalCM; + }); }); });