websocket-text-relay 1.1.5 → 1.1.6

package/docs/code-structure.md

@@ -87,21 +87,27 @@ The root of the static site is the `src/ui` directory.
 The UI is entirely made up of SVG elements, so the only thing the index.html file has to do is set up the root
 SVG element with some groups to act as containers for the different components to use.
 
-### js/index.js
+### js/setup.js
 
  - Sets up the websocket-text-relay client with handlers for css and javascript files.
  - initializes the simple dependency management system that allows the UI to be split into several javascript files.
- - Hooks up events to handle resizing the SVG element on window resize.
  - emit data and activity events that the UI components can hook into
 
-Whenever a javascript file is edited, its exports are updated and the main.js file is rerun.
-
-### js/util/DependencyManager.js
+### js/setup/dependencyManager.js
 
 This is a very quick and simple dependency management system. The dependency container is just an object in the global scope.
 An exportDeps function is created to make it easy to specify which objects in scope are to be exported.
 
-An onEvent function is also created and exported here, it prevents event leaks by cleaning up any registered event handlers whenever the javascript is reevaluated.
+### js/setup/eventSubscriber.js
+
+Provides the onEvent function that each file can use when subscribing to events. The events are automatically 
+unsubscribed when that file gets reevaluated. See the `js/components/sessionWedges.js` file for an example of usage.
+
+### js/setup/evalOnChange.js
+
+This provides a function where you can define what files should be run after the current file is updated.  
+Rather than calculate a dependency graph and try to automatically rerun files, simply define the behavior you want
+while you are editing the file. See the `js/util/constants.js` file for an example of usage.
 
 ### js/util/drawing.js
 
@@ -115,10 +121,8 @@ The center of the UI is at (0, 0) with a minimum height and width of 2. Having a
 
 ### js/components/
 
-The components directory contains the javascript classes that render the different elements on the screen.
-
-Each class handles the state for its component and has a draw function that renders it to the screen.
+The components directory contains the javascript files that render the different elements on the screen.
 
-Any components affected by data updates will also have an update function. When called the component will update the elements it manages with the new data.
+### js/data/
 
-Some components also respond to text update activity, these components will have a triggerActivity function as well.
+Read data from the websocket server and construct data stores and events required by the components.

package/eslint.config.js

@@ -2,12 +2,16 @@ import js from "@eslint/js"
 import globals from "globals"
 import { defineConfig } from "eslint/config"
 
+const wtrGlobals = {
+  __WTR__: "readonly",
+}
+
 export default defineConfig([
   {
     files: ["**/*.{js,mjs,cjs}"],
     plugins: { js },
     extends: ["js/recommended"],
-    languageOptions: { globals: { ...globals.node, ...globals.browser } },
+    languageOptions: { globals: { ...globals.node, ...globals.browser, ...wtrGlobals } },
   },
   {
     rules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "websocket-text-relay",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "An LSP server for sending live file updates from your text editor to the front end via websockets.",
   "bin": {
     "websocket-text-relay": "./start.js"
@@ -36,15 +36,15 @@
   },
   "homepage": "https://github.com/niels4/websocket-text-relay#readme",
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "eslint": "^9.33.0",
-    "globals": "^16.3.0",
-    "prettier": "3.6.2",
-    "vitest": "^3.2.4"
+    "@eslint/js": "9.39.2",
+    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/ui": "4.0.16",
+    "eslint": "9.39.2",
+    "globals": "16.5.0",
+    "prettier": "3.7.4",
+    "vitest": "4.0.16"
   },
   "dependencies": {
-    "ws": "^8.18.3"
+    "ws": "8.18.3"
   }
 }

package/src/ui/css/main.css

@@ -9,16 +9,12 @@
   --color-evening-shadow: #514a45;
 }
 
