17385998257

Committed 01 Sep 2025 07:42PM UTC coverage: 61.901% (-0.8%) from 62.741%

Build # 17385998257

Build Type

push

github

Committed by

cgreening

Commit Message

Switch to driver-js

Run Details

410 of 522 branches covered (78.54%)

Branch coverage included in aggregate %.

0 of 34 new or added lines in 1 file covered. (0.0%)

82 existing lines in 4 files now uncovered.

2006 of 3381 relevant lines covered (59.33%)

34.85 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.27

/src/components/Header.tsx

import { useState } from 'react'
import Button from './ui/Button'
import { PlayIcon, StopIcon, XCircleIcon } from '@heroicons/react/24/outline'
import ConnectModal from './ConnectModal'
import type { ConnectionState, ConnectionType, SerialConfig } from '../hooks/useDataConnection'
import type { GeneratorConfig } from '../hooks/useSignalGenerator'

interface Props {
  connectionState: ConnectionState
  onConnectSerial: (config: SerialConfig) => Promise<void>
  onConnectGenerator: (config: GeneratorConfig) => Promise<void>
  onDisconnect: () => Promise<void>
  generatorConfig: GeneratorConfig
}

function getConnectionIcon(type: ConnectionType | null, isConnected: boolean) {
  if (!isConnected) return <PlayIcon className="w-4 h-4" />
  if (type === 'serial') return <StopIcon className="w-4 h-4" />
  if (type === 'generator') return <StopIcon className="w-4 h-4" />
  return <StopIcon className="w-4 h-4" />
}

function getConnectionText(state: ConnectionState) {
  if (state.isConnecting) return 'Connecting...'
  if (state.isConnected) {
    if (state.type === 'serial') return 'Serial Connected'
    if (state.type === 'generator') return 'Generator Running'
    return 'Connected'
  }
  if (!state.isSupported) return 'Serial Unsupported'
  if (state.error) return 'Connection Error'
  return 'Connect'
}

function getButtonVariant(state: ConnectionState) {
  if (state.isConnected) return 'danger'
  if (state.error) return 'neutral'
  return 'primary'
}

export function Header({ 
  connectionState, 
  onConnectSerial, 
  onConnectGenerator, 
  onDisconnect, 
  generatorConfig 
}: Props) {
  const [showModal, setShowModal] = useState(false)
  

  const handleButtonClick = () => {
    if (connectionState.isConnected) {
      onDisconnect()
    } else {
      setShowModal(true)
    }
  }

  return (
    <>
      <header className="flex items-center justify-between gap-4 py-3 px-4 border-b border-neutral-800">
        <div className="flex items-center gap-3">
          <div className="text-lg font-semibold tracking-tight">Web Serial Plotter</div>
        </div>
        <div className="flex items-center gap-4">
          <div className="hidden md:block text-xs text-neutral-500 dark:text-neutral-400">
            This project is a work in progress. Found a bug or have an idea? <a className="underline hover:no-underline text-blue-600 dark:text-blue-400" href="https://github.com/atomic14/web-serial-plotter/issues" target="_blank" rel="noopener noreferrer">Open an issue on GitHub</a>.
          </div>
          <Button 
            id="tour-connect-button"
            variant={getButtonVariant(connectionState)}
            disabled={connectionState.isConnecting}
            onClick={handleButtonClick}
            startIcon={
              connectionState.isConnected 
                ? getConnectionIcon(connectionState.type, connectionState.isConnected)
                : connectionState.error
                  ? <XCircleIcon className="w-4 h-4" />
                  : getConnectionIcon(connectionState.type, connectionState.isConnected)
            }
          >
            {getConnectionText(connectionState)}
          </Button>
        </div>
      </header>

      <ConnectModal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        onConnectSerial={onConnectSerial}
        onConnectGenerator={onConnectGenerator}
        isConnecting={connectionState.isConnecting}
        isSupported={connectionState.isSupported}
        generatorConfig={generatorConfig}
      />
    </>
  )
}

export default Header



