Skip to content

Latest commit

 

History

History
288 lines (234 loc) · 62.4 KB

actionable_inventory.md

File metadata and controls

288 lines (234 loc) · 62.4 KB

PyTransDatRO Web Application UI Actionable Elements Inventory & Living Test Specification

This document provides a comprehensive, structured inventory of all actionable UI controls, reactive surfaces, floating panels, and event mechanics across the PyTransDatRO web application. It acts as the single source of truth bridging Product Requirements, Functional Interaction Specifications, and Automated E2E/Integration Testing (Playwright / Vitest).

Scope Note: This document focuses strictly on the functional mechanics and behaviors of actionable elements. Visual styling, aesthetic tokens, and design decorations are documented separately in the Design System Manual and mapped to UI archetype patterns in the Component Archetypes Catalogue.


1. Global Taxonomy & Interaction Classification

Every actionable element is categorized according to functional pattern, DOM selector, interaction type, scope, archetype reference, and test mapping:

Interaction Pattern Code / Control Type Functional Mechanics Archetype Link
Brand Action / Link Anchor <a> / Button <button> Navigates to external link or resets view to Home while preserving theme/session state. Brand Header
Status Indicator / Alert Badge / Dot / Toast Displays live status (e.g. API health, grid warning). May be clickable for diagnostics/feedback. Visual Status Badges
Segmented Switch renderSegmentedControl Mutually exclusive sliding/pill tabs (ARIA tablist / tab). Segmented Controls
Dropdown Menu / Select renderDropdownMenu / renderSelect Expanding menu (<details> or <select>) with options, checkmarks, and keyboard navigation. Dropdown Selects
Numeric / Text Input <input type="text"> / <textarea> Keyboard input, auto-selection on focus (input.select()), copy/paste parsing. Text Inputs
Action CTA Button .btn-primary / .btn-secondary Triggers asynchronous computation, file processing, or modal dialog. CTA Buttons
Map Widget / Control Dock Leaflet Custom Control (L.Control) Interacts with the Web GIS canvas (zoom, pan, measure, layer drawer, scale bar). Web GIS Architecture
Floating Window / Modal Movable / Resizable Surface Draggable header, corner resizer, minimize/restore, and close mechanics. Floating Windows
Aggregator KPI Card Telemetry Summary Card Reactive display surface aggregating totals, averages, and rates over active filters. KPI Summary Cards

