dashboard docs

netvr-cpp/README.md

@@ -0,0 +1,4 @@
+# netvr-cpp
+
+Not actually needed, the rust code supersedes everything here. But useful as
+a point of reference.

netvr-dashboard/README.md

@@ -4,7 +4,7 @@ This folder contains simple dashboard application for managing devices connected
 
 ## Compiling
 
-To compile the dashboard you'll need latest [nodejs 16](https://nodejs.org/en/).
+To compile the dashboard you'll need latest [nodejs 20](https://nodejs.org/en/).
 If you have not done so, I recommend running `corepack enable yarn` as admin (do not run any other commands as admin). This will make sure that you have correct yarn version for this project.
 
 Once you have the correct system-wide dependencies you can run `yarn` to download and install this projects dependencies. The run `yarn build` to build the project.

netvr-dashboard/src/components/design.tsx

@@ -3,19 +3,32 @@ import { css } from '@emotion/react'
 import React, { PropsWithChildren, useId, useState } from 'react'
 import { ErrorBoundary } from './error-boundary'
 
+/**
+ * Styles to be applied to all focusable elements.
+ */
 export const focusableStyles = css({
   ':focus-visible': {
     outline: '2px solid var(--base-e)',
   },
 })
 
+/**
+ * Styles to be applied to the root so that selection follows the theme.
+ */
 export const selectionStyle = css({
   '::selection': {
     background: 'var(--base-d)',
     color: 'var(--base-0)',
   },
 })
 