-.color_palette {
-  --bg2: var(--color-navy-nightfall);
-  --accent-active: var(var(--color-golden-sunset));
-}
-
 .color_theme {
-  --main-background-color: var(--bg2);
+  --accent-active: var(var(--color-golden-sunset));
+  --main-background-color: var(--color-navy-nightfall);
   --header-text-color: var(--color-ivory-daybreak);
   --summary-value-text-color: hsl(from var(--header-text-color) h s l / 0.9);
-  --offline-color: oklch(from var(--color-golden-sunset) calc(l * 0.5) calc(c * 0.25) h);
+  --offline-color: oklch(from var(--color-tangerine-sunset) calc(l * 0.4) calc(c * 0.1) h);
   --online-color: oklch(from var(--color-golden-sunset) calc(l * 0.8) calc(c * 0.25) h);
   --active-color: var(--color-golden-sunset);
   --wedge-online-color: oklch(from var(--color-azure-afternoon) calc(l * 0.5) calc(c * 0.5) h);
@@ -40,55 +36,33 @@ body {
   font-size: 0.1pt;
 }
 
-#grid_group {
-  stroke: #fff;
-  stroke-width: 0.001;
-}
-
-.grid_axis {
-  stroke-width: 0.003;
-  stroke: hsl(76, 90%, 80%);
-}
-
-#header_summary_group {
+.header {
   fill: var(--header-text-color);
   font-weight: 300;
+  font-size: 0.1pt;
 }
 
 .right_header {
   text-anchor: end;
 }
 
-.header_number {
-  font-weight: 100;
-}
-
-#status_ring_group {
+.status_ring_wrapper.offline {
   stroke: var(--offline-color);
 }
 
-#status_ring_group.online {
+.status_ring_wrapper.online {
   stroke: var(--online-color);
 }
 
-#status_ring_group.active {
+.status_ring_wrapper.active {
   stroke: var(--active-color);
 }
 