2. Section I: Top Navigation Bar & Global State (Header.ts, main.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Brand Logo (#header-brand-logo-wrap) Brand Action Click App / Navigation Fresh First-Load Reset Action: Clicking the logo icon completely resets all application runtime state: clears Point inputs and outputs, clears Batch text area and outputs, clears Uploaded Files queue, purges all map layers/pins, cancels active distance measurements, resets coordinate direction/order to default (ETRS89 ➔ Stereo 70, NE(H)), closes all open floating panels (Grid info, Help guide, Feedback), resets map view to Romania overview bounds, and returns to the Transform Studio tab in Point mode. Preserves user preferences (data-theme and active language ro/en). Brand Logo Covered in smoke specs; verify full state purge.
App Title (.header-brand-link .brand-title-text) Brand Action Click App / Navigation Soft Home Navigation: Returns view to application root / (Studio/Transform tab) via client SPA navigation without wiping uncommitted coordinate inputs or active working session data. Brand Header Covered in smoke specs.
Version Badge (.brand-stage-badge) Dynamic Badge Read / Inspect Header Displays version string (e.g. 1.0.0-beta). Populated dynamically from release metadata. Status Badges Validate dynamic version injection in build.
API Health Indicator Dot (#header-health-dot-btn) Status Dot / Non-Disruptive Hover / Inspect Header / Diagnostics Compact 8px status dot (.online / .offline, green/red) situated stably next to the version badge. Green when REST API /health returns 200 OK (polled periodically every 30s); red when offline. Pure status indicator: does not expand header width, shift brand text, or displace navigation elements. Shows informative tooltip. Status Badges E2E error suite tests offline mock state.
Global Offline Alert Banner (#global-offline-banner, #global-offline-report-btn) System Alert Banner / Modal Trigger Click System Alert / Feedback Prominent, non-disruptive notification banner docked directly beneath the header (or above the active viewport) when the REST API is offline. Displays explicit warning text that the REST API is unavailable and coordinate transformations cannot be computed, accompanied by an explicit actionable prompt: “Click here to report this issue ↗”. Clicking anywhere on the banner or action link launches the Feedback modal with api_down preselected. Auto-dismisses when the backend recovers. Floating Modals Covered in error mock specs.
Repository Attribution (.header-repo-link) External Link Click External Opens GitHub repository in a new tab (target="_blank", rel="noopener noreferrer"). Label: powered by PyTransDatRO. Brand Header Test link target and rel attributes.
Primary Navigation Tabs (#nav-btn-studio, #nav-btn-telemetry) Tablist Click Global App View Switches between Geodetic Transformation Studio (#workbench-layout + #map) and Usage Telemetry Dashboard (.telemetry-page-view). Active tab receives .active class. Automatically triggers map size invalidation on return. Segmented Controls Covered in smoke/telemetry specs.
Help Menu Trigger (#header-help-details summary) Dropdown Menu Click / Keyboard Modal Triggers Expands dropdown with two grouped sections: PyTransDatRO (Help Guide, Grid Info, Discrepancy Feedback) and ANCPI / ROMPOS external resource links. Items are purely typographical (icon-free) for visual calm and consistency with external links. Selecting items launches their respective floating window (GridMetadataPanel, GeodeticHelpPanel) or feedback modal (FeedbackPanel, prefilled with current coordinates). Closes on click-outside or Escape. Dropdown Menus Covered in UI unit & E2E tests.
Language Selector (#header-lang-details, [data-lang]) Dropdown Menu / Radio Item Select option Global (All Pages) Toggles active locale (ro $\leftrightarrow$ en). Updates UI labels and re-renders active tabs. Number formatting rule: Usage/Telemetry dashboard numbers, cards, and labels follow the active locale (Romanian uses comma , decimal separator; English uses period .). In contrast, all coordinate transformation inputs, outputs, angle format badges, and exported files (CSV/GeoJSON/DXF) strictly remain in standard numeric format with dot . decimal separator to guarantee compatibility with CAD, GIS, and scientific software. Dropdown Menus Covered in i18n.spec.ts.
Theme Toggle (#header-theme-btn) Action Button Click Global UI Theme Toggles data-theme="dark" $\leftrightarrow$ data-theme="light". Swaps active icon (shows Sun when dark, Moon when light). Automatically switches Carto Dark $\leftrightarrow$ Carto Positron basemaps if active. Synchronizes browser favicon SVG. CTA Buttons Covered in smoke.spec.ts.
Workbench Dock Boundary (#workbench-dock-toggle, .workbench-dock-toggle) Vertical Boundary Gutter Click / Ctrl+\ / Alt+W Desktop Workspace Located along the full-height vertical divider between the left workbench and map (Yahoo Mail style). Displays a top-to-bottom accent line on hover with directional cursor cues (w-resize to dock left, e-resize to expand right) and an unobtrusive fade-in chevron pill. Collapses the 480px panel to the left (margin-left: -480px), expanding the Leaflet map to 100% of the desktop window. Pinned to the left viewport edge when collapsed. Persisted in localStorage['pytransdat_workbench_collapsed']. CTA Buttons Covered in mobile.spec.ts.
Mobile Bottom Sheet Handle (#bottom-sheet-handle, .bottom-sheet-handle-bar) Touch Gesture & Tap Control Tap / Drag Swipe Mobile Viewport Layout On mobile screens (<=768px), anchors the transformation workbench as a Google Maps-style bottom sheet over the full-screen map. Supports 3 states: sheet-peek (~72px peek), sheet-half (45% height, default), and sheet-full (85vh height). Tapping cycles states; dragging tracks finger movement; focusing coordinate inputs auto-expands to sheet-full. Floating Drawers Covered in mobile.spec.ts.
URL Query Parameters (window.location.search) Deep-Link Hydration Boot / Navigation App Initialization Reads ?op=, ?c1=, ?c2=, ?c3=, ?unit=, and ?order= on application load to pre-populate transformation state and calculate initial output. App Architecture Deep-link spec in point.spec.ts.
Global Escape Shortcut (document.keydown 'Escape') Keyboard Handler Key press Global View Closes open header dropdowns (details.header-dropdown-wrap) and cancels active map distance measurement mode. Global Architecture Covered in UI and map specs.

3. Section II: Left Workbench — Transformation Controls (PointConverter.ts, BatchConverter.ts, FileUpload.ts)

3.1 Shared Transformation Configuration Bar (Top of Workbench)

Globally governs Point, Text, and Files tabs.

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Transformation Direction (#op-direction-toggle, [data-op]) Segmented Switch Click / Arrow keys Global Transform Setting Toggles between ETRS89 ➔ Stereo 70 and Stereo 70 ➔ ETRS89. Updates input/output labels, placeholder values, and validation boundaries. Deferred processing rule: Switching direction applies automatically to the Point tab only. For Text and Files tabs, it does not automatically recompute existing input data; the user must hit Transform to re-process with the new direction. Segmented Controls Covered in point.spec.ts, batch.spec.ts.
Angular Unit Selector (#angular-unit-select) Dropdown Select Select option Global Coordinate Format Options: Degrees (DD.dddddddd), DMS (DD°MM'SS.SSSSS"), Radians (rad). Formats ETRS89 angles in inputs, outputs, angle format badge, and map coordinate cursor badge. Deferred processing rule: Applies immediately to the Point tab; for Text and Files tabs, the format is applied to output data only after the user hits Transform. Dropdown Selects Covered in point.spec.ts.
Coordinate Order Toggle (#coord-order-toggle, [data-order]) Segmented Switch Click Global Coordinate Order Options: NE(H) (Northing/Lat first) vs EN(H) (Easting/Lon first). Swaps input and output column positions in Point view and determines column parsing order in Batch Text & Files. Deferred processing rule: Changes column layout immediately in Point tab, but in Text and Files tabs applies to output data only after hitting Transform. Segmented Controls Covered in point.spec.ts, batch.spec.ts.
Angle Format Example Badge (#angle-format-example-badge) Clickable Badge Click Clipboard / Selection Displays an example coordinate formatted in the active angular unit (e.g., 45°50'28.44420"). Click action: Selects all text and copies strictly the numeric angle value to clipboard for quick paste into inputs. Shows temporary checkmark feedback. Selectable Info Badges Covered in ui.test.ts.

3.2 Navigation Mode Tabs

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Transform Mode Tabs (.tabs-bar .tab-btn, #tab-point, #tab-text, #tab-files) Tablist Click Workbench Surface Switches active mode panel between Point, Text, and Files. Prefix label: Transform:. Segmented Controls Covered in smoke.spec.ts.

3.3 Single Point Mode (PointConverter.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Input Coordinate 1 (#pt-input-1) Text Input Keyboard / Paste Point State Northing (Stereo 70) or Latitude (ETRS89). Auto-selects text on focus (input.select()). Auto-sanitizes input (strips quotes, trailing m/metri, compass letters). Smart Delimiter Split: Pasting a full 2D or 3D coordinate line (separated by spaces, tabs, commas, or semicolons) automatically splits across Input 1, Input 2, and Input 3. Smart paste convenience rule: Pasting a full coordinate line automatically triggers calculation for immediate feedback. Manual keyboard entry continues to require pressing Enter or clicking Transform. Pasting a single DMS string does not split. Coordinates do not show units of measure, except DMS which explicitly shows sexagesimal symbols (°, ', "). Default origin initialized if empty. No Inline Error Banners: All inline validation error banners below coordinate boxes are completely eliminated. Error and quality feedback is communicated exclusively through the structured Quality Reporting Card. Text Inputs Covered in point.spec.ts.
Input Coordinate 2 (#pt-input-2) Text Input Keyboard / Paste Point State Easting (Stereo 70) or Longitude (ETRS89). Auto-selects text on focus. Auto-sanitizes input. Units of measure are not shown, except for DMS symbols (°, ', "). Protected by identical error banner elimination rule. Text Inputs Covered in point.spec.ts.
Input Altitude/Height (#pt-input-3) Text Input Keyboard / Paste Point State Normal Altitude $H$ or Ellipsoidal Height $h$. Optional: if empty, 2D transformation; if provided, 3D transformation with Quasigeoid height. Auto-selects on focus. Protected by identical error banner elimination rule. Text Inputs Covered in point.spec.ts.
Input Enter Key Listener (#pt-input-1, #pt-input-2, #pt-input-3) Keyboard Shortcut Enter key press Point Execution Pressing Enter in any coordinate input executes transformation immediately without clicking button. Text Inputs Covered in point.spec.ts.
Transform CTA Button (#pt-calculate-btn) Action Button (.btn-primary) Click / Enter Point Output Executes backend transformation via /api/v1/transform/point. Populates output fields and emits map pin. Shows calculating spinner/label during transit. CTA Buttons Covered in point.spec.ts.
Output Coordinate Fields (.output-grid-3 input) Read-Only Fields Select / Copy Point Output Displays computed coordinates. Selectable but not editable: Users can highlight and copy text. Displays empty fields ("") when cleared or untransformable. No units of measure shown, except DMS symbols (°, ', "). Output Fields Covered in point.spec.ts.
Quasigeoid Height $\zeta$ (.metric-field) Scalar Metric Box Select / Copy Point Output Read-only, selectable field showing $\zeta = h - H$ for 3D points. Stripped of unit suffixes. Prefixed with + if positive. Remains empty ("") when 2D or invalid. Selectable Badges Covered in point.spec.ts.
Reporting & Quality Flags (.quality-report-badges) Visual Labels / Badges Read-Only (Non-selectable) Quality Feedback Visual artifact labels (not selectable) structured in a Two-Section Card separated by a discrete dashed divider line with subtle sub-titles: Top Subsection ("Coordinates" / "Coordonate"): displays dimensional tags (2D, 3D), which read contextually as [Section] + [Label] = Coordinates 2D, Coordinates 3D. Bottom Subsection ("Transformation" / "Transformare"): displays computation quality tags (Valid, Invalid Input, Invalid Angle, Outside Grid, No Grid Data), which read contextually as Transformation Valid, Transformation Outside Grid, etc. The Golden Rule: The UI strictly exposes only classifications understood by the engine; no arbitrary frontend error codes or interval bounds. Status Badges Covered in point.spec.ts.
Copy Coordinates Button (#pt-copy-code-btn) Copy Action Button Click Clipboard Copies computed output coordinates to clipboard formatted as comma-separated values (val1, val2, [val3]). Shows feedback checkmark animation and toast notification. Disabled when out-of-grid or uncalculated. CTA Buttons Covered in point.spec.ts.
Center on Map (#pt-center-map-btn) Action Button Click GIS Map Viewport Pans map smoothly to the centroid of the point without changing current zoom level. Guarded by Romanian grid bounds. Disabled when out of grid. CTA Buttons Covered in map.spec.ts.
Zoom to Extents (#pt-zoom-extents-btn) Action Button Click GIS Map Viewport Fits map to point bounds with a maximum single-point zoom (level 14) so geographic context is maintained. Guarded by Romanian bounds. Disabled when out of grid. CTA Buttons Covered in map.spec.ts.

3.4 Batch Text Mode (BatchConverter.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Batch Input Text Area (#batch-input-area) Textarea Input Paste / Edit Batch State Accepts freeform multi-line coordinate text. Ergonomics: Vertically resizable to view large point lists, with vertical scrollbar styled with cursor: default to guarantee standard arrow hover cursor. Height Retention Rule: Clicking Transform strictly preserves the user-adjusted vertical height and dimensions of both input and output textareas without collapsing back to initial default sizes. Mixed Input Parsing: Must support mixed 2D and 3D points in the same batch, and points with or without point names (3 columns are parsed as 3D coordinates unless the 1st column contains alphabetic/text tokens, in which case it is identified as a Point Name). Delimiter Detection: Auto-detects line delimiters (comma, semicolon, tab, space). Comment & Blank Preservation: Lines beginning with # or blank lines maintain their exact sequence index in the output. Line $N$ in corresponds to Line $N$ out. Text Inputs Covered in batch.spec.ts.
Batch Transform CTA (#batch-transform-btn) Action Button (.btn-primary) Click Batch Processing Input Locking: Locks/disables both the input textarea (disabled readonly) and the transform button during active computation to enforce input/output synchronization. Coordinate mathematics executes swiftly without pre-transformation modal friction; if point volume plotted to Leaflet exceeds the threshold (batchWarningThreshold in webapp/src/config.ts), MapView triggers the Volume Warning dialog before canvas rendering. CTA Buttons Covered in batch.spec.ts.
Computed Results Text Area (#batch-output-area) Read-Only Textarea Select / Copy Batch Output Non-editable, selectable output textarea showing transformed coordinates, preserved comments, or standardized quality annotations. Clean Output Rule for Invalid Lines: When input rows have syntax errors (Invalid input) or physically impossible angles (Invalid angle), invalid coordinate numbers are strictly omitted from the output. The output row contains ONLY the Point Name (if provided) followed by the standardized quality tag (e.g. 104, # Invalid input or 101, # Invalid angle). If no point name was given, only the quality tag is output (e.g. # Invalid input). Symmetrical like-for-like row mapping guarantees line $N$ in corresponds to line $N$ out. Output Fields Covered in batch.spec.ts.
Copy Results Button (#batch-copy-results-btn) Copy Action Button Click Clipboard Copies entire computed output text to clipboard. Shows feedback tooltip and toast. Disabled when empty. CTA Buttons Covered in batch.spec.ts.
Quality Report Summary (.quality-report-card, .quality-report-badges) Visual Labels / Badges Read-Only (Non-selectable) Quality Feedback Visual artifact labels (not selectable) arranged in a Two-Section Card separated by a discrete dashed divider line with subtle sub-titles: Top Subsection ("Coordinates" / "Coordonate"): displays volume and breakdown counts (Total Points: [N], 2D: [N], 3D: [N]), reading contextually as Coordinates 2D (N), Coordinates 3D (N). Bottom Subsection ("Transformation" / "Transformare"): displays diagnostic counts for calculation results (Valid: [N], Invalid Input: [N], Invalid Angle: [N], Outside Grid: [N], No Grid Data: [N]), reading contextually as Transformation Valid (N), Transformation Outside Grid (N), etc. Status Badges Covered in batch.spec.ts.
Download CSV (#batch-export-csv) Action Button Click File Download Exports exact line-by-line replica of computed results as .csv file (including comment and quality check rows). No Premature Toast: Clicking export initiates the browser's native Save As file prompt without firing a premature "File Downloaded" notification toast. Export Buttons Covered in batch.spec.ts.
Download GeoJSON (#batch-export-geojson) Action Button Click File Download Exports valid in-grid points as GeoJSON FeatureCollection. Clean filtering: Filters out all invalid outputs (out of grid, no data on grid, syntax errors, invalid angles) to avoid invalid geometries in GIS software. No Premature Toast: Directly triggers browser Save As dialog without premature notification. Export Buttons Covered in batch.spec.ts.
Download DXF (#batch-export-dxf) Action Button Click File Download Generates standard ASCII AutoCAD DXF file containing POINT entities for valid coordinates. Clean filtering: Filters out all invalid outputs (out of grid, no data on grid, syntax errors, invalid angles) to prevent CAD entity corruption. No Premature Toast: Directly triggers browser Save As dialog without premature notification. Export Buttons Covered in batch.spec.ts.
Center / Zoom Extents (#batch-center-map-btn, #batch-zoom-extents-btn) Action Buttons Click GIS Map Viewport Pans or fits bounds (max zoom 14) to the batch text point cluster. Disabled when point set is empty. CTA Buttons Covered in map.spec.ts.

3.5 File Upload Mode (FileUpload.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
File Drag & Drop Zone (#file-dropzone, #file-input-hidden) Dropzone / File Picker Drag & Drop / Click File Queue Accepts .txt, .csv, .xyz, .dat files up to 20MB per file. Displays drag-over visual indicator. Staged Workflow: Supports staging multiple files. Allows adding files, transforming them, changing global transformation settings (e.g. coordinate order or direction), staging additional files, and transforming the untransformed files using the updated app settings. Upload Dropzones Covered in file.spec.ts.
Ignore Header / First Line Switch (#file-skip-header-toggle) Boolean Toggle Switch Click / Keypress File Input Options Toggles ignoring the first line / header row in uploaded bulk files. When active, streams header verbatim without error or warnings, and excludes header from quality counts. Toggle Switches Fully wired to API and covered in file.spec.ts.
Transform CTA (#file-start-btn) Action Button (.btn-primary) Click File Queue Processing Processes untransformed files in the queue sequentially using current active settings. Full-width 34px primary button bridging Input and Output cards. Displays streaming progress. CTA Buttons Covered in file.spec.ts.
Map Visualization of Files (filesLayer) GIS Rendering Auto / Viewport GIS Map Canvas Map displays markers and clusters cumulatively from all processed files in the queue. Web GIS Architecture Covered in file.spec.ts.
Volume Warning Dialog (.modal-backdrop, #vw-opt-all, #vw-opt-sample, #vw-opt-skip, #vw-confirm-btn) Modal Alert Dialog Single-Choice Radio Cards + Confirm Action Map Rendering Guard Triggered when point count exceeds configured threshold (batchWarningThreshold, default 2,000). Presents accessible Archetype 2.5 radio option cards with default set to render all points: Render All Points, Render Sample (sampled at batchSampleSize, default 1,000), or Skip Map Display, confirmed via a single Continue button. Close button, clicking backdrop, or Escape key defaults to skip. Configured centrally in webapp/src/config.ts. Selection Switchers Covered in file.spec.ts.
Individual File Download (.file-download-btn[data-id]) File Action Button Click File Download Downloads individual transformed file. 26px secondary button. Directly invokes browser save dialog without premature notification toasts. Export Buttons Covered in file.spec.ts.
Individual File Remove (.file-queue-remove[data-id]) Icon Action Button Click File Queue Removes individual file item from queue, revokes object URL, and recalculates/clears map layer points. Queue Buttons Covered in file.spec.ts.
Remove All Output Button (#file-clear-output-btn) Action Button Click Output Queue Action button (26px .btn-secondary.btn-secondary-action) anchored to the left of Download All in Output card header labeled Remove All (Elimină Tot). Clears all completed/errored output cards, revokes blob URLs, and purges all file points from the map layer. Export Buttons Fully implemented and covered in file.spec.ts.
Download All Button (#file-download-all-btn) Action Button Click Bulk Download Sequentially triggers downloads for all completed files in the queue (staggered by 300ms to avoid browser download blocking). Visible when more than 1 file is completed. Directly invokes browser save dialogs without premature notification toasts. Export Buttons Covered in file.spec.ts.
Clear Queue Button (#file-clear-queue-btn) Action Button Click File Queue Clears all uploaded files from queue and completely purges the files map layer. Text-only 26px .btn-outline.btn-secondary-action in Input card header. Queue Buttons Covered in file.spec.ts.
File Queue Quality Summary (.studio-card.report-card) Visual Labels / Badges Read-Only Queue Diagnostics Displays quality report for processed files: Top row: Coordinates (Total, 2D, 3D). Bottom row: Transformation (single file compact row; multi-file breakdown with per-file subrow + Total summary line) without icon symbols. Status Badges Covered in file.spec.ts.

4. Section III: Web GIS Map Canvas (MapView.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Map Click (#map) Canvas Interaction Click on canvas Point Mode Inputs In ETRS89ToStereo70: Populates clicked lat/lon in active angular units into Point inputs. In Stereo70ToETRS89: Reverse calculates Stereo 70 Northing/Easting from map click. Automatic trigger: Map click is the only action that automatically computes output coordinates and updates map pin without requiring the Transform button. Only active when Point tab is selected. Untransformable Point Click Erase Rule: When clicking in an untransformable location (outside grid or no grid data), both input and output coordinates are immediately erased/cleared out ("" in both inputs and outputs), and the quality report displays Outside Grid or No Grid Data. This guarantees the user is never left with misleading coordinates from previous or partial calculations. Applies symmetrically to both ETRS89 ➔ Stereo 70 and Stereo 70 ➔ ETRS89 directions. Web GIS Architecture Covered in map.spec.ts.
Map Marker Symbology (.custom-point-marker, .custom-cluster-circle) Visual Marker Visual / Click popup Map Canvas Point markers strictly retain their assigned layer color from the Layers drawer (never turn red, flash, or change color on selection or warning/error). Errors and warnings are reported strictly via the workbench reporting area (.quality-report-card). The single point marker features a continuous soft pulsing ripple animation (markerPulse) around it at all times to distinguish it from batch points. Clusters group points and inherit the layer color. Center on Map and Zoom to Extents buttons allow pinpointing location. Map Tokens Covered in map.spec.ts.
CAD Point Label Dynamic Visibility (.zoom-labels-visible) Canvas Rendering Zoom Map Marker Labels Point ID text labels on map markers automatically hide below zoom level 15 to prevent clutter, and display at zoom $\ge 15$. Web GIS Architecture Add zoom threshold visual test.
Cluster Spiderfy (.custom-marker-cluster) Cluster Behavior Click cluster at max zoom Map Markers Marker clusters spiderfy (fan out in a circular spiral) when clicked at maximum zoom levels so identical/overlapping points can be individually inspected. Web GIS Architecture Covered in map.spec.ts.
Map Point Attribute Popup (.geodetic-popup, .geodetic-popup-copy-btn) Info Popup / Clipboard Action Click marker on map Popover Readout Displays comprehensive key-value attribute table showing: Point ID, coordinates in both ETRS89 (formatted in angular units active at computation time) and Stereo 70 (meters), Altitude/Height ($H$ and $h$), Quasigeoid height $\zeta$ (in cyan), and quality status (e.g. Valid in grid, Out of grid). Contains a Copy Attributes button (Copiază atributele) to copy the key-value table to clipboard with in-place feedback. Map Tokens Covered in map.spec.ts.
Zoom In / Zoom Out (#map-zoom-in-btn, #map-zoom-out-btn) Map Dock Control Click Map Zoom Level Adjusts map zoom by $\pm 1$ step. Map Tokens Leaflet custom control dock.
Home (#map-home-btn) Map Dock Control Click Map Viewport Centers map on Romania bounds ([43.5, 20.2] to [48.3, 29.8]) at an ergonomic overview zoom (level 7). Map Tokens Covered in map.spec.ts.
Measure Tool (#map-measure-btn) Map Dock Toggle Click to activate $\to$ Click Pt 1 $\to$ Pt 2 Measurement Layer Enables measurement cursor: clicks 2 points on map, draws polyline, displays geodesic distance in meters/km with tooltip. Measures strictly one single distance at a time; starting a third click resets and clears previous measurement. Pressing Escape cancels and clears measurement. Map Tokens Covered in map.spec.ts.
Fullscreen Toggle (#map-fullscreen-btn) Map Dock Toggle Click Browser Screen Enters/exits browser fullscreen mode; synchronizes icon state. Automatically invalidates map dimensions. Map Tokens Covered in map.spec.ts.
Legend Widget (.map-legend-dock, #map-legend-header) Expandable Map Widget Click header Legend Visibility Shows active transformation layers: Single Point, Batch Text, Uploaded Files. Color synchronization: Legend swatches strictly honor the colors selected in the Layers drawer. Can be minimized/expanded (persisted in localStorage['pytransdat_legend_open']). Reflows dynamically above graphic scale bar. Map Tokens Covered in map.spec.ts.
Graphic Scale Bar (.map-scale-dock) GIS Graphic Scale Read-Only Map Canvas High-contrast segmented graphic scale bar showing distance in meters or kilometers responsive to zoom. Map Tokens Covered in map.spec.ts.
Layers Drawer Button (#map-layers-toggle) Drawer Toggle Button Click Layers Menu Icon button in bottom-left opening drawer for Base Maps, Shift Grids (Coming Soon), and Data Layers. Closes on click-outside. Map Tokens Covered in map.spec.ts.
Layer Visibility Checkboxes (#layer-chk-point, #layer-chk-text, #layer-chk-files) Checkboxes Check / Uncheck Layer Visibility Independently toggles visibility of Point, Text, and File layers on the map. Synchronizes layer count badge and Legend. Multi-Choice Checkboxes Covered in map.spec.ts.
Base Map Radio Selector (input[name="basemap-choice"]) Radio Group Click option Leaflet TileLayer Mutually exclusive basemap selection: OpenStreetMap (default), Carto Positron, Carto Dark Matter, Satellite. Persisted in localStorage['pytransdat_basemap']. Coupled to theme for Carto options. Segmented Controls Covered in map.spec.ts.
Data Layer Color Swatch Pickers (.layer-color-trigger, .color-swatch-option) Color Swatch Popover Click Layer Symbology Distinguishable defaults: Default layer colors are easily distinguishable and avoid red by default (red reserved for selectable custom choice). Changing swatch updates markers, clusters, and legend swatches immediately. Persisted in localStorage['pytransdat_map_colors']. Map Tokens Covered in map.spec.ts.
Coordinate Readout Badge (.map-coords-badge) Status Readout Mousemove on map Bottom Coordinate Bar Shows cursor coordinates dynamically formatted in active angular units (Degrees, DMS, Radians) and coordinate order (Lat/Long in NE mode vs Long/Lat in EN mode). Map Tokens Covered in map.spec.ts.

5. Section IV: Floating Panels & Diagnostic Windows

5.1 Grid Metadata Panel (GridMetadataPanel.ts)

Accessed via Header Help Menu $\to$ Grid Info (#menu-grid-info-btn).

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Draggable Header Handle (#fgp-drag-handle) Drag Handle Pointer drag Panel Position Pointer-captured dragging allowing moving the panel across the viewport with boundary clamping. Floating Modals Covered in panel tests.
Window Minimize / Restore (#fgp-minimize-btn) Window Control Button Click Window Geometry Toggles panel between full content view and collapsed title bar (— $\leftrightarrow$ □). Floating Modals Covered in panel tests.
Window Close Button (#fgp-close-btn) Window Control Button Click Panel Lifecycle Closes and unmounts the floating grid metadata window. Floating Modals Covered in panel tests.
Corner Resize Handle (#fgp-resize-handle) Window Resizer Pointer drag Window Dimensions Pointer-captured resizing from bottom-right corner with minimum (360x280px) and viewport maximum clamping. Floating Modals Covered in panel tests.
Metadata Search Filter (#fgp-search, #fgp-clear-search) Search Input Input / Clear Metadata Tree Real-time search input filtering JSON metadata keys and values; clear button ✕ resets search query. Text Inputs Covered in lifecycle.spec.ts.
Expand / Collapse All (#fgp-expand-all-btn, #fgp-collapse-all-btn) Action Buttons Click Tree State Recursively expands or collapses all branches in the hierarchical grid metadata tree. CTA Buttons Covered in unit and lifecycle tests.
Copy Raw JSON (#fgp-copy-json-btn) Action Button Click Clipboard Copies complete raw grid metadata JSON structure to clipboard with toast notification. CTA Buttons Covered in unit and lifecycle tests.
Tree Branch Expander (.fgp-expander) Tree Node Expander Click Branch Node Toggles individual tree branch open/closed (▸ $\leftrightarrow$ ▾). Tree Nodes Covered in unit tests.

5.2 Geodetic Help Panel (GeodeticHelpPanel.ts)

Accessed via Header Help Menu $\to$ Help Guide (#menu-help-app-btn).

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Draggable / Resizable Window (#fhp-drag-handle, #fhp-minimize-btn, #fhp-close-btn) Window Mechanics Drag / Minimize / Close Panel Geometry Movable header without decorative icons, 24×24px square minimize/close buttons, and corner resize grip. Floating Modals Covered in unit and lifecycle tests.
Dynamic Benchmark Comparison Card (#fhp-benchmark-slot) Structured Table Surface Async Load / View Geodetic Verification Fetches and renders live mathematical comparison against official ANCPI vectors from /api/v1/grid/comparison. Features separate planimetric and elevation residual columns with pure numerical values in read-only info chips (.fhp-metric-chip) and semantic status pills (.status-pill.success). Section Content Cards Covered in lifecycle.spec.ts.
Notice & Callout Boxes (.fhp-callout-box) Callout Block Read / Inspect Guidance & Disclaimers Reusable informational callouts displaying About disclaimer and Benchmark acceptance criteria ($\le 3\text{ mm}$ tolerance threshold). Colon strictly omitted from titles. Notice & Callout Boxes Verified in unit tests.
Angular Format Preview Chips (.fhp-format-chip) Selectable Info Chips Select / Copy Format Conventions Selectable / copyable format previews for DMS, Decimal Degrees, and Radians. Selectable Informational Readouts Verified.

5.3 Feedback & Discrepancy Reporting Modal (FeedbackPanel.ts)

Accessed via Header Help Menu $\to$ Report Issue (#menu-feedback-btn) or clicking Offline API Health Dot.

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Report Type Selector (#fb-type-select) Dropdown Select Select option Feedback Template Options: discrepancy, grid_update, bug, feature, api_down. Dynamically loads contextual pre-filled issue template into the message textarea. Dropdown Selects Covered in feedback tests.
Message Textarea (#fb-message-input) Textarea Input Edit / View Feedback Payload Accepts detailed issue description. Pre-populates with client URL, timestamp, active grid file, and environment details. Text Inputs Covered in feedback tests.
Reset Template Button (#fb-reset-template-btn) Action Button Click Template State Reverts textarea content back to the default pre-filled template for the currently selected report type. CTA Buttons Covered.
Copy Report Button (#fb-copy-btn) Action Button Click Clipboard Copies formatted report text to clipboard with toast notification. CTA Buttons Covered.
Open as GitHub Issue (#fb-github-btn) Action Button Click External Builds pre-filled GitHub issue URL with title and body, opening in new tab (target="_blank"). CTA Buttons Covered.
Human Math Verification (#fb-math-input) Bot Prevention Input Numeric input Submission Guard Displays lightweight human challenge (X + Y = ?). Required before submitting. Prevents headless automated spam. Text Inputs Covered.
Submit Feedback Button (#fb-submit-btn) Action Button (.btn-primary) Click API Submission Submits report payload to /api/v1/feedback. Validates math answer, minimum elapsed time (>1.2s), and honeypot field. Displays progress and success toast. CTA Buttons Covered in feedback tests.
Cancel / Close Buttons (#ffp-close-btn, #fb-cancel-btn) Window Actions Click Panel Lifecycle Closes and unmounts the feedback modal. Floating Modals Covered.

6. Section V: Usage & Telemetry Dashboard (TelemetryDashboard.ts)

Accessed via Usage header tab. Contains 3 sub-views: Computation, Spatial, Legacy.

6.1 Sub-Navigation Tabs

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Usage Sub-Tabs (#tab-timeline-btn, #tab-spatial-btn, #tab-legacy-btn) Tablist Buttons Click Telemetry Dashboard View Switches active sub-page between Computation Timeline, Spatial Grid Matrix, and Legacy Historical Data. Active tab receives .active and underline indicator. Segmented Controls Covered in legacy.spec.ts.

6.2 Sub-View 1: Computation (TimelineChart.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Aggregator Summary Cards (.telemetry-kpi-banner .telemetry-kpi-card) KPI Summary Cards Read-Only / Filter Responsive Computation View Displays aggregated totals (Total Points, Total Calls, Batch Intensity ratio). Dynamically recalculated from active selected sources. Formats numbers according to active locale (comma , in Romanian; period . in English). KPI Summary Cards Covered in legacy.spec.ts.
Time Window Presets ([data-preset]) Segmented Control Click Time Filtering Options: All Time, 12 Months, Year-to-Date (YTD), 30 Days, 7 Days. Selecting a preset automatically updates the date range input pickers to reflect the start and end dates of that window. Filters data reactively. Continuous Presets Covered in legacy.spec.ts.
Granularity Selector ([data-granularity]) Segmented Control Click Chart Grouping Options: Daily, Weekly, Monthly. Groups time-series histogram bars accordingly. Continuous Presets Covered in legacy.spec.ts.
Date Range Inputs (#comp-date-start, #comp-date-end) Date Pickers Date change Custom Date Filter Start date defaults to earliest DB telemetry date (2023-11-01); End date defaults to current date. Strict clamping prevents picking dates outside DB boundaries. Syncs when presets are clicked. Date Pickers Covered in legacy.spec.ts.
Active Period Snapping Deck (.telemetry-date-controls-row) Read-Only Cluster Deck Read / Inspect Computation & Spatial Displays temporal bounds in UK DD/MM/YY format across two functional clusters separated by a vertical divider (.telemetry-deck-vdivider): Left cluster includes User Date Range Pickers + Earliest Available: DD/MM/YY and Current Date: DD/MM/YY; Right cluster displays Active Period: Start [ DD/MM/YY ] End [ DD/MM/YY ] accompanied by an explanatory periodic aggregation contextual tooltip indicator (.info-help-indicator). Reflects database period boundaries. Informational Tooltips Covered in computation.spec.ts & spatial.spec.ts.
Source Filter Toggles ([data-source-name]) Toggle Buttons Click (Multi-select) Source Filtering Independent multi-toggle buttons with status dot indicators for sources: REST API, Web App, Desktop / CLI. Unknown sources filtered out. Multi-Choice Checkboxes Covered in legacy.spec.ts.
Metric Filter Toggles (#comp-metric-points-btn, #comp-metric-calls-btn) Toggle Switches Click (Multi-select) Chart Metrics Allows displaying Points, Calls, or both simultaneously on the computation timeline SVG chart. Multi-Choice Checkboxes Add dedicated E2E assert for dual metric toggle.
Computation Total Overlay Toggle (#comp-toggle-total) Checkbox / Toggle Button Click Chart Overlay Toggles cumulative total line across active computation series, mirroring the #legacy-toggle-total control in the Legacy tab. Chart Total Toggles Covered in computation specs.
Chart Series Color Pickers (.interactive-legend-item, .legend-swatch-option) Color Swatch Popovers Click / Swatch select Chart Series Symbology Allows user to customize and select colors for individual series lines/bars and Total line in the timeline chart. Closes on click-outside. Telemetry Tokens Covered in legacy.spec.ts.

6.3 Sub-View 2: Spatial (SpatialMatrixChart.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Spatial KPI Cards (.spatial-overview-banner) KPI Summary Cards Read-Only Spatial View Displays spatial aggregations (Total Metric Value, Active Cells Count). Filter synchronization: Strictly synchronizes with all applied filters (time window, custom date range, sources). Formats numbers according to active locale. KPI Summary Cards Covered in legacy.spec.ts.
Quadrant Share Cards (.quadrant-card NW, NE, SW, SE) Mathematical KPI Cards Read-Only Regional Distribution Displays metric value and percentage share across Romania's 4 geographic quadrants divided by projection center origin. KPI Summary Cards Covered in legacy.spec.ts.
Spatial Metric Selector (#spatial-metric-points-btn, #spatial-metric-calls-btn) Mutually Exclusive Radio Selector Click (Single Choice) Heatmap Density Unlike computation view, this is a strict radio selector: selects either Points or Calls so coordinate density values do not combine into meaningless sums. Continuous Presets Add E2E check verifying mutual exclusivity.
Spatial Scale Mode Toggle (#spatial-scale-log-btn, #spatial-scale-linear-btn) Segmented Switch Click Color Scaling Toggles between Logarithmic and Linear heatmap bin color scaling for dense clusters. Continuous Presets Covered in legacy.spec.ts.
Spatial Grid Matrix Canvas (#spatial-matrix-slot) Interactive Canvas Pan / Hover Romanian Coordinate Grid Interactive SVG/Canvas rendering transformation density binned into 10km geodetic cells over Romania's bounds. Hover displays cell count tooltip. Telemetry Design Covered in legacy.spec.ts.
5-Step Color Ramp Legend (.spatial-legend-bar) Graphic Legend Read-Only Density Scale Displays discrete 5-step color scale: Empty, Low, Medium, High, Peak (labeled with dynamic max cell hits). Telemetry Design Covered in legacy.spec.ts.

6.4 Sub-View 3: Legacy Historical Data (LegacyTimelineChart.ts)

Element Name & DOM Locator Control Type User Action Target Scope Expected Behavior & Side Effects Archetype Reference Test Coverage Gap / Note
Legacy Aggregator Cards (.telemetry-kpi-banner .telemetry-kpi-card) KPI Summary Cards Read-Only Legacy View Displays historical transformation statistics from legacy Java TransDatOnline service (2011–2026): Total, App, Service, Stereo 70, Stereo 30 points. Reacts to legacy filter selections. Formats numbers according to active locale. KPI Summary Cards Covered in legacy.spec.ts.
Legacy Time & Granularity Presets ([data-legacy-preset], [data-legacy-granularity]) Segmented Controls Click Legacy Filters Preset time windows (All, 12M, YTD, 30D, 7D) and temporal bucket grouping (Daily, Weekly, Monthly). Presets update date pickers based on DB maximum history date (2026-10-14), not system clock. Continuous Presets Covered in legacy.spec.ts.
Legacy Date Range Inputs (#legacy-date-start, #legacy-date-end) Date Pickers Date change Archive Date Filter Fixed archive boundaries clamped between 2011-01-09 and 2026-10-14. Date Pickers Covered in legacy.spec.ts.
Legacy Source Filter ([data-legacy-source="app"], [data-legacy-source="service"]) Toggle Buttons Click (Multi-select) Legacy Sources Limited strictly to legacy traffic sources: Web App and REST API (Service). At least one source must remain active. Multi-Choice Checkboxes Covered in legacy.spec.ts.
Legacy Operation Filter ([data-legacy-op="st70"], [data-legacy-op="st30"]) Toggle Buttons Click (Multi-select) Legacy Operations Filters historical operations: Stereo 70 ➔ ETRS89 and Stereo 30 ➔ ETRS89 (historical regional projection). At least one operation must remain active. Multi-Choice Checkboxes Covered in legacy.spec.ts.
Legacy Total Overlay Toggle (#legacy-toggle-total) Checkbox / Toggle Click Chart Overlay Toggles cumulative total line across active legacy series. Chart Total Toggles Covered in legacy.spec.ts.

7. Coverage Gap Analysis & Recommended Action Items

From our analysis of existing Playwright tests in webapp/e2e/ against the comprehensive inventory, here are the specific gaps to address when generating or updating tests:

  1. Locale-Aware Number Formatting (Usage Dashboard vs. Transformation Purity):
    • Requirement: Usage / Telemetry dashboard statistics format numbers with commas (,) in Romanian and periods (.) in English. Transformation inputs, outputs, clipboard operations, and export files strictly remain standard dot (.) decimals to preserve CAD/GIS interoperability.
    • Action Item: Add assertions in i18n.spec.ts and legacy.spec.ts verifying that Usage statistics reflect locale-aware decimal formatting while coordinate boxes remain dot-decimal.
  2. Single Distance Measurement Reset & Esc Key:
    • Requirement: Measure tool must measure strictly one line at a time, reset on subsequent clicks, and cancel cleanly on Escape.
    • Action Item: In map.spec.ts, verify that starting a third click clears the previous measurement line/tooltip, and verify Escape deactivates the tool.
  3. Marker Color Invariance on Map Selection & Continuous Pulsing:
    • Requirement: Point markers on the map must permanently stay the assigned layer color from the Layers drawer (never turn red, flash, or change color on selection or warning/error). Single point marker exhibits a continuous soft pulsing animation around it at all times. Errors are communicated exclusively through the workbench reporting area.
    • Action Item: Verify in map.spec.ts that the single point marker retains its exact layer color hex code even when outside grid.
  4. Invalid Row Filtering in GeoJSON / DXF Exporters vs. CSV Exact Replica:
    • Requirement: CSV export includes all lines (including comment and error rows), but GeoJSON and DXF exporters must cleanly filter out out-of-grid coordinates, invalid angles, and syntax errors to prevent corrupted vector geometries.
    • Action Item: Add tests in webapp/src/utils/exporters.test.ts and batch.spec.ts asserting DXF and GeoJSON entity counts exclude invalid records.
  5. Spatial Metric Mutual Exclusivity & Global Filter Sync:
    • Requirement: In the Spatial section of Usage, Metric must be a single-choice selector (Points OR Calls), whereas Computation allows multi-toggle (Points AND Calls). Spatial KPI cards must sync with all applied filters (time, custom date, sources).
    • Action Item: Add test in legacy.spec.ts verifying clicking Calls unchecks Points in the Spatial view and KPI cards reflect active time filters.
  6. URL Deep-Linking Hydration:
    • Requirement: Booting the SPA with query parameters (?op=Stereo70ToETRS89&c1=500000&c2=500000) populates inputs and computes output coordinates on load.
    • Action Item: Add a new test in point.spec.ts asserting that query params successfully hydrate and calculate without user interaction.
  7. Floating Panel Controls (Grid Metadata & Feedback):
    • Requirement: Dragging headers, resizing windows, search tree filtering, and anti-bot math challenges function reliably without DOM errors. Title bars across all floating panels are cleanly typographical without decorative icons, with standardized minimize (—), restore (□), and close controls with full localization. Trailing colons are strictly omitted across all labels.
    • Action Item: Add targeted integration tests validating floating panel open, search, minimize, and close cycles.
  8. Brand Logo Fresh-Load Reset Action vs. Title Navigation:
    • Requirement: Clicking the Brand Logo (#header-brand-logo-wrap) triggers a complete application state reset (clearing Point inputs/outputs, Batch text, Files queue, map layers, measurements, and closing floating panels) while preserving language and theme. Clicking Brand Title text performs soft navigation to Studio without state destruction.
    • Action Item: In smoke.spec.ts, assert clicking Brand Logo returns to Studio and purges active coordinate inputs.
  9. Global Offline Alert Banner & Non-Disruptive Health Dot:
    • Requirement: The header health dot remains a fixed 8px status indicator (.online/.offline) without shifting adjacent navigation elements. A dedicated top alert banner appears when the REST API is offline with an explicit click-to-report link.
    • Action Item: In error mock tests, verify that when offline, the global banner renders with an actionable report trigger and opens the Feedback modal.
  10. Untransformable Map Click Coordinate Erase:
    • Requirement: Clicking outside the official TransDatRO grid or on an area without grid data immediately clears both input and output coordinate fields ("" in both inputs and outputs) in both ETRS89 and Stereo 70 directions.
    • Action Item: In map.spec.ts, simulate clicking outside Romania's grid boundary and assert input coordinate boxes are cleared.
  11. Golden Rule Quality Reporting Architecture & Error Banner Elimination:
    • Requirement: Eliminate all ad-hoc inline .error-banner elements. Feedback is handled exclusively through the Two-Section Quality Reporting Card (Coordinates and Transformation separated by a dashed divider) using unified classifications (Valid, Invalid Input, Invalid Angle, Outside Grid, No Grid Data). DMS angles explicitly show sexagesimal symbols (°, ', ").
    • Action Item: In point.spec.ts and batch.spec.ts, verify that invalid numeric and angular inputs produce structured quality badges without inline error banners.
  12. Batch Textarea Height Persistence & Clean Error Row Formatting:
    • Requirement: Clicking Transform preserves user-adjusted vertical textarea heights. Non-computable input rows output only Point Name (if present) and quality comment (e.g. 104, # Invalid input or 101, # Invalid angle), omitting invalid coordinate numbers.
    • Action Item: In batch.spec.ts, verify custom textarea heights are maintained across calculations and invalid rows omit coordinates in output.
  13. Download Action Toast Elimination:
    • Requirement: Clicking export for CSV, GeoJSON, or DXF triggers native browser save/download dialogs without firing premature synthetic "Downloaded" toast notifications.
    • Action Item: In batch.spec.ts, assert clicking download buttons does not emit success toasts.
  14. Computation Timeline Total Series Toggle:
    • Requirement: Computation sub-view timeline chart includes an interactive toggle button (#comp-toggle-total) to show or hide the combined total series line(s).
    • Action Item: In legacy.spec.ts / telemetry.spec.ts, verify #comp-toggle-total toggles the total series line visibility.