+/**
+ * How a Pane should look and work. Stores its open state in local storage based
+ * on the id.
+ *
+ * @param param0
+ * @returns
+ */
 export function Pane({
   children,
   title,
@@ -170,6 +183,13 @@ export function Pane({
   )
 }
 
+/**
+ * A button that follows the theme. This is here so that I don't have to style
+ * every damn button manually.
+ *
+ * @param props
+ * @returns
+ */
 export function Button(
   props: React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -204,6 +224,11 @@ export function Button(
   )
 }
 
+/**
+ * Select element that follows the theme.
+ * @param props
+ * @returns
+ */
 export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement>,
@@ -240,6 +265,11 @@ export function Select(
   )
 }
 
+/**
+ * Input element that follows the theme.
+ * @param props
+ * @returns
+ */
 export function Input(
   props: React.DetailedHTMLProps<
     React.InputHTMLAttributes<HTMLInputElement>,

netvr-dashboard/src/components/error-boundary.tsx

@@ -23,6 +23,10 @@ const showErrorOverlay = (err: Error) => {
   document.body.appendChild(overlay)
 }
 
+/**
+ * Just an error boundary with the added twist that it can trigger a display of
+ * vites overlay and also that it can recover from errors in certain cases.
+ */
 type State = { hasError: boolean; key: number }
 export class ErrorBoundary extends Component<
   { children: React.ReactNode; fallback?: React.ReactNode },

netvr-dashboard/src/components/json-view.tsx

@@ -18,6 +18,11 @@ const theme = [...'0123456789ABCDEF'].reduce((object, l) => {
   return object
 }, {} as any)
 
+/**
+ * Component for displaying JSON data in a tree view.
+ * @param param0
+ * @returns
+ */
 export function JSONView({ data, shouldExpandNode, name }: Props) {
   return (
     <JSONTree
@@ -101,6 +106,11 @@ export function JSONView({ data, shouldExpandNode, name }: Props) {
   )
 }
 
+/**
+ * Pane for displaying JSON data in a tree view.
+ * @param param0
+ * @returns
+ */
 export function JSONPane({
   title,
   id,

netvr-dashboard/src/components/listen-to-socket.tsx

@@ -30,6 +30,10 @@ function useListenToSocket(
   }, [socket])
 }
 
+/**
+ * Utility component for listening to a websocket and calling a callback when a message is received.
+ *
+ */
 export const ListenToSocket = memo(function ListenToSocket({
   socket,
   onMessage,
@@ -147,6 +151,11 @@ function useSocketState(url: string, onDisconnected: () => void) {
 }
 
 const ctx = createContext<WebSocket | null>(null)
+/**
+ * Put this in the root so that you can use `useSocket` anywhere in the app.
+ * @param param0
+ * @returns
+ */
 export function SocketProvider({
   children,
   url,
@@ -161,6 +170,10 @@ export function SocketProvider({
   return null
 }
 
+/**
+ * Use this to get the websocket anywhere in the app.
+ * @returns
+ */
 export function useSocket() {
   const value = useContext(ctx)
   if (!value) throw new Error('Missing SocketProvider')

netvr-dashboard/src/components/theme.tsx

@@ -75,6 +75,11 @@ function useThemeData() {
   ])
 }
 
+/**
+ * Sets the basic styles according to the set theme.
+ * @param param0
+ * @returns
+ */
 export function ThemeRoot({ children }: PropsWithChildren<{}>) {
   const data = useThemeData()
   return (
@@ -105,11 +110,21 @@ export function ThemeRoot({ children }: PropsWithChildren<{}>) {
 
 const opaque = Symbol()
 
+/**
+ * Used for passing the theme to the `ReprovideTheme` component. Usefull for
+ * react-three-fiber.
+ * @returns
+ */
 export function useReprovideTheme() {
   const theme = useThemeInternal()
   return { [opaque]: theme }
 }
 
+/**
+ * Useful for react-three-fiber. Use in conjunction with `useReprovideTheme`.
+ * @param props
+ * @returns
+ */
 export function ReprovideTheme(props: {
   children: React.ReactNode
   value: ReturnType<typeof useReprovideTheme>
@@ -125,10 +140,17 @@ function useThemeInternal() {
   return theme
 }
 
+/**
+ * use this hook to get the theme anywhere in the app.
+ * @returns
+ */
 export function useTheme() {
   return useThemeInternal().resolved
 }
 
+/**
+ * UI for selecting the theme.
+ */
 export const ThemeSelector = memo(function ThemeSelector() {
   const theme = useThemeInternal()
   return (

netvr-dashboard/src/dashboard/calibration-pane.tsx

@@ -11,6 +11,12 @@ import { JSONView } from '../components/json-view'
 import { useLocalStorage } from '../utils'
 import { useDropzone } from 'react-dropzone'
 
+/**
+ * Pane for triggering calibration and choosing target and reference devices.
+ *
+ * @param param0
+ * @returns
+ */
 export function CalibrationPane({
   sendMessage,
   serverState,

netvr-dashboard/src/dashboard/client-pane.tsx

@@ -5,6 +5,13 @@ import { RemoteConfigurationSnapshot, StateSnapshot } from '../protocol/data'
 import * as sentMessages from '../protocol/sent-messages'
 import { ClientId } from '../protocol/recieved-messages'
 
+/**
+ * Shows information about a client which is connected to the server.
+ *
+ *
+ * @param param0
+ * @returns
+ */
 export function ClientPane({
   client,
   clientId,

netvr-dashboard/src/dashboard/dashboard.tsx

@@ -36,6 +36,12 @@ function useSendKeepAlive(socket: WebSocket) {
   }, [socket])
 }
 
+/**
+ * Main component representing the dashboard. Connects to the server via websocket
+ * on socketUrl.
+ * @param param0
+ * @returns
+ */
 export function Dashboard({ socketUrl }: { socketUrl: string }) {
   const [key, setKey] = useState(0)
   return (

netvr-dashboard/src/dashboard/fullscreen-button.tsx

@@ -23,6 +23,11 @@ function useFullscreen() {
   }
 }
 
+/**
+ * Button which switches you to fullscreen. Also detects if you are already in
+ * fullscreen so that it can change the icon accordingly.
+ * @returns
+ */
 export function FullscreenButton() {
   const fullscreen = useFullscreen()
   return (

netvr-dashboard/src/dashboard/merge-data.tsx

@@ -1,5 +1,9 @@
 import { ConfigurationSnapshotSet, StateSnapshot } from '../protocol/data'
 
+/**
+ * State communicated via UDP to the server (dashboard gets it from the server
+ * via websocket in either case)
+ */
 export type DatagramState = {
   [key: number]: {
     id: number
@@ -8,6 +12,14 @@ export type DatagramState = {
   }
 }
 
+/**
+ * Merges datagram data with configuration snapshot, so that the dashboard can
+ * show it all in one place.
+ *
+ * @param datagramData
+ * @param configurationSnapshot
+ * @returns
+ */
 export function mergeData(
   datagramData: DatagramState,
   configurationSnapshot: ConfigurationSnapshotSet | null,
@@ -44,4 +56,7 @@ export function mergeData(
       .map(({ id, ...rest }) => [id, rest]),
   )
 }
+/**
+ * Type representing the merged data. This describes the full state.
+ */
 export type MergedData = ReturnType<typeof mergeData>

netvr-dashboard/src/dashboard/message-log.tsx

@@ -60,6 +60,10 @@ const defaultState: State = {
   keyGen: 1,
 }
 
+/**
+ * controls how the message log works, and returns the log and a dispatch function
+ * to add messages to the log. Does not render anything.
+ */
 export function useLog({ showDatagrams }: { showDatagrams: boolean }) {
   const [log, dispatch] = useReducer(logReducer, defaultState)
   return [
@@ -71,6 +75,9 @@ export function useLog({ showDatagrams }: { showDatagrams: boolean }) {
   ] as const
 }
 
+/**
+ * Renders a single message in the log.
+ */
 export const Message = memo(function Message({
   message,
   timestamp,

netvr-dashboard/src/dashboard/quick-actions-pane.tsx

@@ -2,6 +2,12 @@
 import { Pane, Button, Input } from '../components/design'
 import * as sentMessages from '../protocol/sent-messages'
 
+/**
+ * A pane that contains quick actions that can be performed by pushing a single
+ * button without having to select anything.
+ * @param props
+ * @returns
+ */
 export function QuickActionsPane(props: {
   sendMessage: sentMessages.SendMessage
   closeSocket: () => void

netvr-dashboard/src/dashboard/use-sync-clients-by-headset.tsx

@@ -9,6 +9,11 @@ type Props = {
   sendMessage: sentMessages.SendMessage
 }
 
+/**
+ * Triggers the simple calibration algorithm which uses the headset position.
+ * @param param0
+ * @returns
+ */
 export function useSyncClientsByHeadset({ state, sendMessage }: Props) {
   const [message, setMessage] = useState('')
   return { onClick: syncClientsByHeadset, message }

netvr-dashboard/src/index.tsx

@@ -9,6 +9,9 @@ import { lazy } from 'react'
 const SampleViz = lazy(() => import('./other/sample-viz'))
 const DelayViz = lazy(() => import('./other/delay-viz'))
 
+/**
+ * Entry point for the dashboard mounting it to the DOM.
+ */
 export async function run() {
   const events = document.querySelector('#events')!
   if (!events) throw new Error('Cant find #events')

netvr-dashboard/src/other/delay-viz.tsx

@@ -14,7 +14,6 @@ import {
   CameraControls,
   Connections,
   PolyLine,
-  Segment,
   SpinningCube,
   dist,
   mul,
@@ -26,6 +25,10 @@ type FileData = {
   text: string
 }
 
+/**
+ * Vizualizes the delay data from .txt file. Data for this route is generated
+ * by Logger.cs.
+ */
 export default function DelayVizRoute() {
   const [fileData, setFileData] = useState<FileData | null>(null)
   const dropzone = useDropzone({

netvr-dashboard/src/other/sample-viz.tsx

@@ -45,6 +45,10 @@ type Sample = {
   now_nanos: number
 }
 
+/**
+ * Vizualizes the calibration data from .json file. Or the server-based data
+ * collection in the same format.
+ */
 export default function SampleVizRoute() {
   const [savedCalibration, setSavedCalibration] =
     useState<SavedCalibration | null>(null)