-.single_wedge_group {
-  display: none;
-}
-
-.single_wedge_group.online,
-.single_wedge_group.active {
-  display: inherit;
-}
-
-.online .wedge_node {
+.wedge_node {
   fill: var(--wedge-online-color);
 }
 
-.active .wedge_node {
+.wedge_node.active {
   fill: var(--wedge-active-color);
 }
 
@@ -115,57 +89,27 @@ body {
   fill: var(--active-color);
 }
 
-.timeseries_bg {
-  /* fill: #ffffff1f; */
-  fill: none;
-}
-
-.timeseries_path {
+.time_series_path {
   stroke: var(--timeseries-line-color);
-  clip-path: url(#inner_circle_clip);
+  stroke-width: 3;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: crispEdges;
 }
 
-.timeseries_big_label {
-  /* fill: var(--timeseries-label-color); */
-  font-size: 0.04pt;
-  font-weight: 400;
-  text-anchor: end;
-}
-
-.timeseries_small_label {
-  /* fill: var(--timeseries-label-color); */
+.small_label {
   font-size: 0.03pt;
   font-weight: 400;
-  text-anchor: end;
+  fill: var(--timeseries-label-color);
+  text-anchor: middle;
+  dominant-baseline: central;
 }
 
-.timeseries_value {
+.time_series_value {
   fill: var(--timeseries-value-color);
   font-size: 0.05pt;
   font-weight: 300;
   text-anchor: middle;
-}
-
-.tooltip_text {
-  fill: #fff;
-  font-size: 0.025pt;
-  font-weight: 200;
-  text-anchor: middle;
-}
-
-.tooltip_outline {
-  stroke: #fff;
-  stroke-width: 0.002;
-  fill: #000;
-}
-
-.tooltip_display_group {
-  opacity: 0;
-  transition: opacity 0.35s ease;
-}
-
-.tooltip_wrapper_group:hover .tooltip_display_group {
-  opacity: 1;
+  dominant-baseline: central;
 }
 
 .server_status_label {
@@ -189,11 +133,11 @@ body {
   text-anchor: middle;
 }
 
-.test_circle {
+.wedge_label_dot {
   fill: #fff;
 }
 
-.test_line {
+.wedge_label_line {
   stroke: #fff;
   stroke-width: 0.005;
 }

package/src/ui/index.html

@@ -6,31 +6,36 @@
 
     <title>WTR Status</title>
 
+    <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="css/fonts.css" />
     <style id="main_style"></style>
-    <script type="module" src="js/index.js" defer></script>
+    <script type="module" src="js/setup.js" defer></script>
 
     <style>
-      body {
-        margin: 0;
+      html {
+        height: 100dvh;
         overscroll-behavior: none;
-        display: grid;
-        align-items: center;
-        justify-content: center;
-        padding-top: 2px;
+      }
+
+      #svg_root {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100dvh;
+        width: 100dvw;
       }
     </style>
   </head>
 
-  <body class="base_colors color_palette color_theme">
+  <body class="base_colors color_theme">
     <svg id="svg_root" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
-      <g id="grid_group"></g>
-      <g id="header_summary_group"></g>
-      <g id="status_ring_group"></g>
-      <g id="client_wedges_group" class="wedge_group"></g>
+      <g id="headers_group"></g>
       <g id="editor_wedges_group" class="wedge_group"></g>
-      <g id="activity_timeseries_graph"></g>
-      <g id="server_status_group"></g>
+      <g id="client_wedges_group" class="wedge_group"></g>
+      <g id="activity_time_series_group"></g>
+      <g id="activity_labels_group"></g>
+      <g id="status_ring_group"></g>
+      <g id="footer_status_group"></g>
     </svg>
   </body>
 </html>

package/src/ui/js/components/activityLabels.js

@@ -0,0 +1,41 @@
+const { drawText, wtrActivityDataWindowEmitter, onEvent, constants } = __WTR__
+const { innerRingRadius } = constants
+
+const parentGroup = document.getElementById("activity_labels_group")
+parentGroup.innerHTML = ""
+
+const valuePadding = 0.068
+const labelPadding = 0.14
+
+drawText({
+  text: "Max",
+  y: -innerRingRadius + labelPadding,
+  className: "small_label",
+  parent: parentGroup,
+})
+
+const maxValueText = drawText({
+  text: "0",
+  y: -innerRingRadius + valuePadding,
+  className: "time_series_value",
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Updates / second",
+  y: innerRingRadius - labelPadding,
+  className: "small_label",
+  parent: parentGroup,
+})
+
+const currentValueText = drawText({
+  text: "0",
+  y: innerRingRadius - valuePadding,
+  className: "time_series_value",
+  parent: parentGroup,
+})
+
+onEvent(wtrActivityDataWindowEmitter, "data", ({ maxValue, currentValue }) => {
+  maxValueText.textContent = maxValue
+  currentValueText.textContent = currentValue
+})

package/src/ui/js/components/activityTimeSeries.js

@@ -0,0 +1,58 @@
+const { drawSvgElement, constants, wtrActivityDataWindowEmitter, onEvent } = __WTR__
+const { innerRingRadius, dataWindowSize } = constants
+
+const parentGroup = document.getElementById("activity_time_series_group")
+parentGroup.innerHTML = ""
+
+const animationProps = { duration: 1000, easing: "linear", iterations: 1, fill: "forwards" }
+
+const minX = -innerRingRadius
+const width = innerRingRadius * 2
+const height = 0.25
+const maxY = height / 2
+const intervalWidth = width / (dataWindowSize - 2)
+
+const clipId = "time-series-clip"
+
+const clipPath = drawSvgElement({
+  tag: "clipPath",
+  attributes: { id: clipId },
+  parent: parentGroup,
+})
+
+drawSvgElement({
+  tag: "circle",
+  attributes: { r: innerRingRadius },
+  parent: clipPath,
+})
+
+const clippedGroup = drawSvgElement({
+  tag: "g",
+  attributes: { "clip-path": `url(#${clipId})` },
+  parent: parentGroup,
+})
+
+const valuePath = drawSvgElement({
+  tag: "path",
+  attributes: { d: "" },
+  className: "time_series_path",
+  parent: clippedGroup,
+})
+
+const getValueScale = (maxValue) => (maxValue === 0 ? 0.00001 : height / maxValue)
+
+onEvent(wtrActivityDataWindowEmitter, "data", (data) => {
+  valuePath.setAttribute("d", data.path)
+  const prevValueScale = getValueScale(data.prevMaxValue)
+  const valueScale = getValueScale(data.maxValue)
+
+  const animationKeyFrames = [
+    {
+      transform: `translateX(${minX}px) translateY(${maxY}px) scaleX(${intervalWidth}) scaleY(${-prevValueScale})`,
+    },
+    {
+      transform: `translateX(${minX - intervalWidth}px) translateY(${maxY}px) scaleX(${intervalWidth}) scaleY(${-valueScale})`,
+    },
+  ]
+  valuePath.animate(animationKeyFrames, animationProps)
+})

package/src/ui/js/components/drawSessionLabel.js

@@ -0,0 +1,117 @@
+const {
+  drawSvgElement,
+  drawPolarCircle,
+  drawPolarLine,
+  drawText,
+  polarToCartesian,
+  exportDeps,
+  evalOnChange,
+} = __WTR__
+
+evalOnChange(["js/components/sessionWedges.js"])
+
+const labelLineDistance = 0.07
+const underlinePadding = 0.02
+const summaryCircleRadius = 0.014
+const summaryValueSpacing = 0.1
+
+/**
+ * @param {{session: EditorStatus | ClientStatus, direction: 1 | -1}}
+ */
+const drawSessionLabel = ({ wedgeCenterAngle, wedgeCenterRadius, session, direction, parent }) => {
+  drawPolarCircle({
+    angle: wedgeCenterAngle,
+    radius: wedgeCenterRadius,
+    r: 0.01,
+    className: "wedge_label_dot",
+    parent,
+  })
+
+  const textStartRadius = wedgeCenterRadius + labelLineDistance
+  drawPolarLine({
+    startAngle: wedgeCenterAngle,
+    startRadius: wedgeCenterRadius,
+    endAngle: wedgeCenterAngle,
+    endRadius: textStartRadius,
+    className: "wedge_label_line",
+    parent,
+  })
+
+  const serverIndicator = session.isServer ? "* " : ""
+  const [textStartX, textStartY] = polarToCartesian(wedgeCenterAngle, textStartRadius)
+  const nameTextNode = drawText({
+    x: textStartX,
+    y: textStartY - underlinePadding,
+    text: serverIndicator + session.name,
+    textAnchor: direction === 1 ? "end" : "start",
+    className: "wedge_identifier",
+    parent,
+  })
+  const nameTextBBox = nameTextNode.getBBox()
+
+  const underlineX2 = direction === 1 ? nameTextBBox.x : nameTextBBox.x + nameTextBBox.width
+  drawSvgElement({
+    tag: "line",
+    attributes: { x1: textStartX, y1: textStartY, x2: underlineX2, y2: textStartY },
+    className: "wedge_label_line",
+    parent,
+  })
+
+  const summaryGroup = drawSvgElement({ tag: "g", parent })
+
+  let currentSummaryX = textStartX
+
+  const { leftText, rightText } =
+    direction === 1
+      ? { leftText: session.openCount, rightText: session.activeOpenCount }
+      : { leftText: session.watchCount, rightText: session.activeWatchCount }
+
+  drawText({
+    x: currentSummaryX + summaryCircleRadius * 2,
+    y: textStartY,
+    text: leftText,
+    dominantBaseline: "middle",
+    className: "summary_text_value",
+    parent: summaryGroup,
+  })
+
+  drawSvgElement({
+    tag: "circle",
+    attributes: {
+      cx: currentSummaryX,
+      cy: textStartY - summaryCircleRadius / 2,
+      r: summaryCircleRadius,
+    },
+    className: "summary_watched_circle",
+    parent: summaryGroup,
+  })
+
+  currentSummaryX += summaryValueSpacing
+
+  drawText({
+    x: currentSummaryX + summaryCircleRadius * 2,
+    y: textStartY,
+    text: rightText,
+    dominantBaseline: "middle",
+    className: "summary_text_value",
+    parent: summaryGroup,
+  })
+
+  drawSvgElement({
+    tag: "circle",
+    attributes: {
+      cx: currentSummaryX,
+      cy: textStartY - summaryCircleRadius / 2,
+      r: summaryCircleRadius,
+    },
+    className: "summary_active_circle",
+    parent: summaryGroup,
+  })
+
+  const summaryGroupBBox = summaryGroup.getBBox()
+  const translateX = direction === 1 ? -summaryGroupBBox.width - 0.02 : 0.05
+  const translateY = summaryGroupBBox.height / 2 + 0.014
+  summaryGroup.setAttribute("transform", `translate(${translateX}, ${translateY})`)
+}
+
+exportDeps({ drawSessionLabel })

package/src/ui/js/components/footerStatus.js

@@ -0,0 +1,37 @@
+const { drawText, wtrStatusEmitter, onEvent } = __WTR__
+
+const valueTextClass = "server_status_value"
+const offlineTextClass = "server_status_offline"
+
+const parentGroup = document.getElementById("footer_status_group")
+parentGroup.innerHTML = ""
+
+drawText({
+  x: 0,
+  y: 0.85,
+  text: "WS Server PID",
+  className: "server_status_label",
+  parent: parentGroup,
+})
+
+const pidElement = drawText({ x: 0, y: 0.748, text: "-1", parent: parentGroup })
+
+const offlineElement = drawText({
+  x: 0,
+  y: 0.748,
+  text: "OFFLINE",
+  className: offlineTextClass,
+  parent: parentGroup,
+})
+
+onEvent(wtrStatusEmitter, "data", (/** @type {WtrStatus} */ data) => {
+  const server = data.editors.find((editor) => editor.isServer)
+  if (!data.isOnline || server == null) {
+    pidElement.classList.remove(valueTextClass)
+    offlineElement.classList.add(offlineTextClass)
+  } else {
+    pidElement.textContent = server.lsPid
+    pidElement.classList.add(valueTextClass)
+    offlineElement.classList.remove(offlineTextClass)
+  }
+})

package/src/ui/js/components/headers.js

@@ -0,0 +1,100 @@
+const { drawText, drawSvgElement } = __WTR__
+
+const parentGroup = document.getElementById("headers_group")
+parentGroup.innerHTML = ""
+
+const legendCircleRadius = 0.014
+
+const baseLineY = -0.73
+const xOffset = 0.86
+const legendY = baseLineY + 0.05
+
+// left header
+drawText({ x: -xOffset, y: baseLineY, text: "editors", className: "header", parent: parentGroup })
+
+// left legend
+let circleStart = -xOffset + 0.093
+let labelStart = circleStart + legendCircleRadius * 2
+
+drawSvgElement({
+  tag: "circle",
+  className: "summary_watched_circle",
+  attributes: { r: legendCircleRadius, cx: circleStart, cy: legendY },
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Open",
+  textAnchor: "start",
+  className: "small_label",
+  x: labelStart,
+  y: legendY,
+  parent: parentGroup,
+})
+
+circleStart += 0.1822
+labelStart = circleStart + legendCircleRadius * 2
+
+drawSvgElement({
+  tag: "circle",
+  className: "summary_active_circle",
+  attributes: { r: legendCircleRadius, cx: circleStart, cy: legendY },
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Active",
+  textAnchor: "start",
+  className: "small_label",
+  x: labelStart,
+  y: legendY,
+  parent: parentGroup,
+})
+
+// right header
+drawText({
+  x: xOffset,
+  y: baseLineY,
+  text: "clients",
+  className: ["header", "right_header"],
+  parent: parentGroup,
+})
+
+// right legend
+circleStart = xOffset - 0.3914
+labelStart = circleStart + legendCircleRadius * 2
+
+drawSvgElement({
+  tag: "circle",
+  className: "summary_watched_circle",
+  attributes: { r: legendCircleRadius, cx: circleStart, cy: legendY },
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Watch",
+  textAnchor: "start",
+  className: "small_label",
+  x: labelStart,
+  y: legendY,
+  parent: parentGroup,
+})
+
+circleStart += 0.1952
+labelStart = circleStart + legendCircleRadius * 2
+
+drawSvgElement({
+  tag: "circle",
+  className: "summary_active_circle",
+  attributes: { r: legendCircleRadius, cx: circleStart, cy: legendY },
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Active",
+  textAnchor: "start",
+  className: "small_label",
+  x: labelStart,
+  y: legendY,
+  parent: parentGroup,
+})