1	import { useState } from 'react'	1✔
2	import Button from './ui/Button'	1✔
3	import { PlayIcon, StopIcon, XCircleIcon } from '@heroicons/react/24/outline'	1✔
4	import ConnectModal from './ConnectModal'	1✔
5	import type { ConnectionState, ConnectionType, SerialConfig } from '../hooks/useDataConnection'
6	import type { GeneratorConfig } from '../hooks/useSignalGenerator'
7
8	interface Props {
9	connectionState: ConnectionState
10	onConnectSerial: (config: SerialConfig) => Promise<void>
11	onConnectGenerator: (config: GeneratorConfig) => Promise<void>
12	onDisconnect: () => Promise<void>
13	generatorConfig: GeneratorConfig
14	}
15
16	function getConnectionIcon(type: ConnectionType \| null, isConnected: boolean) {	3✔
17	if (!isConnected) return <PlayIcon className="w-4 h-4" />	3✔
18	if (type === 'serial') return <StopIcon className="w-4 h-4" />	1!
19	if (type === 'generator') return <StopIcon className="w-4 h-4" />	×
20	return <StopIcon className="w-4 h-4" />	×
21	}	×
22
23	function getConnectionText(state: ConnectionState) {	3✔
24	if (state.isConnecting) return 'Connecting...'	3!
25	if (state.isConnected) {	3✔
26	if (state.type === 'serial') return 'Serial Connected'	1!
27	if (state.type === 'generator') return 'Generator Running'	×
28	return 'Connected'	×
29	}	✔
30	if (!state.isSupported) return 'Serial Unsupported'	3!
31	if (state.error) return 'Connection Error'	3!
32	return 'Connect'	2✔
33	}	2✔
34
35	function getButtonVariant(state: ConnectionState) {	3✔
36	if (state.isConnected) return 'danger'	3✔
37	if (state.error) return 'neutral'	3!
38	return 'primary'	2✔
39	}	2✔
40
41	export function Header({	1✔
42	connectionState,	3✔
43	onConnectSerial,	3✔
44	onConnectGenerator,	3✔
45	onDisconnect,	3✔
46	generatorConfig	3✔
47	}: Props) {	3✔
48	const [showModal, setShowModal] = useState(false)	3✔
49
50
51	const handleButtonClick = () => {	3✔
52	if (connectionState.isConnected) {	2✔
53	onDisconnect()	1✔
54	} else {	1✔
55	setShowModal(true)	1✔
56	}	1✔
57	}	2✔
58
59	return (	3✔
60	<>	3✔
61	<header className="flex items-center justify-between gap-4 py-3 px-4 border-b border-neutral-800">	3✔
62	<div className="flex items-center gap-3">	3✔
63	<div className="text-lg font-semibold tracking-tight">Web Serial Plotter</div>	3✔
64	</div>	3✔
65	<div className="flex items-center gap-4">	3✔
66	<div className="hidden md:block text-xs text-neutral-500 dark:text-neutral-400">	3✔
67	This project is a work in progress. Found a bug or have an idea? <a className="underline hover:no-underline text-blue-600 dark:text-blue-400" href="https://github.com/atomic14/web-serial-plotter/issues" target="_blank" rel="noopener noreferrer">Open an issue on GitHub</a>.	3✔
68	</div>	3✔
69	<Button	3✔
70	id="tour-connect-button"	3✔
71	variant={getButtonVariant(connectionState)}	3✔
72	disabled={connectionState.isConnecting}	3✔
73	onClick={handleButtonClick}	3✔
74	startIcon={	3✔
75	connectionState.isConnected	3✔
76	? getConnectionIcon(connectionState.type, connectionState.isConnected)	1✔
77	: connectionState.error	2!
UNCOV 78	? <XCircleIcon className="w-4 h-4" />	×
79	: getConnectionIcon(connectionState.type, connectionState.isConnected)	2✔
80	}
81	>
82	{getConnectionText(connectionState)}	3✔
83	</Button>	3✔
84	</div>	3✔
85	</header>	3✔
86
87	<ConnectModal	3✔
88	isOpen={showModal}	3✔
89	onClose={() => setShowModal(false)}	3✔
90	onConnectSerial={onConnectSerial}	3✔
91	onConnectGenerator={onConnectGenerator}	3✔
92	isConnecting={connectionState.isConnecting}	3✔
93	isSupported={connectionState.isSupported}	3✔
94	generatorConfig={generatorConfig}	3✔
95	/>	3✔
96	</>	3✔
97	)
98	}	3✔
99
100	export default Header	1✔
101
102

atomic14 / web-serial-plotter / 17385998257

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous