Handout - Graph Selection | Thimo Niewerth

Unternehmen & Produkt

AI-Gruppe / Auto-Intern GmbH

Professionelle Messtechnik
OmnAIScope: Hardware-Messgeräte für KFZ-Werkstätten
OmnAIView: Desktop-Software zur Visualisierung

Problemstellung

Ist-Zustand: Nur Anzeigen möglich (keine Analyse)

Fehlend: Bereichsauswahl, Statistikberechnung, Min/Max/Avg Analyse

Die Lösung: Graph Selection Feature

Funktionen

Selection-Modus per Toggle-Button
Drag-Auswahl direkt im Graph
Visuelles Rechteck zeigt Auswahl
Echtzeit-Statistikberechnung
Multi-Device Support

Berechnete Metriken

Metrik	Beschreibung
Min / Max	Extremwerte im Bereich
Avg	Arithmetischer Mittelwert
RMS	Root Mean Square
P2P	Peak-to-Peak Differenz

Technologien

Angular 19 Signals & Components

Electron Desktop-Apps

D3.js Graphen & SVG

TypeScript Typsicherheit

Architektur-Highlights

GraphSelectionService: State Management mit Signals
SelectionAnalysisService: Statistische Berechnungen
Computed Properties: Automatische Reaktivität
5px Drag-Threshold: Click vs. Drag Unterscheidung

Herausforderungen & Lösungen

Touch-Support: Finger wackelt → 5px Schwellwert
Zoom/Pan: Bestehende Gesten → Toggle-Modus
Performance: Viele Punkte → O(n) Algorithmen
Multi-Device: UUID-basierte Zuordnung

Code-Beispiel: Angular Signals

// Reaktiver State mit Signals
private readonly _isSelectionMode = signal(false);
private readonly _selectionStartX = signal<number | null>(null);

// Computed Property - automatisch aktualisiert
readonly selectionRect = computed(() => {
  const startX = this._selectionStartX();
  const endX = this._selectionEndX();
  if (startX === null || endX === null) return null;
  return { x: Math.min(startX, endX), width: Math.abs(endX - startX) };
});

Projektergebnis

✓ Alle Anforderungen erfüllt: Bereichsauswahl, Echtzeit-Statistik, Performance <100ms, Multi-Device, Touch-Support