+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| src | +
+
+ |
+ 0% | +0/84 | +0% | +0/38 | +0% | +0/17 | +0% | +0/79 | +
| src/components | +
+
+ |
+ 0% | +0/109 | +0% | +0/80 | +0% | +0/39 | +0% | +0/104 | +
| src/components/plotter | +
+
+ |
+ 0% | +0/195 | +0% | +0/113 | +0% | +0/33 | +0% | +0/185 | +
| src/components/viewers | +
+
+ |
+ 35.01% | +104/297 | +28.49% | +55/193 | +39.02% | +16/41 | +35.56% | +101/284 | +
| src/utils | +
+
+ |
+ 32.85% | +23/70 | +41.37% | +12/29 | +30% | +3/10 | +31.81% | +21/66 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import { save, ask } from '@tauri-apps/plugin-dialog';
+import SettingsPanel, { SerialConfig } from './components/SettingsPanel';
+import SendPanel from './components/SendPanel';
+import ReceivePanel, { ViewMode } from './components/ReceivePanel';
+import './App.css';
+
+interface DataUpdatePayload {
+ total_bytes: number;
+}
+
+function App() {
+ const [ports, setPorts] = useState<string[]>([]);
+ const [selectedPort, setSelectedPort] = useState<string>('');
+ const [isConnected, setIsConnected] = useState(false);
+ const [totalBytes, setTotalBytes] = useState<number>(0);
+ const [autoScroll, setAutoScroll] = useState(true);
+
+ const [config, setConfig] = useState<SerialConfig>({
+ baud_rate: 115200,
+ data_bits: 8,
+ flow_control: 'None',
+ parity: 'None',
+ stop_bits: 1,
+ dtr: true,
+ rts: true,
+ });
+
+ const updatePorts = async () => {
+ try {
+ const p = await invoke<string[]>('list_ports');
+ setPorts(p);
+ // If selected port is no longer in the list, clear it or select first available
+ if (selectedPort && !p.includes(selectedPort)) {
+ setSelectedPort(p.length > 0 ? p[0] : '');
+ } else if (p.length > 0 && !selectedPort) {
+ setSelectedPort(p[0]);
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ useEffect(() => {
+ updatePorts();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ // Listen for serial-status events (disconnection)
+ useEffect(() => {
+ let unlisten: () => void;
+
+ async function setupStatusListener() {
+ unlisten = await listen<{ connected: boolean; error: string | null }>(
+ 'serial-status',
+ (event) => {
+ if (!event.payload.connected) {
+ setIsConnected(false);
+ if (event.payload.error) {
+ alert('Serial disconnected: ' + event.payload.error);
+ }
+ }
+ }
+ );
+ }
+
+ setupStatusListener();
+
+ return () => {
+ if (unlisten) unlisten();
+ };
+ }, []);
+
+ useEffect(() => {
+ let unlisten: () => void;
+
+ async function setupListener() {
+ unlisten = await listen<DataUpdatePayload>('data-update', (event) => {
+ setTotalBytes(event.payload.total_bytes);
+ });
+ }
+
+ setupListener();
+
+ return () => {
+ if (unlisten) unlisten();
+ };
+ }, []);
+
+ // Update DTR when config changes while connected
+ useEffect(() => {
+ if (isConnected) {
+ invoke('write_dtr', { level: config.dtr }).catch(console.error);
+ }
+ }, [config.dtr, isConnected]);
+
+ // Update RTS when config changes while connected
+ useEffect(() => {
+ if (isConnected) {
+ invoke('write_rts', { level: config.rts }).catch(console.error);
+ }
+ }, [config.rts, isConnected]);
+
+ async function handleToggleConnection() {
+ if (isConnected) {
+ try {
+ await invoke('close_port');
+ setIsConnected(false);
+ } catch (e) {
+ console.error(e);
+ alert('Failed to close port: ' + e);
+ }
+ } else {
+ if (!selectedPort) return;
+ try {
+ await invoke('open_port', { portName: selectedPort, config: config });
+ setIsConnected(true);
+ setTotalBytes(0);
+ } catch (e) {
+ console.error(e);
+ alert('Failed to open port: ' + e);
+ }
+ }
+ }
+
+ async function handleExport() {
+ if (totalBytes === 0) {
+ alert('No data to export');
+ return;
+ }
+
+ try {
+ const filePath = await save({
+ filters: [
+ { name: 'Binary', extensions: ['bin'] },
+ { name: 'All Files', extensions: ['*'] },
+ ],
+ defaultPath: 'serial_log.bin',
+ });
+
+ if (filePath) {
+ const bytesExported = await invoke<number>('export_log', { path: filePath });
+ console.log(`Exported ${bytesExported.toLocaleString()} bytes to ${filePath}`);
+ }
+ } catch (e) {
+ console.error(e);
+ alert('Failed to export: ' + e);
+ }
+ }
+
+ async function handleClear() {
+ try {
+ await invoke('clear_data');
+ setTotalBytes(0);
+ } catch (e) {
+ console.error(e);
+ alert('Failed to clear data: ' + e);
+ }
+ }
+
+ async function handleCopy(mode: ViewMode) {
+ if (totalBytes === 0) return;
+
+ if (totalBytes > 10 * 1024 * 1024) {
+ // 10MB
+ const confirmed = await ask(
+ 'The data is quite large (>10MB). Copying to clipboard might freeze the application momentarily. Continue?',
+ {
+ title: 'Large Data Warning',
+ kind: 'warning',
+ }
+ );
+ if (!confirmed) return;
+ }
+
+ try {
+ const text = await invoke<string>('get_clipboard_text', { mode });
+ if (text) {
+ await navigator.clipboard.writeText(text);
+ }
+ } catch (e) {
+ console.error(e);
+ alert('Failed to copy: ' + e);
+ }
+ }
+
+ return (
+ <div className="app-container">
+ <div className="header-section">
+ <SettingsPanel
+ ports={ports}
+ selectedPort={selectedPort}
+ onPortChange={setSelectedPort}
+ onRefreshPorts={updatePorts}
+ config={config}
+ onConfigChange={setConfig}
+ isConnected={isConnected}
+ onConnect={handleToggleConnection}
+ onDisconnect={handleToggleConnection}
+ />
+ </div>
+
+ <div className="middle-section">
+ <SendPanel connected={isConnected} />
+ </div>
+
+ <div className="bottom-section">
+ <ReceivePanel
+ totalBytes={totalBytes}
+ onExport={handleExport}
+ onClear={handleClear}
+ onCopy={handleCopy}
+ autoScroll={autoScroll}
+ onAutoScrollChange={setAutoScroll}
+ />
+ </div>
+ </div>
+ );
+}
+
+export default App;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useCallback } from 'react';
+import HexViewer from './viewers/HexViewer';
+import AsciiViewer from './viewers/AsciiViewer';
+import './ReceivePanel.css';
+
+export type ViewMode = 'hex' | 'ascii';
+export type TimestampSeparator = ' ' | ',' | '\t';
+
+export interface ReceiveOptions {
+ viewMode: ViewMode;
+ lineWrap: boolean;
+ showCtrl: boolean;
+ showTimestamp: boolean;
+ autoScroll: boolean;
+ filterEnabled: boolean;
+ searchQuery: string;
+}
+
+interface ReceivePanelProps {
+ totalBytes: number;
+ onExport: () => void;
+ onClear: () => void;
+ onCopy: (mode: ViewMode) => void;
+ autoScroll: boolean;
+ onAutoScrollChange: (enabled: boolean) => void;
+}
+
+export default function ReceivePanel({
+ totalBytes,
+ onExport,
+ onClear,
+ onCopy,
+ autoScroll,
+ onAutoScrollChange,
+}: ReceivePanelProps) {
+ // View mode: 'hex' (Binary checked) or 'ascii' (Binary unchecked)
+ const [viewMode, setViewMode] = useState<ViewMode>('ascii');
+
+ // Display options (ASCII mode only)
+ const [lineWrap, setLineWrap] = useState(true);
+ const [showTimestamp, setShowTimestamp] = useState(true);
+ const [timestampSeparator, setTimestampSeparator] = useState<TimestampSeparator>(' ');
+
+ // Scroll position as byte offset (preserved across mode switches)
+ const [scrollOffset, setScrollOffset] = useState(0);
+
+ // Search & Filter
+ const [searchQuery, setSearchQuery] = useState('');
+ const [filterEnabled, setFilterEnabled] = useState(false);
+
+ const handleCopy = useCallback(() => {
+ onCopy(viewMode);
+ }, [onCopy, viewMode]);
+
+ const handlePlotter = useCallback(async () => {
+ try {
+ const { invoke } = await import('@tauri-apps/api/core');
+ await invoke('open_plotter_window');
+ } catch (e) {
+ console.error('Failed to open plotter:', e);
+ alert('Failed to open plotter: ' + e);
+ }
+ }, []);
+
+ return (
+ <div className="receive-panel">
+ <div className="panel-header">Receive</div>
+
+ {/* Search Bar */}
+ <div className="search-bar">
+ <input
+ type="text"
+ placeholder={viewMode === 'ascii' ? 'Search (regex supported)...' : 'Search...'}
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="search-input"
+ />
+ <button
+ className={`filter-toggle ${filterEnabled ? 'active' : ''}`}
+ onClick={() => setFilterEnabled(!filterEnabled)}
+ title="Filter: Show only matching lines"
+ >
+ {filterEnabled ? '🔍 Filter ON' : '🔍 Filter'}
+ </button>
+ </div>
+
+ {/* Log Viewer Area - Switch between HexViewer and AsciiViewer */}
+ <div className="viewer-wrapper">
+ {viewMode === 'hex' ? (
+ <HexViewer
+ totalBytes={totalBytes}
+ autoScroll={autoScroll}
+ initialOffset={scrollOffset}
+ onScrollChange={setScrollOffset}
+ />
+ ) : (
+ <AsciiViewer
+ totalBytes={totalBytes}
+ autoScroll={autoScroll}
+ showTimestamp={showTimestamp}
+ lineWrap={lineWrap}
+ initialOffset={scrollOffset}
+ onScrollChange={setScrollOffset}
+ timestampSeparator={timestampSeparator}
+ />
+ )}
+ </div>
+
+ {/* Footer Controls */}
+ <div className="receive-footer">
+ <div className="footer-left">
+ {/* Hex/ASCII Toggle Switch */}
+ <div className="mode-switch" title="Toggle between Hex and ASCII view">
+ <span className={`mode-label ${viewMode === 'hex' ? 'active hex' : ''}`}>Hex</span>
+ <label className="switch">
+ <input
+ type="checkbox"
+ checked={viewMode === 'ascii'}
+ onChange={(e) => setViewMode(e.target.checked ? 'ascii' : 'hex')}
+ />
+ <span className="slider"></span>
+ </label>
+ <span className={`mode-label ${viewMode === 'ascii' ? 'active ascii' : ''}`}>
+ ASCII
+ </span>
+ </div>
+
+ <div className="control-separator"></div>
+
+ <label
+ className={`control-label ${viewMode === 'hex' ? 'disabled' : ''}`}
+ title="Wrap long lines (ASCII mode only)"
+ >
+ <input
+ type="checkbox"
+ checked={lineWrap}
+ onChange={(e) => setLineWrap(e.target.checked)}
+ disabled={viewMode === 'hex'}
+ />
+ Line Wrap
+ </label>
+
+ <label
+ className={`control-label ${viewMode === 'hex' ? 'disabled' : ''}`}
+ title="Show timestamp (ASCII mode only)"
+ >
+ <input
+ type="checkbox"
+ checked={showTimestamp}
+ onChange={(e) => setShowTimestamp(e.target.checked)}
+ disabled={viewMode === 'hex'}
+ />
+ Timestamp
+ <select
+ value={timestampSeparator}
+ onChange={(e) => setTimestampSeparator(e.target.value as TimestampSeparator)}
+ disabled={viewMode === 'hex' || !showTimestamp}
+ className="separator-select"
+ title="Separator between Timestamp and Data"
+ style={{
+ marginLeft: '8px',
+ background: '#3c3c3c',
+ color: '#d4d4d4',
+ border: '1px solid #555',
+ borderRadius: '3px',
+ padding: '1px 4px',
+ fontSize: '11px',
+ outline: 'none',
+ cursor: 'pointer',
+ opacity: !showTimestamp || viewMode === 'hex' ? 0.5 : 1,
+ }}
+ >
+ <option value=" ">Space</option>
+ <option value=",">Comma</option>
+ <option value=" ">Tab</option>
+ </select>
+ </label>
+
+ <div className="control-separator"></div>
+
+ <label className="control-label" title="Auto scroll to bottom on new data">
+ <input
+ type="checkbox"
+ checked={autoScroll}
+ onChange={(e) => onAutoScrollChange(e.target.checked)}
+ />
+ Auto Scroll
+ </label>
+ </div>
+
+ <div className="footer-right">
+ <button onClick={handlePlotter} className="plotter-button" title="Open Plotter (Phase 7)">
+ Plotter
+ </button>
+ <button onClick={onExport} title="Save to file">
+ Save
+ </button>
+ <button onClick={handleCopy} title="Copy all data to clipboard">
+ Copy
+ </button>
+ <button onClick={onClear} title="Clear all data (including disk)">
+ Clear
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, KeyboardEvent } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import {
+ parseHexString,
+ appendLineEnding,
+ addToHistory,
+ type LineEnding,
+} from '../utils/sendUtils';
+
+interface SendPanelProps {
+ connected: boolean;
+ onSend?: (bytes: number) => void;
+}
+
+type InputMode = 'TEXT' | 'HEX';
+
+export default function SendPanel({ connected, onSend }: SendPanelProps) {
+ const [inputMode, setInputMode] = useState<InputMode>('TEXT');
+ const [inputText, setInputText] = useState('');
+ const [lineEnding, setLineEnding] = useState<LineEnding>('LF');
+ const [sendOnEnter, setSendOnEnter] = useState(false);
+ const [sendBinary, setSendBinary] = useState(false);
+
+ // History
+ const [history, setHistory] = useState<string[]>([]);
+ const [historyIndex, setHistoryIndex] = useState(-1);
+
+ const handleSend = async () => {
+ if (!connected || !inputText) return;
+
+ let dataToSend: number[] = [];
+
+ try {
+ if (inputMode === 'HEX' || sendBinary) {
+ // sendBinary flag or HEX mode
+ const parsed = parseHexString(inputText);
+ if (parsed === null) {
+ alert('Invalid Hex: Odd number of characters or invalid hex');
+ return;
+ }
+ dataToSend = parsed;
+ } else {
+ // Convert string to bytes (UTF-8)
+ const encoder = new TextEncoder();
+ dataToSend = Array.from(encoder.encode(inputText));
+
+ // Append line ending
+ dataToSend = appendLineEnding(dataToSend, lineEnding);
+ }
+
+ await invoke('write_data', { data: dataToSend });
+
+ // Update history
+ setHistory((prev) => addToHistory(prev, inputText));
+ setHistoryIndex(-1);
+ setInputText('');
+
+ if (onSend) onSend(dataToSend.length);
+ } catch (e) {
+ console.error(e);
+ alert('Failed to send: ' + e);
+ }
+ };
+
+ const handleKeyDown = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+ if (e.key === 'Enter') {
+ if (sendOnEnter && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ if (history.length > 0) {
+ const nextIndex = Math.min(historyIndex + 1, history.length - 1);
+ setHistoryIndex(nextIndex);
+ setInputText(history[nextIndex]);
+ }
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ if (historyIndex > 0) {
+ const nextIndex = historyIndex - 1;
+ setHistoryIndex(nextIndex);
+ setInputText(history[nextIndex]);
+ } else if (historyIndex === 0) {
+ setHistoryIndex(-1);
+ setInputText('');
+ }
+ }
+ };
+
+ return (
+ <div className="send-panel">
+ <div className="panel-header">Send</div>
+ <div className="send-body">
+ <textarea
+ className="send-input"
+ value={inputText}
+ onChange={(e) => setInputText(e.target.value)}
+ onKeyDown={handleKeyDown}
+ disabled={!connected}
+ placeholder={inputMode === 'HEX' || sendBinary ? 'e.g. 48 65 6C 6C 6F' : ''}
+ />
+ <div className="send-controls">
+ <button onClick={handleSend} disabled={!connected || !inputText} className="send-button">
+ Send
+ </button>
+ <div className="send-options">
+ <label>
+ <input
+ type="checkbox"
+ checked={sendOnEnter}
+ onChange={(e) => setSendOnEnter(e.target.checked)}
+ />{' '}
+ Send with Enter
+ </label>
+ <label>
+ <input
+ type="checkbox"
+ checked={sendBinary}
+ onChange={(e) => {
+ setSendBinary(e.target.checked);
+ if (e.target.checked) setInputMode('HEX');
+ else setInputMode('TEXT');
+ }}
+ />{' '}
+ Send Binary
+ </label>
+ </div>
+ <select
+ value={lineEnding}
+ onChange={(e) => setLineEnding(e.target.value as LineEnding)}
+ className="line-ending-select"
+ disabled={sendBinary}
+ >
+ <option value="NONE">None</option>
+ <option value="LF">LF (\n)</option>
+ <option value="CR">CR (\r)</option>
+ <option value="CRLF">CRLF (\r\n)</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from 'react';
+import './SettingsPanel.css';
+
+export interface SerialConfig {
+ baud_rate: number;
+ data_bits: number;
+ flow_control: 'None' | 'Software' | 'Hardware';
+ parity: 'None' | 'Odd' | 'Even';
+ stop_bits: number;
+ dtr: boolean;
+ rts: boolean;
+}
+
+interface SettingsPanelProps {
+ ports: string[];
+ selectedPort: string;
+ onPortChange: (port: string) => void;
+ onRefreshPorts: () => void;
+ config: SerialConfig;
+ onConfigChange: (config: SerialConfig) => void;
+ isConnected: boolean;
+ onConnect: () => void;
+ onDisconnect: () => void;
+}
+
+export default function SettingsPanel({
+ ports,
+ selectedPort,
+ onPortChange,
+ onRefreshPorts,
+ config,
+ onConfigChange,
+ isConnected,
+ onConnect,
+ onDisconnect,
+}: SettingsPanelProps) {
+ const [baudRateEditing, setBaudRateEditing] = useState(false);
+ const [baudDropdownOpen, setBaudDropdownOpen] = useState(false);
+
+ const handleChange = <K extends keyof SerialConfig>(key: K, value: SerialConfig[K]) => {
+ onConfigChange({ ...config, [key]: value });
+ };
+
+ return (
+ <div className="settings-panel">
+ <div className="panel-header">Settings</div>
+ <div className="settings-row">
+ <select
+ value={selectedPort}
+ onChange={(e) => onPortChange(e.target.value)}
+ onClick={onRefreshPorts}
+ disabled={isConnected}
+ className="port-select"
+ >
+ {ports.map((port) => (
+ <option key={port} value={port}>
+ {port}
+ </option>
+ ))}
+ {ports.length === 0 && <option value="">No ports found</option>}
+ </select>
+
+ <div className="baud-custom-container">
+ {baudRateEditing ? (
+ <input
+ type="number"
+ value={config.baud_rate}
+ onChange={(e) => handleChange('baud_rate', Number(e.target.value))}
+ onBlur={() => setBaudRateEditing(false)}
+ onKeyDown={(e) => e.key === 'Enter' && setBaudRateEditing(false)}
+ disabled={isConnected}
+ autoFocus
+ className="baud-input"
+ />
+ ) : (
+ <div
+ className={`baud-trigger ${isConnected ? 'disabled' : ''}`}
+ onClick={() => {
+ if (isConnected) return;
+ setBaudDropdownOpen(!baudDropdownOpen);
+ }}
+ >
+ <span>{config.baud_rate} bps</span>
+ <span className="baud-trigger-arrow">▼</span>
+ </div>
+ )}
+
+ {baudDropdownOpen && !baudRateEditing && !isConnected && (
+ <>
+ <div className="baud-dropdown-overlay" onClick={() => setBaudDropdownOpen(false)} />
+ <ul className="baud-dropdown-list">
+ {[
+ 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600, 1000000, 2000000,
+ 3000000, 12000000,
+ ].map((rate) => (
+ <li
+ key={rate}
+ className="baud-dropdown-item"
+ onClick={() => {
+ handleChange('baud_rate', rate);
+ setBaudDropdownOpen(false);
+ }}
+ >
+ {rate}
+ </li>
+ ))}
+ <li
+ className="baud-dropdown-edit"
+ onClick={() => {
+ setBaudRateEditing(true);
+ setBaudDropdownOpen(false);
+ }}
+ >
+ [edit]
+ </li>
+ </ul>
+ </>
+ )}
+ </div>
+
+ <button
+ onClick={isConnected ? onDisconnect : onConnect}
+ className={`connect-button ${isConnected ? 'connected' : ''}`}
+ >
+ {isConnected ? 'Disconnect' : 'Connect'}
+ </button>
+
+ <label className="checkbox-label">
+ <input type="checkbox" disabled />
+ Auto Connect
+ </label>
+ </div>
+
+ <div className="settings-advanced">
+ <div className="advanced-group">
+ <span className="label">Data Bits</span>
+ <select
+ value={config.data_bits}
+ onChange={(e) => handleChange('data_bits', Number(e.target.value))}
+ disabled={isConnected}
+ >
+ {[5, 6, 7, 8].map((b) => (
+ <option key={b} value={b}>
+ {b}
+ </option>
+ ))}
+ </select>
+ </div>
+
+ <div className="advanced-group">
+ <span className="label">Parity</span>
+ <select
+ value={config.parity}
+ onChange={(e) => handleChange('parity', e.target.value as SerialConfig['parity'])}
+ disabled={isConnected}
+ >
+ {['None', 'Odd', 'Even'].map((p) => (
+ <option key={p} value={p}>
+ {p}
+ </option>
+ ))}
+ </select>
+ </div>
+
+ <div className="advanced-group checkbox-group">
+ <label>
+ <input
+ type="checkbox"
+ checked={config.dtr}
+ onChange={(e) => handleChange('dtr', e.target.checked)}
+ />{' '}
+ DtrEnable
+ </label>
+ <label>
+ <input
+ type="checkbox"
+ checked={config.rts}
+ onChange={(e) => handleChange('rts', e.target.checked)}
+ />{' '}
+ RtsEnable
+ </label>
+ </div>
+
+ <div className="advanced-group">
+ <span className="label">Stop Bits</span>
+ <select
+ value={config.stop_bits}
+ onChange={(e) => handleChange('stop_bits', Number(e.target.value))}
+ disabled={isConnected}
+ >
+ <option value={1}>One</option>
+ <option value={2}>Two</option>
+ </select>
+ </div>
+
+ <div className="advanced-group">
+ <span className="label">Flow Control</span>
+ <select
+ value={config.flow_control}
+ onChange={(e) =>
+ handleChange('flow_control', e.target.value as SerialConfig['flow_control'])
+ }
+ disabled={isConnected}
+ >
+ {['None', 'Software', 'Hardware'].map((f) => (
+ <option key={f} value={f}>
+ {f}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ReceivePanel.tsx | +
+
+ |
+ 0% | +0/23 | +0% | +0/24 | +0% | +0/10 | +0% | +0/23 | +
| SendPanel.tsx | +
+
+ |
+ 0% | +0/58 | +0% | +0/36 | +0% | +0/8 | +0% | +0/54 | +
| SettingsPanel.tsx | +
+
+ |
+ 0% | +0/28 | +0% | +0/20 | +0% | +0/21 | +0% | +0/27 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useRef, useEffect, useCallback } from 'react';
+import uPlot from 'uplot';
+import 'uplot/dist/uPlot.min.css';
+import './LineChart.css';
+
+// Channel colors (16 max)
+const COLORS = [
+ '#3b82f6',
+ '#ef4444',
+ '#22c55e',
+ '#f59e0b',
+ '#8b5cf6',
+ '#ec4899',
+ '#06b6d4',
+ '#84cc16',
+ '#f97316',
+ '#6366f1',
+ '#14b8a6',
+ '#eab308',
+ '#a855f7',
+ '#f43f5e',
+ '#0ea5e9',
+ '#10b981',
+];
+
+interface LineChartProps {
+ // Data: { channelName: [[timestamps], [values]] }
+ data: Record<string, [number, number][]>;
+ // Time range in seconds (for display width)
+ timeRange?: number;
+ // Whether the chart is paused
+ isPaused?: boolean;
+}
+
+export default function LineChart({ data, isPaused = false }: LineChartProps) {
+ const containerRef = useRef<HTMLDivElement>(null);
+ const chartRef = useRef<uPlot | null>(null);
+ const channelsRef = useRef<string[]>([]);
+ const isZoomedRef = useRef(false); // Track if user has drag-zoomed (frozen view)
+ const manualYScaleRef = useRef<{ min: number; max: number } | null>(null); // Track wheel zoom Y scale
+ const manualXRangeRef = useRef<number | null>(null); // Track wheel zoom X range (width in seconds)
+
+ // Build uPlot data format: [timestamps, ...values]
+ const buildChartData = useCallback(() => {
+ // Sort channels alphabetically to maintain stable color order
+ const channels = Object.keys(data).sort();
+ if (channels.length === 0) {
+ return { data: [[]] as uPlot.AlignedData, channels: [] };
+ }
+
+ // Collect all unique timestamps and sort
+ const timestampSet = new Set<number>();
+ for (const channel of channels) {
+ const points = data[channel];
+ for (const [t] of points) {
+ timestampSet.add(t);
+ }
+ }
+ const timestamps = Array.from(timestampSet).sort((a, b) => a - b);
+
+ if (timestamps.length === 0) {
+ return { data: [[]] as uPlot.AlignedData, channels: [] };
+ }
+
+ // Build value arrays for each channel
+ const chartData: (number | null)[][] = [timestamps.map((t) => t / 1000)]; // Convert ms to seconds
+
+ for (const channel of channels) {
+ const points = data[channel];
+ const valueMap = new Map<number, number>();
+ for (const [t, v] of points) {
+ valueMap.set(t, v);
+ }
+
+ const values = timestamps.map((t) => valueMap.get(t) ?? null);
+ chartData.push(values);
+ }
+
+ return { data: chartData as uPlot.AlignedData, channels };
+ }, [data]);
+
+ // Create or update chart
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const { data: chartData, channels } = buildChartData();
+
+ // If no data or no channels, destroy chart
+ if (channels.length === 0 || chartData[0].length === 0) {
+ if (chartRef.current) {
+ chartRef.current.destroy();
+ chartRef.current = null;
+ }
+ return;
+ }
+
+ // Check if channels changed
+ const channelsChanged =
+ channels.length !== channelsRef.current.length ||
+ channels.some((ch, i) => ch !== channelsRef.current[i]);
+
+ if (channelsChanged || !chartRef.current) {
+ // Need to recreate chart
+ if (chartRef.current) {
+ chartRef.current.destroy();
+ }
+
+ const series: uPlot.Series[] = [
+ { label: 'Time' }, // X axis
+ ...channels.map((ch, i) => ({
+ label: ch,
+ stroke: COLORS[i % COLORS.length],
+ width: 2,
+ spanGaps: true,
+ })),
+ ];
+
+ const opts: uPlot.Options = {
+ width: containerRef.current.clientWidth,
+ height: containerRef.current.clientHeight,
+ series,
+ scales: {
+ x: {
+ time: false, // We're using seconds, not Unix timestamps
+ auto: false, // Manual scale control for zoom persistence
+ },
+ y: {
+ auto: false, // Manual scale control for zoom persistence
+ },
+ },
+ axes: [
+ {
+ stroke: '#888',
+ grid: { stroke: '#333' },
+ ticks: { stroke: '#444' },
+ },
+ {
+ stroke: '#888',
+ grid: { stroke: '#333' },
+ ticks: { stroke: '#444' },
+ },
+ ],
+ legend: {
+ show: true,
+ },
+ cursor: {
+ show: true,
+ points: { show: true },
+ drag: {
+ x: true, // Enable drag to select X range
+ y: true, // Enable drag to select Y range
+ setScale: true, // Apply zoom on drag release
+ },
+ },
+ hooks: {
+ setSelect: [
+ () => {
+ isZoomedRef.current = true; // Mark as zoomed when user selects range
+ },
+ ],
+ init: [
+ (u) => {
+ u.over.addEventListener('dblclick', () => {
+ // Reset zoom flag and manual scales
+ isZoomedRef.current = false;
+ manualYScaleRef.current = null;
+ manualXRangeRef.current = null;
+ const data = u.data;
+ if (data && data[0] && data[0].length > 0) {
+ const xData = data[0] as number[];
+ const xMin = Math.min(...xData);
+ const xMax = Math.max(...xData);
+ u.setScale('x', { min: xMin, max: xMax });
+
+ // Find Y range from all series
+ let yMin = Infinity;
+ let yMax = -Infinity;
+ for (let i = 1; i < data.length; i++) {
+ const yData = data[i] as (number | null)[];
+ for (const v of yData) {
+ if (v !== null) {
+ yMin = Math.min(yMin, v);
+ yMax = Math.max(yMax, v);
+ }
+ }
+ }
+ if (yMin !== Infinity && yMax !== -Infinity) {
+ const padding = (yMax - yMin) * 0.1;
+ u.setScale('y', { min: yMin - padding, max: yMax + padding });
+ }
+ }
+ });
+
+ // Add wheel zoom
+ u.over.addEventListener('wheel', (e) => {
+ e.preventDefault();
+
+ const factor = e.deltaY > 0 ? 1.1 : 0.9;
+ const rect = u.over.getBoundingClientRect();
+ const xPos = e.clientX - rect.left;
+ const yPos = e.clientY - rect.top;
+
+ // Get current scales
+ const xScale = u.scales.x;
+ const yScale = u.scales.y;
+
+ // Check if scales are properly initialized (handle 0 as valid value)
+ if (
+ xScale.min === undefined ||
+ xScale.max === undefined ||
+ yScale.min === undefined ||
+ yScale.max === undefined
+ )
+ return;
+
+ // Calculate cursor position in data space
+ const xVal = u.posToVal(xPos, 'x');
+ const yVal = u.posToVal(yPos, 'y');
+
+ if (e.shiftKey) {
+ // Zoom X axis
+ const xRange = xScale.max - xScale.min;
+ const newRange = xRange * factor;
+ const ratio = (xVal - xScale.min) / xRange;
+ const newMin = xVal - newRange * ratio;
+ const newMax = xVal + newRange * (1 - ratio);
+ u.setScale('x', { min: newMin, max: newMax });
+ // Save X range width for sliding window behavior
+ manualXRangeRef.current = newRange;
+ } else {
+ // Zoom Y axis
+ const yRange = yScale.max - yScale.min;
+ const newRange = yRange * factor;
+ const ratio = (yVal - yScale.min) / yRange;
+ const newMin = yVal - newRange * ratio;
+ const newMax = yVal + newRange * (1 - ratio);
+ u.setScale('y', { min: newMin, max: newMax });
+ // Save manual Y scale for data updates (but keep showing new data)
+ manualYScaleRef.current = { min: newMin, max: newMax };
+ }
+ });
+ },
+ ],
+ },
+ };
+
+ chartRef.current = new uPlot(opts, chartData, containerRef.current);
+ channelsRef.current = channels;
+ } else {
+ // Just update data, preserving zoom if user has zoomed
+ const chart = chartRef.current;
+ const prevXScale = { min: chart.scales.x.min, max: chart.scales.x.max };
+ const prevYScale = { min: chart.scales.y.min, max: chart.scales.y.max };
+
+ chart.setData(chartData);
+
+ if (isZoomedRef.current) {
+ // Restore previous zoom level
+ if (prevXScale.min !== undefined && prevXScale.max !== undefined) {
+ chart.setScale('x', { min: prevXScale.min, max: prevXScale.max });
+ }
+ if (prevYScale.min !== undefined && prevYScale.max !== undefined) {
+ chart.setScale('y', { min: prevYScale.min, max: prevYScale.max });
+ }
+ } else {
+ // Auto-scale to new data range
+ if (chartData[0] && chartData[0].length > 0) {
+ const xData = chartData[0] as number[];
+ const xMin = Math.min(...xData);
+ const xMax = Math.max(...xData);
+
+ // Use manual X range if set (sliding window follows new data)
+ if (manualXRangeRef.current !== null) {
+ const range = manualXRangeRef.current;
+ // Slide window to latest data
+ chart.setScale('x', { min: xMax - range, max: xMax });
+ } else {
+ chart.setScale('x', { min: xMin, max: xMax });
+ }
+
+ let yMin = Infinity;
+ let yMax = -Infinity;
+ for (let i = 1; i < chartData.length; i++) {
+ const yData = chartData[i] as (number | null)[];
+ for (const v of yData) {
+ if (v !== null) {
+ yMin = Math.min(yMin, v);
+ yMax = Math.max(yMax, v);
+ }
+ }
+ }
+ if (yMin !== Infinity && yMax !== -Infinity) {
+ // Use manual Y scale if set by wheel zoom, otherwise auto-scale
+ if (manualYScaleRef.current) {
+ chart.setScale('y', manualYScaleRef.current);
+ } else {
+ const padding = (yMax - yMin) * 0.1 || 1;
+ chart.setScale('y', { min: yMin - padding, max: yMax + padding });
+ }
+ }
+ }
+ }
+ }
+
+ return () => {
+ // Cleanup on unmount
+ };
+ }, [buildChartData]);
+
+ // Handle resize
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ if (chartRef.current && entries[0]) {
+ const { width, height } = entries[0].contentRect;
+ chartRef.current.setSize({ width, height });
+ }
+ });
+
+ resizeObserver.observe(containerRef.current);
+
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, []);
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ if (chartRef.current) {
+ chartRef.current.destroy();
+ chartRef.current = null;
+ }
+ };
+ }, []);
+
+ return <div ref={containerRef} className={`line-chart-container ${isPaused ? 'paused' : ''}`} />;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState, useEffect, useCallback } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import LineChart from './LineChart';
+import './PlotterWindow.css';
+
+// Types matching Rust PlotterDataPayload
+interface ChannelInfo {
+ name: string;
+ channel_type: 'Line' | 'State' | 'Auto';
+ latest_value: string | null;
+ point_count: number;
+}
+
+interface StateChange {
+ start_ms: number;
+ end_ms: number | null;
+ state: string;
+}
+
+interface PlotterDataPayload {
+ channels: ChannelInfo[];
+ line_data: Record<string, [number, number][]>;
+ state_data: Record<string, StateChange[]>;
+ start_ms: number;
+ end_ms: number;
+}
+
+export default function PlotterWindow() {
+ const [data, setData] = useState<PlotterDataPayload | null>(null);
+ const [error, setError] = useState<string | null>(null);
+ const [isRunning, setIsRunning] = useState(true);
+ const [threadStarted, setThreadStarted] = useState(false);
+
+ // Start plotter thread on mount
+ useEffect(() => {
+ const startThread = async () => {
+ try {
+ await invoke('start_plotter_thread');
+ setThreadStarted(true);
+ console.log('Plotter thread started');
+ } catch (e) {
+ // May fail if serial port not open, that's OK
+ console.log('Could not start plotter thread (port may not be open):', e);
+ }
+ };
+ startThread();
+
+ // Stop thread on unmount
+ return () => {
+ invoke('stop_plotter_thread').catch(console.error);
+ };
+ }, []);
+
+ // Fetch plotter data
+ const fetchData = useCallback(async () => {
+ try {
+ const payload = await invoke<PlotterDataPayload>('get_plotter_data');
+ setData(payload);
+ setError(null);
+ } catch (e) {
+ setError(String(e));
+ }
+ }, []);
+
+ // Poll for data updates
+ useEffect(() => {
+ if (!isRunning) return;
+
+ // Use setTimeout for initial fetch to avoid synchronous setState in effect
+ const timeoutId = setTimeout(fetchData, 0);
+ const interval = setInterval(fetchData, 100); // 10Hz update rate
+
+ return () => {
+ clearTimeout(timeoutId);
+ clearInterval(interval);
+ };
+ }, [fetchData, isRunning]);
+
+ // Toggle pause/resume (only affects frontend polling, backend continues collecting)
+ const toggleRunning = useCallback(() => {
+ setIsRunning((prev) => !prev);
+ // Note: We intentionally don't call set_plotter_enabled here
+ // Backend keeps collecting data so we can show it when resumed
+ }, []);
+
+ // Format time duration
+ const formatDuration = (ms: number): string => {
+ const seconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+
+ if (hours > 0) {
+ return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+ } else if (minutes > 0) {
+ return `${minutes}m ${seconds % 60}s`;
+ } else {
+ return `${seconds}.${Math.floor((ms % 1000) / 100)}s`;
+ }
+ };
+
+ // Check if we have line data to display
+ const hasLineData =
+ data && Object.keys(data.line_data).some((key) => data.line_data[key].length > 0);
+
+ return (
+ <div className="plotter-window">
+ {/* Header */}
+ <div className="plotter-header">
+ <h1>Serial Plotter</h1>
+ <div className="plotter-controls">
+ <button
+ className={`control-button ${isRunning ? 'pause' : 'play'}`}
+ onClick={toggleRunning}
+ title={isRunning ? 'Pause' : 'Resume'}
+ >
+ {isRunning ? '⏸ Pause' : '▶ Resume'}
+ </button>
+ </div>
+ </div>
+
+ {/* Error display */}
+ {error && <div className="plotter-error">{error}</div>}
+
+ {/* Main content */}
+ <div className="plotter-content">
+ {hasLineData ? (
+ <>
+ {/* Line Chart */}
+ <div className="chart-area">
+ <LineChart data={data!.line_data} isPaused={!isRunning} />
+ </div>
+
+ {/* Channel legend */}
+ <div className="channel-legend">
+ {data!.channels
+ .filter((ch) => ch.channel_type === 'Line' || ch.channel_type === 'Auto')
+ .map((channel) => (
+ <div key={channel.name} className="legend-item">
+ <span className="legend-name">{channel.name}:</span>
+ <span className="legend-value">{channel.latest_value ?? '--'}</span>
+ <span className="legend-count">{channel.point_count} pts</span>
+ </div>
+ ))}
+ </div>
+
+ {/* State data (if any) */}
+ {data && Object.keys(data.state_data).length > 0 && (
+ <div className="state-preview">
+ <h2>State Data</h2>
+ <div className="data-table">
+ {Object.entries(data.state_data).map(([channel, states]) => (
+ <div key={channel} className="data-row">
+ <span className="data-channel">{channel}:</span>
+ <span className="data-values">
+ {states.length > 0
+ ? states
+ .slice(-3)
+ .map((s) => s.state)
+ .join(' → ')
+ : '--'}
+ </span>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+ </>
+ ) : (
+ <div className="no-data">
+ <p>No data yet.</p>
+ <p className="hint">
+ {threadStarted
+ ? 'Send data in one of these formats:'
+ : 'Connect to a serial port first, then send data:'}
+ </p>
+ <ul className="format-list">
+ <li>
+ <code>123.45</code> - Single value
+ </li>
+ <li>
+ <code>10,20,30</code> - CSV format
+ </li>
+ <li>
+ <code>temp:25.5,humidity:60</code> - Labeled values
+ </li>
+ <li>
+ <code>state:RUNNING</code> - State value
+ </li>
+ </ul>
+ </div>
+ )}
+ </div>
+
+ {/* Footer */}
+ <div className="plotter-footer">
+ <span className="status-text">{isRunning ? '● Recording' : '○ Paused'}</span>
+ {data && (
+ <span className="duration">Duration: {formatDuration(data.end_ms - data.start_ms)}</span>
+ )}
+ <span className="version">Phase B</span>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| LineChart.tsx | +
+
+ |
+ 0% | +0/148 | +0% | +0/80 | +0% | +0/18 | +0% | +0/141 | +
| PlotterWindow.tsx | +
+
+ |
+ 0% | +0/47 | +0% | +0/33 | +0% | +0/15 | +0% | +0/44 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useCallback, useRef, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { ROW_HEIGHT, BUFFER_ROWS } from './viewerConstants';
+import { useByteScroll } from './useByteScroll';
+import './AsciiViewer.css';
+
+interface AsciiLine {
+ offset: number;
+ text: string;
+ timestamp: string | null;
+}
+
+interface AsciiLinesPayload {
+ lines: AsciiLine[];
+ total_lines: number;
+}
+
+interface AsciiViewerProps {
+ totalBytes: number;
+ autoScroll: boolean;
+ showTimestamp?: boolean;
+ lineWrap?: boolean;
+ initialOffset?: number;
+ onScrollChange?: (byteOffset: number) => void;
+ timestampSeparator?: string;
+}
+
+export default function AsciiViewer({
+ totalBytes,
+ autoScroll,
+ showTimestamp = false,
+ lineWrap = false,
+ initialOffset = 0,
+ onScrollChange = () => {},
+ timestampSeparator = ' ',
+}: AsciiViewerProps) {
+ // Data state
+ const [lines, setLines] = useState<AsciiLine[]>([]);
+ const [totalLines, setTotalLines] = useState(0);
+ const [currentStartLine, setCurrentStartLine] = useState(0);
+
+ // Fetching guard
+ const fetchingRef = useRef(false);
+ const lastFetchLineRef = useRef(-Infinity);
+ const lastTotalBytesRef = useRef(0);
+
+ // Track total lines from backend for proper scroll calculation
+ const totalLinesRef = useRef(0);
+
+ // Track initialization to prevent double-setting
+ const [initialLineSet, setInitialLineSet] = useState(false);
+
+ // Determine effective total lines for scroll calculation
+ const effectiveTotalLines =
+ totalLinesRef.current > 0 ? totalLinesRef.current : Math.max(1, Math.ceil(totalBytes / 80));
+
+ // Byte-based scroll
+ const {
+ containerRef,
+ scrollTop,
+ scrollHeight,
+ visibleRows,
+ handleScroll,
+ getByteOffset,
+ scrollTo,
+ } = useByteScroll({
+ totalBytes,
+ totalRows: effectiveTotalLines,
+ autoScroll,
+ initialOffset,
+ onScrollChange,
+ });
+
+ // Calculate ASCII-specific scroll height based on actual line count
+ // NOW HANDLED BY HOOK via totalRows
+ const asciiScrollHeight = scrollHeight;
+
+ // Initialize scroll position using exact line mapping from backend
+ useEffect(() => {
+ // Only run if we have an initial offset (e.g. switched from Hex), haven't set it yet, and data exists.
+ // CRITICAL FIX: We MUST wait until effectiveTotalLines > 1 (meaning we have actual line count or at least a valid estimation based on data)
+ // to avoid clamping the scroll position to an incorrectly small scrollHeight.
+ // If totalLinesRef.current is 0, effectiveTotalLines is a raw estimation.
+ // Ideally we wait for totalLinesRef.current > 0 if totalBytes is large.
+ const hasValidLineCount = totalLinesRef.current > 0 || totalBytes < 1000;
+
+ if (!initialLineSet && totalBytes > 0 && hasValidLineCount) {
+ if (initialOffset > 0) {
+ invoke<{ line_index: number }>('get_line_index', { offset: initialOffset })
+ .then((res) => {
+ // Calculate exact target scrollTop for this line
+ const targetScrollTop = res.line_index * ROW_HEIGHT;
+
+ // Force scroll to this position and update anchor to match
+ // Passing initialOffset ensures the "Byte Anchor" remains exact (e.g. 5000),
+ // even though visual position is now at Line Start (e.g. 4980 bytes).
+ scrollTo(targetScrollTop, initialOffset);
+
+ setInitialLineSet(true);
+ })
+ .catch((err) => {
+ console.error('Failed to get line index:', err);
+ setInitialLineSet(true); // Fallback to default behavior
+ });
+ } else {
+ // No offset, just mark as set
+ setInitialLineSet(true);
+ }
+ }
+ }, [initialOffset, totalBytes, scrollTo, initialLineSet, effectiveTotalLines]);
+
+ // Fetch lines from backend
+ const fetchLines = useCallback(
+ async (startLine: number, force: boolean = false) => {
+ if (fetchingRef.current) return;
+ // Optimization: Skip if we are close to the last fetched line.
+ // EXCEPTION: If startLine is 0, we MUST ensure we have the very first line.
+ // If we are at 0, and last fetch was NOT 0 (e.g. 10), we must fetch.
+ // If last fetch was 0, we can skip.
+ if (
+ !force &&
+ startLine !== 0 &&
+ Math.abs(startLine - lastFetchLineRef.current) < BUFFER_ROWS / 2
+ )
+ return;
+ if (!force && startLine === 0 && lastFetchLineRef.current === 0) return;
+
+ fetchingRef.current = true;
+ lastFetchLineRef.current = startLine;
+
+ try {
+ const fetchCount = visibleRows + BUFFER_ROWS * 2;
+ const payload = await invoke<AsciiLinesPayload>('get_ascii_lines', {
+ startLine: startLine,
+ lineCount: fetchCount,
+ showCtrl: false,
+ showTimestamp: showTimestamp,
+ });
+ setLines(payload.lines);
+ setTotalLines(payload.total_lines);
+ totalLinesRef.current = payload.total_lines;
+ setCurrentStartLine(startLine);
+ } catch (err) {
+ console.error('Failed to fetch lines:', err);
+ } finally {
+ fetchingRef.current = false;
+ }
+ },
+ [visibleRows, showTimestamp]
+ );
+
+ // Effect: fetch data when scroll position changes or totalBytes changes
+ useEffect(() => {
+ if (totalBytes === 0) {
+ setLines([]);
+ setTotalLines(0);
+ totalLinesRef.current = 0;
+ return;
+ }
+
+ // Use byte offset for consistent Hex/ASCII scroll position
+ const byteOffset = getByteOffset();
+ // Use totalLines from backend if available, otherwise estimate
+ // const effectiveTotalLines =
+ // totalLinesRef.current > 0 ? totalLinesRef.current : Math.max(1, Math.ceil(totalBytes / 80));
+
+ // Calculate start line from byte ratio (same approach as HexViewer)
+ const scrollRatio = totalBytes > 0 ? byteOffset / totalBytes : 0;
+ const startLine = Math.max(0, Math.floor(scrollRatio * effectiveTotalLines) - BUFFER_ROWS);
+
+ // Force refetch when totalBytes changes (new data arrived)
+ const forceRefetch = totalBytes !== lastTotalBytesRef.current;
+ lastTotalBytesRef.current = totalBytes;
+
+ fetchLines(startLine, forceRefetch);
+ }, [totalBytes, scrollTop, getByteOffset, fetchLines, effectiveTotalLines]);
+
+ // Handle Ctrl+A to warn user about partial selection
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+ e.preventDefault();
+ alert(
+ 'To copy all data, please use the export function or copy button in the toolbar.\n(Standard selection only copies visible data due to performance optimizations)'
+ );
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, []);
+
+ // Handle Copy to restore Real ASCII control codes
+ const handleCopy = useCallback(
+ (e: React.ClipboardEvent<HTMLDivElement>) => {
+ const selection = window.getSelection();
+ if (!selection) return;
+ let text = selection.toString();
+
+ if (text) {
+ e.preventDefault();
+
+ // 1. Remove browser-inserted newlines (display artifacts)
+ text = text.replace(/[\r\n]+/g, '');
+
+ // 2. Replace Unicode Control Pictures back to ASCII
+ // 0x2401-0x241F -> 0x01-0x1F (Skip 0x2400 NULL to prevent truncation)
+ // 0x2421 -> 0x7F
+ let restoredText = text.replace(/[\u2401-\u241F\u2421]/g, (char) => {
+ const code = char.charCodeAt(0);
+ if (code === 0x2421) return '\x7F'; // DEL
+ return String.fromCharCode(code - 0x2400); // 0x01-0x1F
+ });
+
+ // 3. Insert Separator between Timestamp and Data if separators are enabled
+ // Timestamp format: [HH:MM:SS.mmm]
+ // We look for the closing bracket ']' followed directly by the next character,
+ // and insert the separator.
+ // Note: If text implies valid newlines, this global replace works per occurrence.
+ if (showTimestamp && timestampSeparator) {
+ // Regex: Matches timestamp pattern HH:MM:SS.d (1 digit ms from backend)
+ // Also handling --:--:--.0 fallback
+ // The backend formats millis as (ms % 1000) / 100, so it's always 1 digit.
+ // We match this pattern and insert the separator.
+ restoredText = restoredText.replace(
+ /(\d{2}:\d{2}:\d{2}\.\d|--:--:--\.0)/g,
+ `$1${timestampSeparator}`
+ );
+ }
+
+ // Use Clipboard API with Blob to bypass OS/Browser CRLF normalization
+ // Standard e.clipboardData.setData('text/plain') forces \r\n on Windows.
+ if (
+ navigator.clipboard &&
+ navigator.clipboard.write &&
+ typeof ClipboardItem !== 'undefined'
+ ) {
+ const blob = new Blob([restoredText], { type: 'text/plain' });
+ const item = new ClipboardItem({ 'text/plain': blob });
+ navigator.clipboard.write([item]).catch((err) => {
+ console.error('Clipboard write failed:', err);
+ // Fallback if async write fails (though preventDefault already called)
+ // We can't really fallback here effectively because preventDefault is done.
+ // But failure here is rare in a focused window context.
+ });
+ } else {
+ // Fallback for environments without ClipboardItem support
+ e.clipboardData.setData('text/plain', restoredText);
+ }
+ }
+ },
+ [timestampSeparator, showTimestamp]
+ );
+
+ // Calculate display position
+ const scrollRatio = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
+ const targetLine = Math.floor(scrollRatio * effectiveTotalLines);
+ const displayTop = scrollTop - (targetLine - currentStartLine) * ROW_HEIGHT;
+ const naturalLineHeight = totalLines * ROW_HEIGHT;
+ const isScaled = asciiScrollHeight < naturalLineHeight;
+
+ // Render combined rows for consistent selection
+ return (
+ <div
+ className={`ascii-viewer ${lineWrap ? 'line-wrap' : ''} ${showTimestamp ? 'with-timestamp' : ''}`}
+ onCopy={handleCopy}
+ >
+ <div className="ascii-scroll-container" ref={containerRef} onScroll={handleScroll}>
+ <div style={{ height: asciiScrollHeight, position: 'relative' }}>
+ <div style={{ position: 'absolute', top: displayTop, width: '100%' }}>
+ {lines.map((line) => (
+ <div
+ key={line.offset}
+ className="ascii-row"
+ style={{ height: lineWrap ? 'auto' : ROW_HEIGHT, minHeight: ROW_HEIGHT }}
+ >
+ {showTimestamp && <span className="ascii-timestamp">{line.timestamp || ''}</span>}
+ <span className="ascii-text">{line.text}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+
+ <div className="ascii-footer">
+ <span>
+ Total: {totalBytes.toLocaleString()} bytes ({totalLines.toLocaleString()} lines)
+ </span>
+ <span className="ascii-debug">
+ scrollTop={scrollTop.toFixed(0)} | scrollHeight={asciiScrollHeight.toLocaleString()} |
+ byteOffset={getByteOffset().toLocaleString()} | displayTop={displayTop.toLocaleString()} |
+ startLine={currentStartLine.toLocaleString()} | isScaled={isScaled ? 'YES' : 'no'} |
+ scale={(asciiScrollHeight / naturalLineHeight || 1).toFixed(4)}
+ </span>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useEffect, useCallback, useRef, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { ROW_HEIGHT, BUFFER_ROWS, BYTES_PER_ROW } from './viewerConstants';
+import { useByteScroll } from './useByteScroll';
+import { renderAsciiColumn } from '../../utils/hexUtils';
+import './HexViewer.css';
+
+interface DisplayRow {
+ offset: number;
+ hex: string;
+ ascii: string;
+}
+
+interface DisplayRowsPayload {
+ rows: DisplayRow[];
+ total_rows: number;
+}
+
+interface HexViewerProps {
+ totalBytes: number;
+ autoScroll: boolean;
+ initialOffset?: number;
+ onScrollChange?: (byteOffset: number) => void;
+}
+
+export default function HexViewer({
+ totalBytes,
+ autoScroll,
+ initialOffset = 0,
+ onScrollChange = () => {},
+}: HexViewerProps) {
+ // Data state
+ const [rows, setRows] = useState<DisplayRow[]>([]);
+ const [currentStartRow, setCurrentStartRow] = useState(0);
+ const [totalRows, setTotalRows] = useState(0);
+
+ // Fetching guard and queue
+ const isFetchingRef = useRef(false);
+ const pendingStartRowRef = useRef<number | null>(null);
+ const lastFetchRowRef = useRef(-Infinity);
+ const totalRowsRef = useRef(0);
+ const lastTotalBytesRef = useRef(0);
+
+ // Calculate effective total rows for scroll height
+ // Use backend confirmed rows if available, otherwise estimate
+ const effectiveTotalRows =
+ totalRowsRef.current > 0
+ ? totalRowsRef.current
+ : Math.max(1, Math.ceil(totalBytes / BYTES_PER_ROW));
+
+ // Byte-based scroll
+ const { containerRef, scrollTop, scrollHeight, visibleRows, handleScroll, getByteOffset } =
+ useByteScroll({
+ totalBytes,
+ totalRows: effectiveTotalRows, // Use row-based anchoring like AsciiViewer
+ autoScroll,
+ initialOffset,
+ onScrollChange,
+ });
+
+ // Fetch rows from backend
+ const fetchRows = useCallback(
+ async (startRow: number, force: boolean = false) => {
+ // Always update the pending request
+ pendingStartRowRef.current = startRow;
+
+ // If already fetching, the loop will pick up this new pendingStartRowRef
+ if (isFetchingRef.current) return;
+
+ isFetchingRef.current = true;
+
+ try {
+ // Process requests until we catch up
+ while (pendingStartRowRef.current !== null) {
+ const targetStartRow: number = pendingStartRowRef.current;
+
+ // Optimization: If we already fetched this row (or close enough) and not forced, skip
+ // Check needs to be rigorous: if we are "close enough" but new data arrived (force), we must fetch.
+ // The 'force' argument is only for the *initial* call. Subsequent loop iterations might lose 'force' context.
+ // But 'force' is driven by totalBytes change.
+ // Let's simplify: if targetStartRow is different from lastFetchRowRef, fetch it.
+ // We can apply the buffer logic: if abs(target - last) < BUFFER/2, we can maybe skip?
+ // BUT: if we are in this loop, it means we entered because of a request.
+ // Unless pendingStartRow remained same as lastFetchRow?
+ // Optimization: If we already fetched this row (or close enough) and not forced, skip
+ // EXCEPTION: If targetStartRow is 0, we MUST ensure we have the very first row.
+ const isAtTop = targetStartRow === 0;
+ const wasAtTop = lastFetchRowRef.current === 0;
+
+ if (!force) {
+ // If we are at 0, only skip if we were ALREADY at 0.
+ if (isAtTop && wasAtTop) {
+ if (pendingStartRowRef.current === targetStartRow) {
+ pendingStartRowRef.current = null;
+ }
+ continue;
+ }
+ // If we are NOT at 0, use standard buffer logic
+ if (!isAtTop && Math.abs(targetStartRow - lastFetchRowRef.current) < BUFFER_ROWS / 2) {
+ if (pendingStartRowRef.current === targetStartRow) {
+ pendingStartRowRef.current = null;
+ }
+ continue;
+ }
+ }
+
+ // We are committing to fetch 'targetStartRow'.
+ // Clear pending so we can detect *new* requests that come in during await.
+ // If pending changes during await, we loop again.
+ if (pendingStartRowRef.current === targetStartRow) {
+ pendingStartRowRef.current = null;
+ }
+
+ lastFetchRowRef.current = targetStartRow;
+
+ try {
+ const fetchCount = visibleRows + BUFFER_ROWS * 2;
+ const payload = await invoke<DisplayRowsPayload>('get_display_rows', {
+ startRow: targetStartRow,
+ rowCount: fetchCount,
+ });
+
+ // Only update state if this is still relevant?
+ // Ideally yes. Even if old, it's better than blank.
+ // But we want the *latest*.
+ // If pendingStartRowRef is non-null, it means a newer request arrived.
+ // We still show this intermediate result to prevent perceived lag?
+ // Yes, showing *something* is better.
+ setRows(payload.rows);
+ setTotalRows(payload.total_rows);
+ totalRowsRef.current = payload.total_rows;
+ setCurrentStartRow(targetStartRow);
+ } catch (err) {
+ console.error('Failed to fetch rows:', err);
+ }
+ }
+ } finally {
+ isFetchingRef.current = false;
+ }
+ },
+ [visibleRows]
+ );
+
+ // Effect: fetch data when scroll position changes
+ useEffect(() => {
+ if (totalBytes === 0) {
+ setRows([]);
+ setTotalRows(0);
+ totalRowsRef.current = 0;
+ return;
+ }
+
+ // Calculate start row from scroll ratio (works for both normal and scaled modes)
+ // Use effectiveTotalRows to stay in sync with scroll bar size
+ const scrollRatio = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
+ const targetRow = Math.floor(scrollRatio * effectiveTotalRows);
+ const startRow = Math.max(0, targetRow - BUFFER_ROWS);
+
+ // Force refetch when totalBytes changes (new data arrived)
+ const forceRefetch = totalBytes !== lastTotalBytesRef.current;
+ lastTotalBytesRef.current = totalBytes;
+
+ fetchRows(startRow, forceRefetch);
+ }, [totalBytes, scrollTop, scrollHeight, fetchRows, effectiveTotalRows]);
+
+ // Handle Ctrl+A to warn user about partial selection
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+ e.preventDefault();
+ alert(
+ 'To copy all data, please use the export function or copy button in the toolbar.\n(Standard selection only copies visible data due to performance optimizations)'
+ );
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, []);
+
+ // Debug info and display position calculation
+ const naturalHeight = effectiveTotalRows * ROW_HEIGHT;
+ const scale = scrollHeight < naturalHeight ? scrollHeight / naturalHeight : 1;
+ const byteOffset = getByteOffset();
+
+ // Always position rows at scrollTop - CORRECTED to account for buffer offset
+ // We fetch rows starting at 'currentStartRow' (which is usually targetRow - BUFFER).
+ // We need to shift the display top UP by the buffer amount so the target row aligns with scrollTop.
+
+ // Use scrollRatio to determine the "Visual Target Row" consistent with scroll position
+ const scrollRatio = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
+ const targetRow = Math.floor(scrollRatio * effectiveTotalRows);
+
+ // Calculate the theoretical offset between target and fetched data
+ // If positive, it means Target (Screen) is ahead of Start (Data) -> Data is "above".
+ const rowDiff = targetRow - currentStartRow;
+
+ // Visual correction:
+ // If the data is lagging significantly (rowDiff is large), standard calculation would push data off-screen (top).
+ // We clamp the diff to ensure that if we are lagging, we 'drag' the old data along with the scrollbar
+ // so it remains visible until the new data arrives.
+ // We allow normal positioning within the buffer range.
+ const visualRowDiff = Math.min(rowDiff, BUFFER_ROWS);
+
+ const displayTop = scrollTop - visualRowDiff * ROW_HEIGHT;
+
+ return (
+ <div className="hex-viewer">
+ <div className="hex-scroll-container" ref={containerRef} onScroll={handleScroll}>
+ <div style={{ height: scrollHeight, position: 'relative' }}>
+ <div style={{ position: 'absolute', top: displayTop, width: '100%' }}>
+ {rows.map((row) => (
+ <div key={row.offset} className="hex-row" style={{ height: ROW_HEIGHT }}>
+ <span className="hex-offset">
+ {row.offset.toString(16).padStart(8, '0').toUpperCase()}
+ </span>
+ <span className="hex-bytes">{row.hex}</span>
+ <span className="hex-ascii">{renderAsciiColumn(row.ascii)}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ <div className="hex-footer">
+ <span>
+ Total: {totalBytes.toLocaleString()} bytes ({totalRows.toLocaleString()} rows)
+ </span>
+ <span className="hex-debug">
+ scrollTop={scrollTop.toFixed(0)} | scrollHeight={scrollHeight.toLocaleString()} |
+ byteOffset={byteOffset.toLocaleString()} | displayTop={displayTop.toLocaleString()} |
+ startRow={currentStartRow.toLocaleString()} | targetRow={targetRow.toLocaleString()} |
+ fetched={rows.length} | isScaled={scale < 1 ? 'YES' : 'no'} | scale=
+ {scale.toFixed(4)}
+ </span>
+ </div>
+ </div>
+ );
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AsciiViewer.tsx | +
+
+ |
+ 0% | +0/88 | +0% | +0/69 | +0% | +0/14 | +0% | +0/83 | +
| HexViewer.tsx | +
+
+ |
+ 0% | +0/71 | +0% | +0/38 | +0% | +0/8 | +0% | +0/69 | +
| scrollUtils.ts | +
+
+ |
+ 100% | +19/19 | +100% | +16/16 | +100% | +6/6 | +100% | +16/16 | +
| useByteScroll.ts | +
+
+ |
+ 70.17% | +80/114 | +55.71% | +39/70 | +76.92% | +10/13 | +72.07% | +80/111 | +
| viewerConstants.ts | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +0/0 | +100% | +5/5 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 | + + + + + + + + + + + + + + + + + +22x +22x +22x + + + + + + + +10x +10x +10x +5x + +5x + + + + + + + + + + + +5x + + + + +4x + + + + + + + + + + +3x +2x + + + + + + + + + + + +3x + +2x +2x + + + + + + +4x + + | /**
+ * Byte-based scroll utility functions.
+ * All scroll calculations use byte offset for consistency between Hex/ASCII modes.
+ */
+
+import { MAX_SCROLL_HEIGHT, BYTES_PER_ROW, ROW_HEIGHT } from './viewerConstants';
+
+/**
+ * Calculate scroll height based on total bytes.
+ * Converts bytes to rows, then rows to pixels.
+ * Applies scaling if height exceeds MAX_SCROLL_HEIGHT.
+ */
+/**
+ * Calculate scroll height based on total bytes or explicit total rows.
+ * Converts bytes to rows (if totalRows not provided), then rows to pixels.
+ * Applies scaling if height exceeds MAX_SCROLL_HEIGHT.
+ */
+export function calculateScrollHeight(totalBytes: number, totalRows?: number): number {
+ const rows = totalRows ?? Math.ceil(totalBytes / BYTES_PER_ROW);
+ const naturalHeight = rows * ROW_HEIGHT;
+ return Math.min(naturalHeight, MAX_SCROLL_HEIGHT);
+}
+
+/**
+ * Calculate scale factor for large data sets.
+ * scale = 1 when no compression, < 1 when compressed.
+ */
+export function calculateScale(totalBytes: number, totalRows?: number): number {
+ const rows = totalRows ?? Math.ceil(totalBytes / BYTES_PER_ROW);
+ const naturalHeight = rows * ROW_HEIGHT;
+ if (naturalHeight <= MAX_SCROLL_HEIGHT) {
+ return 1;
+ }
+ return MAX_SCROLL_HEIGHT / naturalHeight;
+}
+
+/**
+ * Convert scroll position to byte offset.
+ * now accepts optional totalRows for more accurate row-based calculation in ASCII mode
+ */
+export function scrollTopToByteOffset(
+ scrollTop: number,
+ scrollHeight: number,
+ totalBytes: number
+): number {
+ if (scrollHeight <= 0 || totalBytes <= 0) return 0;
+
+ // Simple linear mapping: (scrollTop / scrollHeight) * totalBytes
+ // This assumes uniform distribution, which is an approximation for ASCII
+ // but matches the visual scrollbar position.
+ return Math.floor((scrollTop / scrollHeight) * totalBytes);
+}
+
+/**
+ * Convert byte offset to scroll position.
+ */
+export function byteOffsetToScrollTop(
+ byteOffset: number,
+ scrollHeight: number,
+ totalBytes: number
+): number {
+ if (totalBytes <= 0) return 0;
+ return (byteOffset / totalBytes) * scrollHeight;
+}
+
+/**
+ * Calculate byte offset for bottom of data (auto-scroll).
+ * Returns the byte offset that would show the last data.
+ */
+export function calculateBottomByteOffset(
+ totalBytes: number,
+ viewportHeight: number,
+ scrollHeight: number
+): number {
+ if (totalBytes <= 0 || scrollHeight <= 0) return 0;
+ // How many bytes fit in viewport
+ const viewportBytes = (viewportHeight / scrollHeight) * totalBytes;
+ return Math.max(0, totalBytes - viewportBytes);
+}
+
+/**
+ * Clamp byte offset to valid range.
+ */
+export function clampByteOffset(byteOffset: number, totalBytes: number): number {
+ return Math.max(0, Math.min(byteOffset, totalBytes));
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +13x +13x +13x + + +13x +13x +13x +13x + + +13x +13x +13x +13x + +13x + + +13x + + +13x + +3x +3x +3x + + + + +3x + + + + + + +13x + + + + + + +1x +1x +1x + +1x + + +1x +1x + + + + + + + +13x +7x + + + + + + + + +13x + +10x + +1x +1x + + +1x + +1x + + + + + + + +1x + + + + + + + + + + +10x +10x + + + + + +13x +10x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +13x + +13x + +10x +10x + +10x + + + + + +1x +1x + +1x + +1x +1x +1x + +1x +1x +1x + + +1x + +1x + + + + + +10x +10x + + + +13x +10x + +1x + + + + +13x + +1x +1x + + +1x + + + + + + +1x + +1x +1x +1x + + +1x + + +1x +1x + + +1x + + + + +1x + + + + + + + + + + + +13x + + + + +13x + +1x +1x +1x +1x + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +13x + + + + + + + + + + | /**
+ * Byte-based scroll hook for HexViewer and AsciiViewer.
+ * Manages scroll state using byte offset for consistency across modes.
+ */
+
+import { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { ROW_HEIGHT, THROTTLE_MS } from './viewerConstants';
+import {
+ calculateScrollHeight,
+ scrollTopToByteOffset,
+ byteOffsetToScrollTop,
+ calculateBottomByteOffset,
+ clampByteOffset,
+} from './scrollUtils';
+
+interface UseByteScrollProps {
+ totalBytes: number;
+ totalRows?: number;
+ autoScroll: boolean;
+ initialOffset: number;
+ onScrollChange: (byteOffset: number) => void;
+}
+
+interface UseByteScrollReturn {
+ // Refs
+ containerRef: React.RefObject<HTMLDivElement | null>;
+
+ // State
+ scrollTop: number;
+ scrollHeight: number;
+ visibleRows: number;
+
+ // Handlers
+ handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+
+ // Utilities
+ getByteOffset: () => number;
+ scrollTo: (scrollTop: number, byteOffset?: number) => void;
+}
+
+export function useByteScroll({
+ totalBytes,
+ totalRows,
+ autoScroll,
+ initialOffset,
+ onScrollChange,
+}: UseByteScrollProps): UseByteScrollReturn {
+ const containerRef = useRef<HTMLDivElement>(null);
+ const [scrollTop, setScrollTop] = useState(0);
+ const [visibleRows, setVisibleRows] = useState(25);
+
+ // Refs for preventing re-render loops and managing scroll anchoring
+ const lastUpdateRef = useRef(0);
+ const isAutoScrollingRef = useRef(false);
+ const initialOffsetAppliedRef = useRef(false);
+ const lastTotalBytesRef = useRef(0); // Added missing ref
+ // Anchor tracking
+ // We track the "Logical Position" (Row Index for ASCII, Byte Offset for Hex)
+ const anchorPositionRef = useRef(0);
+ const prevScrollHeightRef = useRef(0);
+ const prevTotalBytesRef = useRef(0);
+ const trailingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+ const lastProgrammaticScrollTopRef = useRef<number | null>(null);
+
+ // Calculate scroll height based on total bytes OR explicit total rows
+ const scrollHeight = calculateScrollHeight(totalBytes, totalRows);
+
+ // Helper: Calculate logical anchor position from scroll top
+ const getLogicalPosition = useCallback(
+ (currentScrollTop: number) => {
+ Iif (scrollHeight <= 0) return 0;
+ const ratio = currentScrollTop / scrollHeight;
+ Iif (totalRows !== undefined) {
+ // Anchor on Row Index
+ return ratio * totalRows;
+ } else {
+ // Anchor on Byte Offset
+ return ratio * totalBytes;
+ }
+ },
+ [scrollHeight, totalRows, totalBytes]
+ );
+
+ // Helper: Calculate scroll top from logical anchor position
+ const getScrollTopFromAnchor = useCallback(
+ (
+ anchor: number,
+ currentTotalRows?: number,
+ currentTotalBytes?: number,
+ currentScrollHeight?: number
+ ) => {
+ const tRows = currentTotalRows ?? totalRows;
+ const tBytes = currentTotalBytes ?? totalBytes;
+ const sHeight = currentScrollHeight ?? scrollHeight;
+
+ Iif (tRows !== undefined && tRows > 0) {
+ return (anchor / tRows) * sHeight;
+ }
+ Eif (tBytes !== undefined && tBytes > 0) {
+ return (anchor / tBytes) * sHeight;
+ }
+ return 0;
+ },
+ [totalRows, totalBytes, scrollHeight]
+ );
+
+ // Update visible rows based on container height
+ useEffect(() => {
+ Iif (containerRef.current) {
+ const height = containerRef.current.clientHeight;
+ if (height > 0) {
+ setVisibleRows(Math.ceil(height / ROW_HEIGHT));
+ }
+ }
+ }, []);
+
+ // Anchor Scroll Logic: Maintain viewing position when data grows
+ useLayoutEffect(() => {
+ // If not auto-scrolling...
+ if (!autoScroll && containerRef.current) {
+ // Check if geometry changed significantly (Bytes grew OR Height changed due to new TotalLines)
+ const bytesChanged = totalBytes > prevTotalBytesRef.current;
+ const heightChanged = Math.abs(scrollHeight - prevScrollHeightRef.current) > 1;
+
+ // Only re-anchor if we have a valid previous state and something changed
+ Eif (prevTotalBytesRef.current > 0 && (bytesChanged || heightChanged)) {
+ // Recalculate scrollTop for the SAME logical position in the NEW coordinate system
+ const newScrollTop = getScrollTopFromAnchor(
+ anchorPositionRef.current,
+ totalRows,
+ totalBytes,
+ scrollHeight
+ );
+
+ // If the position needs adjustment
+ Iif (Math.abs(containerRef.current.scrollTop - newScrollTop) > 1) {
+ containerRef.current.scrollTop = newScrollTop;
+ setScrollTop(newScrollTop);
+
+ // Mark as programmatic to ignore header feedback
+ lastProgrammaticScrollTopRef.current = newScrollTop;
+ }
+ }
+ }
+
+ // Update refs for next render
+ prevTotalBytesRef.current = totalBytes;
+ prevScrollHeightRef.current = scrollHeight;
+ // NOTE: We do NOT update anchorPositionRef here. We trust our previous anchor.
+ // Only USER interaction should update the anchor.
+ }, [totalBytes, scrollHeight, autoScroll, totalRows, getScrollTopFromAnchor]);
+
+ // Handle initial offset on mount (manual mode only)
+ useLayoutEffect(() => {
+ Iif (!autoScroll && initialOffset > 0 && totalBytes > 0 && !initialOffsetAppliedRef.current) {
+ initialOffsetAppliedRef.current = true;
+
+ // Calculate initial scroll top
+ const targetScrollTop = byteOffsetToScrollTop(initialOffset, scrollHeight, totalBytes);
+
+ // Initialize anchor based on that position (normalized to Row/Byte as needed)
+ // Note: initialOffset is always BYTES. If in Row mode, we map Byte->Row approximate?
+ // Actually, if we start in Row mode, we might want initialRow?
+ // But props is initialOffset (bytes).
+ // We will perform a best-effort conversion to our Anchor Unit.
+ if (totalRows !== undefined) {
+ // Convert Byte Offset to Row Index (approx)
+ const ratio = initialOffset / totalBytes;
+ anchorPositionRef.current = ratio * totalRows;
+ } else {
+ anchorPositionRef.current = initialOffset;
+ }
+
+ if (containerRef.current) {
+ containerRef.current.scrollTop = targetScrollTop;
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setScrollTop(targetScrollTop);
+ lastProgrammaticScrollTopRef.current = targetScrollTop;
+ }
+ }
+ }, [autoScroll, initialOffset, totalBytes, scrollHeight, totalRows]);
+
+ // Auto-scroll: keep at bottom when new data arrives
+ const lastScrollHeightRef = useRef(0);
+
+ useEffect(() => {
+ // Check if data grew OR if the view revealed more content (e.g. backend confirmed more rows)
+ const hasNewData = totalBytes > lastTotalBytesRef.current;
+ const hasRevealedContent = scrollHeight > lastScrollHeightRef.current;
+
+ if (
+ autoScroll &&
+ totalBytes > 0 &&
+ containerRef.current &&
+ (hasNewData || hasRevealedContent)
+ ) {
+ lastTotalBytesRef.current = totalBytes;
+ lastScrollHeightRef.current = scrollHeight;
+
+ isAutoScrollingRef.current = true;
+
+ const viewportHeight = containerRef.current.clientHeight;
+ const bottomByteOffset = calculateBottomByteOffset(totalBytes, viewportHeight, scrollHeight);
+ const targetScrollTop = byteOffsetToScrollTop(bottomByteOffset, scrollHeight, totalBytes);
+
+ containerRef.current.scrollTop = targetScrollTop;
+ setScrollTop(targetScrollTop);
+ lastProgrammaticScrollTopRef.current = targetScrollTop;
+
+ // Update anchor to bottom
+ anchorPositionRef.current = getLogicalPosition(targetScrollTop);
+
+ requestAnimationFrame(() => {
+ isAutoScrollingRef.current = false;
+ });
+ }
+ // Update tracker if not autoscrolling or if conditions met
+ // (We always want to track the latest known size to detect Next Growth)
+ lastTotalBytesRef.current = totalBytes;
+ lastScrollHeightRef.current = scrollHeight;
+ }, [autoScroll, totalBytes, scrollHeight, getLogicalPosition]);
+
+ // Hook to capture anchor when AutoScroll stops (Manual Stop or Toggle Off)
+ useEffect(() => {
+ if (!autoScroll && containerRef.current) {
+ // User just stopped auto-scroll. Lock to current position.
+ anchorPositionRef.current = getLogicalPosition(containerRef.current.scrollTop);
+ }
+ }, [autoScroll, getLogicalPosition]);
+
+ // Handle user scroll
+ const handleScroll = useCallback(
+ (e: React.UIEvent<HTMLDivElement>) => {
+ const newScrollTop = e.currentTarget.scrollTop;
+ setScrollTop(newScrollTop);
+
+ // Check for programmatic scroll echo
+ Iif (lastProgrammaticScrollTopRef.current !== null) {
+ if (Math.abs(newScrollTop - lastProgrammaticScrollTopRef.current) < 2) {
+ return;
+ }
+ lastProgrammaticScrollTopRef.current = null;
+ }
+
+ Iif (isAutoScrollingRef.current) return;
+
+ const now = Date.now();
+ Iif (now - lastUpdateRef.current < THROTTLE_MS) return;
+ lastUpdateRef.current = now;
+
+ // Update Anchor using our Logical Unit (Row or Byte)
+ anchorPositionRef.current = getLogicalPosition(newScrollTop);
+
+ // Report byte offset to parent (Always Bytes for sync)
+ const byteOffset = scrollTopToByteOffset(newScrollTop, scrollHeight, totalBytes);
+ onScrollChange(clampByteOffset(byteOffset, totalBytes));
+
+ // Clear any pending trailing update
+ Iif (trailingRef.current) {
+ clearTimeout(trailingRef.current);
+ }
+
+ // Schedule trailing update to ensure we capture the final rest position
+ trailingRef.current = setTimeout(() => {
+ if (containerRef.current) {
+ const finalScrollTop = containerRef.current.scrollTop;
+ anchorPositionRef.current = getLogicalPosition(finalScrollTop);
+ trailingRef.current = null;
+ }
+ }, THROTTLE_MS + 10);
+ },
+ [scrollHeight, totalBytes, onScrollChange, getLogicalPosition]
+ );
+
+ // Get current byte offset
+ const getByteOffset = useCallback(() => {
+ return scrollTopToByteOffset(scrollTop, scrollHeight, totalBytes);
+ }, [scrollTop, scrollHeight, totalBytes]);
+
+ // Programmatic scroll helper
+ const scrollTo = useCallback(
+ (newScrollTop: number, newByteOffset?: number) => {
+ Eif (containerRef.current) {
+ containerRef.current.scrollTop = newScrollTop;
+ setScrollTop(newScrollTop);
+ lastProgrammaticScrollTopRef.current = newScrollTop;
+
+ Iif (newByteOffset !== undefined) {
+ // Forced anchor update (e.g. exact line mapping)
+ // If we are in Row Mode (Ascii), anchor is usually Row Index.
+ // If we are passed a Byte Offset, we might want to store that?
+ // But our anchor logic expects "Logical Position".
+ // If caller passes Byte Offset, and we are in Row Mode, we should probably calculate Row Index?
+ // Or does the caller pass the Anchor Value directly?
+ // Let's assume caller passes the BYTE OFFSET (source of truth).
+ // We need to convert it to Logical Anchor if needed.
+ // But wait, if we are setting scrollTop to match a line,
+ // we probably already know the line index.
+ // Let's genericize: pass anchorValue?
+ // No, let's keep it simple. The conflict "visual vs byte" is exactly what we are solving.
+ // If we set scrollTop to Line 50, and byteOffset to 5000.
+ // We want next scroll to start from 5000.
+ //getLogicalPosition(newScrollTop) -> Row 50.
+ // So updating anchor to getLogicalPosition(newScrollTop) is correct for continuity.
+ // The passed 'newByteOffset' is for the PARENT update.
+ // But we can just use the prop 'initialOffset' logic for that?
+
+ // Actually, simply updating anchorPositionRef to getLogicalPosition(newScrollTop)
+ // is enough to keep the VIEW stable at that new position.
+ // If we want to correct the "Drift" on switch back, we need to ensure 'onScrollChange' sends the exact byte.
+ // But 'onScrollChange' is driven by handleScroll.
+ // If we suppress handleScroll, onScrollChange isn't called.
+ // So we should call onScrollChange(newByteOffset) here!
+ anchorPositionRef.current = getLogicalPosition(newScrollTop);
+ onScrollChange(clampByteOffset(newByteOffset, totalBytes));
+ // Also update prevRef to this exact value?
+ // No, prevRef is for diffing.
+ }
+ }
+ },
+ [onScrollChange, totalBytes, getLogicalPosition]
+ );
+
+ return {
+ containerRef,
+ scrollTop,
+ scrollHeight,
+ visibleRows,
+ handleScroll,
+ getByteOffset,
+ scrollTo,
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | + + +3x +3x +3x + + +3x + + +3x + | // Shared constants for HexViewer and AsciiViewer + +// Row display +export const ROW_HEIGHT = 20; +export const BUFFER_ROWS = 50; +export const BYTES_PER_ROW = 16; + +// Scroll limits +export const MAX_SCROLL_HEIGHT = 10_000_000; + +// Update throttling +export const THROTTLE_MS = 100; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.tsx | +
+
+ |
+ 0% | +0/82 | +0% | +0/38 | +0% | +0/17 | +0% | +0/77 | +
| main.tsx | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
| plotter.tsx | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +100% | +0/0 | +0% | +0/1 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 | + + + + + + + + + | import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | + + + + + + + + + + | import React from 'react';
+import ReactDOM from 'react-dom/client';
+import PlotterWindow from './components/plotter/PlotterWindow';
+import './App.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ <React.StrictMode>
+ <PlotterWindow />
+ </React.StrictMode>
+);
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /** + * Hex/ASCII display utilities for serial data viewer + */ + +import React from 'react'; + +/** + * Convert a byte array to a hex string with spaces between bytes + * @param bytes - The byte array to convert + * @returns Formatted hex string (e.g., "00 0A 0D 48") + */ +export function bytesToHex(bytes: Uint8Array): string { + return Array.from(bytes) + .map((b) => b.toString(16).padStart(2, '0').toUpperCase()) + .join(' '); +} + +// Control character labels indexed by Unicode Control Pictures code points +// U+2400-U+241F (0x2400-0x241F) for control chars 0-31 +// U+2421 (0x2421) for DEL (127) +export const CONTROL_LABELS: Record<number, string> = { + 0x2400: 'NUL', + 0x2401: 'SOH', + 0x2402: 'STX', + 0x2403: 'ETX', + 0x2404: 'EOT', + 0x2405: 'ENQ', + 0x2406: 'ACK', + 0x2407: 'BEL', + 0x2408: 'BS', + 0x2409: 'TAB', + 0x240a: 'LF', + 0x240b: 'VT', + 0x240c: 'FF', + 0x240d: 'CR', + 0x240e: 'SO', + 0x240f: 'SI', + 0x2410: 'DLE', + 0x2411: 'DC1', + 0x2412: 'DC2', + 0x2413: 'DC3', + 0x2414: 'DC4', + 0x2415: 'NAK', + 0x2416: 'SYN', + 0x2417: 'ETB', + 0x2418: 'CAN', + 0x2419: 'EM', + 0x241a: 'SUB', + 0x241b: 'ESC', + 0x241c: 'FS', + 0x241d: 'GS', + 0x241e: 'RS', + 0x241f: 'US', + 0x2421: 'DEL', +}; + +// Map Unicode Control Pictures to actual control characters for copying +const CONTROL_PICTURE_TO_CHAR: Record<number, string> = { + 0x2400: '\x00', // NUL + 0x2401: '\x01', // SOH + 0x2402: '\x02', // STX + 0x2403: '\x03', // ETX + 0x2404: '\x04', // EOT + 0x2405: '\x05', // ENQ + 0x2406: '\x06', // ACK + 0x2407: '\x07', // BEL + 0x2408: '\x08', // BS + 0x2409: '\x09', // TAB + 0x240a: '\x0a', // LF + 0x240b: '\x0b', // VT + 0x240c: '\x0c', // FF + 0x240d: '\x0d', // CR + 0x240e: '\x0e', // SO + 0x240f: '\x0f', // SI + 0x2410: '\x10', // DLE + 0x2411: '\x11', // DC1 + 0x2412: '\x12', // DC2 + 0x2413: '\x13', // DC3 + 0x2414: '\x14', // DC4 + 0x2415: '\x15', // NAK + 0x2416: '\x16', // SYN + 0x2417: '\x17', // ETB + 0x2418: '\x18', // CAN + 0x2419: '\x19', // EM + 0x241a: '\x1a', // SUB + 0x241b: '\x1b', // ESC + 0x241c: '\x1c', // FS + 0x241d: '\x1d', // GS + 0x241e: '\x1e', // RS + 0x241f: '\x1f', // US + 0x2421: '\x7f', // DEL +}; + +// Middle dot character used by backend for non-ASCII bytes +export const MIDDLE_DOT = '·'; + +/** + * Render ASCII text with control character labels for HexViewer + * Optimized: batch consecutive regular characters to reduce span count + */ +export function renderAsciiColumn(text: string): React.ReactNode { + const elements: React.ReactNode[] = []; + let i = 0; + + while (i < text.length) { + const code = text.charCodeAt(i); + const label = CONTROL_LABELS[code]; + + if (label) { + // Unicode Control Picture - show as small label + elements.push( + <span key={i} className="ascii-char ascii-ctrl" title={label}> + {label} + </span> + ); + i++; + } else if (text[i] === MIDDLE_DOT) { + // Non-ASCII byte (shown as middle dot by backend) + elements.push( + <span key={i} className="ascii-char"> + · + </span> + ); + i++; + } else { + // Regular ASCII character - render in fixed-width cell like control chars + elements.push( + <span key={i} className="ascii-char"> + {text[i]} + </span> + ); + i++; + } + } + return <>{elements}</>; +} + +/** + * Render ASCII line for AsciiViewer with copyable control characters + * Control characters are rendered with actual char (for copy) + visual label overlay + */ +export function renderAsciiLine(text: string): React.ReactNode { + const elements: React.ReactNode[] = []; + let i = 0; + + while (i < text.length) { + const code = text.charCodeAt(i); + const label = CONTROL_LABELS[code]; + const actualChar = CONTROL_PICTURE_TO_CHAR[code]; + + if (label && actualChar) { + // Unicode Control Picture - render with actual control char for copying + elements.push( + <span key={i} className="ascii-ctrl-char" title={label} data-label={label}> + {actualChar} + </span> + ); + } else if (text[i] === MIDDLE_DOT) { + // Non-ASCII byte + elements.push(<span key={i}>·</span>); + } else { + // Regular character - batch consecutive regular chars + let end = i + 1; + while (end < text.length) { + const nextCode = text.charCodeAt(end); + if (CONTROL_LABELS[nextCode] || text[end] === MIDDLE_DOT) break; + end++; + } + elements.push(<span key={i}>{text.slice(i, end)}</span>); + i = end; + continue; + } + i++; + } + return <>{elements}</>; +} + +/** + * Format an offset number as a hex address + * @param offset - The byte offset + * @param padLength - Number of hex digits (default 8) + * @returns Formatted address string (e.g., "00000000") + */ +export function formatOffset(offset: number, padLength: number = 8): string { + return offset.toString(16).toUpperCase().padStart(padLength, '0'); +} + +/** + * Split byte data into rows for hex viewer display + * @param data - The byte array to split + * @param bytesPerRow - Number of bytes per row (default 16) + * @returns Array of row objects with offset and data + */ +export function splitIntoRows( + data: Uint8Array, + bytesPerRow: number = 16 +): { offset: number; data: Uint8Array }[] { + const rows: { offset: number; data: Uint8Array }[] = []; + + for (let i = 0; i < data.length; i += bytesPerRow) { + rows.push({ + offset: i, + data: data.slice(i, Math.min(i + bytesPerRow, data.length)), + }); + } + + return rows; +} + +/** + * Calculate the number of rows needed for a given total byte count + * @param totalBytes - Total bytes in the data + * @param bytesPerRow - Number of bytes per row (default 16) + * @returns Number of rows + */ +export function calculateRowCount(totalBytes: number, bytesPerRow: number = 16): number { + return Math.ceil(totalBytes / bytesPerRow); +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| hexUtils.tsx | +
+
+ |
+ 0% | +0/47 | +0% | +0/17 | +0% | +0/7 | +0% | +0/45 | +
| sendUtils.ts | +
+
+ |
+ 100% | +23/23 | +100% | +12/12 | +100% | +3/3 | +100% | +21/21 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 | + + + + + + + + + + + + + + +8x +8x +1x + +7x +7x +19x +19x +18x + +6x + + + + + + + + + + +5x +5x + +1x +1x + +2x +2x + +1x +1x + +5x + + + + + + + + + + + + +6x +1x + +5x + + | /**
+ * Utility functions for SendPanel
+ * Extracted for testability and reusability
+ */
+
+export type LineEnding = 'NONE' | 'CR' | 'LF' | 'CRLF';
+
+/**
+ * Parse a hex string into an array of bytes.
+ * Spaces are ignored. Returns null if invalid.
+ *
+ * @param input - Hex string like "48 65 6C 6C 6F" or "48656C6C6F"
+ * @returns Array of bytes or null if invalid
+ */
+export function parseHexString(input: string): number[] | null {
+ const cleanHex = input.replace(/\s+/g, '');
+ if (cleanHex.length % 2 !== 0) {
+ return null; // Invalid: odd number of characters
+ }
+ const result: number[] = [];
+ for (let i = 0; i < cleanHex.length; i += 2) {
+ const byte = parseInt(cleanHex.substring(i, i + 2), 16);
+ if (isNaN(byte)) return null; // Invalid hex character
+ result.push(byte);
+ }
+ return result;
+}
+
+/**
+ * Append line ending bytes to data array.
+ *
+ * @param data - Array of bytes
+ * @param lineEnding - Line ending type
+ * @returns New array with line ending appended
+ */
+export function appendLineEnding(data: number[], lineEnding: LineEnding): number[] {
+ const result = [...data];
+ switch (lineEnding) {
+ case 'CR':
+ result.push(0x0d);
+ break;
+ case 'LF':
+ result.push(0x0a);
+ break;
+ case 'CRLF':
+ result.push(0x0d, 0x0a);
+ break;
+ }
+ return result;
+}
+
+/**
+ * Add an item to history, avoiding duplicates of the most recent item.
+ *
+ * @param history - Current history array (most recent first)
+ * @param newItem - Item to add
+ * @param maxSize - Maximum history size (default 20)
+ * @returns New history array
+ */
+export function addToHistory(history: string[], newItem: string, maxSize: number = 20): string[] {
+ // If same as the most recent one, don't add
+ if (history.length > 0 && history[0] === newItem) {
+ return history;
+ }
+ return [newItem, ...history].slice(0, maxSize);
+}
+ |
This page lists the licenses of the projects used in cargo-about.
+{{text}}
+