websocket-text-relay 1.0.0

package/src/language-server/LspWriter.test.js

@@ -0,0 +1,179 @@
+import { Writable } from 'node:stream'
+import { describe, it, expect, beforeAll } from "vitest"
+import { TESTONLY_resetRequestId, createHeader, writeNotification, writeRequest, writeResponse, writeToOutput } from "./LspWriter.js"
+
+describe("LspWriter", () => {
+  describe("createHeader", () => {
+    describe("Simple Case", () => {
+      const messageObj = {}
+      const expectedHeader = "Content-Length: 2\r\n\r\n"
+
+      it("Should create header with correct length", () => {
+        const actual = createHeader(JSON.stringify(messageObj))
+        expect(actual).toEqual(expectedHeader)
+      })
+    })
+
+    describe("With some content", () => {
+      const messageObj = {"a": "1"}
+      const expectedHeader = "Content-Length: 9\r\n\r\n"
+
+      it("Should create header with correct length", () => {
+        const actual = createHeader(JSON.stringify(messageObj))
+        expect(actual).toEqual(expectedHeader)
+      })
+    })
+
+    describe("With multi byte characters", () => {
+      const messageObj = {"a": "🌊"}
+      const expectedHeader = "Content-Length: 12\r\n\r\n"
+
+      it("Should create header with correct byte length, not string length", () => {
+        const actual = createHeader(JSON.stringify(messageObj))
+        expect(actual).toEqual(expectedHeader)
+      })
+    })
+  })
+
+  describe("writeToOutput", () => {
+    describe("simple object", () => {
+      const messageObj = {"a": "1"}
+      const expectedOutput = `Content-Length: 9\r\n\r\n{"a":"1"}`
+      let actualOutput = ""
+
+      beforeAll(() => {
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeToOutput(outputStream, messageObj)
+      })
+
+      it("should stringify the json and add a Content-Length header, then write the head and json to the output stream", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+  })
+
+  describe("writeResponse", () => {
+    describe("successful response", () => {
+      const result = {"a": "1"}
+      const error = null
+      const expectedOutput = `Content-Length: 45\r\n\r\n{"jsonrpc":"2.0","id":"0","result":{"a":"1"}}`
+      let actualOutput = ""
+
+      beforeAll(() => {
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeResponse(outputStream, "0", error, result)
+      })
+
+      it("should create a response object with a result property (and no error) and write it to the output stream", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+
+    describe("error response", () => {
+      const result = null
+      const error = {code: 1, message: "test error", data: {t: 5}}
+      const expectedOutput = `Content-Length: 83\r\n\r\n{"jsonrpc":"2.0","id":"0","error":{"code":1,"message":"test error","data":{"t":5}}}`
+      let actualOutput = ""
+
+      beforeAll(() => {
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeResponse(outputStream, "0", error, result)
+      })
+
+      it("should create a response object with an error property (and no result) and write it to the output stream", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+  })
+
+  describe("writeNotification", () => {
+    describe("simple parameters", () => {
+      const method = "test/test-method"
+      const parameters = {"a": "1"}
+      const expectedOutput = `Content-Length: 64\r\n\r\n{"jsonrpc":"2.0","method":"test/test-method","params":{"a":"1"}}`
+      let actualOutput = ""
+
+      beforeAll(() => {
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeNotification(outputStream, method, parameters)
+      })
+
+      it("should write a notification message without an ID property on the output stream", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+  })
+
+  describe("writeReqest", () => {
+    describe("single request", () => {
+      const method = "test/test-method"
+      const parameters = {"a": "1"}
+      const expectedOutput = `Content-Length: 73\r\n\r\n{"jsonrpc":"2.0","id":"0","method":"test/test-method","params":{"a":"1"}}`
+      let actualOutput = ""
+
+      beforeAll(() => {
+        TESTONLY_resetRequestId()
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeRequest(outputStream, method, parameters)
+      })
+
+      it("should write a request message with an ID property on the output stream", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+
+    describe("multiple requests", () => {
+      const method = "test/test-method"
+      const params1 = {"a": "1"}
+      const params2 = {"b": "2"}
+      const params3 = {"c": "3"}
+      const expectedOutput1 = `Content-Length: 73\r\n\r\n{"jsonrpc":"2.0","id":"0","method":"test/test-method","params":{"a":"1"}}`
+      const expectedOutput2 = `Content-Length: 73\r\n\r\n{"jsonrpc":"2.0","id":"1","method":"test/test-method","params":{"b":"2"}}`
+      const expectedOutput3 = `Content-Length: 73\r\n\r\n{"jsonrpc":"2.0","id":"2","method":"test/test-method","params":{"c":"3"}}`
+      const expectedOutput = expectedOutput1 + expectedOutput2 + expectedOutput3
+      let actualOutput = ""
+
+      beforeAll(() => {
+        TESTONLY_resetRequestId()
+        const outputStream = new Writable({
+          write (data, _enc, next) {
+            actualOutput += data.toString()
+            next()
+          }
+        })
+        writeRequest(outputStream, method, params1)
+        writeRequest(outputStream, method, params2)
+        writeRequest(outputStream, method, params3)
+      })
+
+      it("should write multiple request messages with increasing IDs", () => {
+        expect(actualOutput).toEqual(expectedOutput)
+      })
+    })
+  })
+})

package/src/language-server/constants.js

@@ -0,0 +1,23 @@
+export const headerKey = "Content-Length"
+
+export const parseErrorCode = -32700
+
+export const parseHeaderErrorMessage = "Could not read Content-Length from header"
+
+export const parseJsonErrorMessage = "Could not parse JSON message"
+
+export const methodNotFoundErrorCode = -32601
+
+export const methodNotFoundErrorMessage = "Method not found"
+
+export const invalidRequestErrorCode = -32600
+
+export const invalidRequestErrorMessage = "Invalid Message. Missing id and/or method"
+
+export const unexpectedNotificationErrorCode = -1
+
+export const unexpectedNotificationErrorMessage = "Unexpected error in notification handler"
+
+export const unexpectedRequestErrorCode = -2
+
+export const unexpectedRequestErrorMessage = "Unexpected error in request handler"

package/src/ui/css/fonts.css

@@ -0,0 +1,54 @@
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Thin.ttf") format("truetype");
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Light.ttf") format("truetype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Medium.ttf") format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Montserrat";
+  src: url("/css/fonts/Montserrat-Black.ttf") format("truetype");
+  font-weight: 900;
+}
+

package/src/ui/css/main.css

@@ -0,0 +1,198 @@
+.base_colors {
+  --color-navy-nightfall: #0d151b;
+  --color-tangerine-sunset: #fb4b37;
+  --color-golden-sunset: #fbcc3b;
+  --color-amber-dawn: #ffd986;
+  --color-azure-afternoon: #629bc2;
+  --color-ivory-daybreak: #f0ebeb;
+  --color-light-sand-dune: #d6d2c2;
+  --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);
+  --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 * .5) calc(c * .25) h);
+  --online-color: oklch(from var(--color-golden-sunset) calc(l * .80) calc(c * .25) h);
+  --active-color: var(--color-golden-sunset);
+  --wedge-online-color: oklch(from var(--color-azure-afternoon) calc(l * .5) calc(c * .5) h);
+  --wedge-active-color: var(--color-azure-afternoon);
+  --timeseries-line-color: var(--color-tangerine-sunset);
+  --timeseries-label-color: #7f8186;
+  --timeseries-value-color: oklch(from var(--timeseries-label-color) calc(l * 1.2) c h);
+
+}
+
+body {
+  background: var(--main-background-color);
+}
+
+#svg_root {
+  fill: none;
+  stroke: none;
+  stroke-width: 0.01;
+  font-family: Montserrat, sans-serif;
+  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 {
+  fill: var(--header-text-color);
+  font-weight: 300;
+}
+
+.right_header {
+  text-anchor: end;;
+}
+
+.header_number {
+  font-weight: 100;
+}
+
+#status_ring_group {
+  stroke: var(--offline-color);
+}
+
+#status_ring_group.online {
+  stroke: var(--online-color);
+}
+
+#status_ring_group.active {
+  stroke: var(--active-color);
+}
+
+.single_wedge_group {
+  display: none;
+}
+
+.single_wedge_group.online, .single_wedge_group.active {
+  display: inherit;
+}
+
+.online .wedge_node {
+  fill: var(--wedge-online-color);
+}
+
+.active .wedge_node {
+  fill: var(--wedge-active-color);
+}
+
+.wedge_identifier {
+  fill: var(--header-text-color);
+  font-size: 0.04pt;
+}
+
+.wedge_identifier.small_text {
+  font-size: 0.03pt;
+}
+
+.summary_text_value {
+  fill: var(--summary-value-text-color);
+  font-size: 0.03pt;
+  font-weight: 200;
+}
+
+.summary_watched_circle {
+  fill: var(--wedge-active-color);
+}
+
+.summary_active_circle {
+  fill: var(--active-color);
+}
+
+.timeseries_bg {
+  /* fill: #ffffff1f; */
+  fill: none;
+}
+
+.timeseries_path {
+  stroke: var(--timeseries-line-color);
+  clip-path: url(#inner_circle_clip);
+}
+
+.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); */
+  font-size: 0.03pt;
+  font-weight: 400;
+  text-anchor: end;
+}
+
+.timeseries_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 {
+  display: none;
+}
+
+.tooltip_wrapper_group:hover .tooltip_display_group {
+  display: initial;
+}
+
+.server_status_label {
+  fill: var(--timeseries-label-color);
+  font-weight: 300;
+  font-size: 0.06pt;
+  text-anchor: middle;
+}
+
+.server_status_value {
+  fill: var(--timeseries-value-color);
+  font-weight: 100;
+  font-size: 0.06pt;
+  text-anchor: middle;
+}
+
+.server_status_offline {
+  fill: var(--timeseries-line-color);
+  font-weight: 400;
+  font-size: 0.06pt;
+  text-anchor: middle;
+}
+
+.test_circle {
+  fill: #fff;
+}
+
+.test_line {
+  stroke: #fff;
+  stroke-width: 0.005;
+}

package/src/ui/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>WTR Status</title>
+
+    <link rel="stylesheet" href="css/fonts.css">
+    <style id="main_style"></style>
+    <script type="module" src="js/index.js" defer></script>
+
+    <style>
+      body {
+        margin: 0;
+        overscroll-behavior: none;
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        padding-top: 2px;
+      }
+    </style>
+  </head>
+
+  <body class="base_colors color_palette 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="editor_wedges_group" class="wedge_group"></g>
+      <g id="activity_timeseries_graph"></g>
+      <g id="server_status_group"></g>
+    </svg>
+  </body>
+</html>

package/src/ui/js/components/ActivityTimeseriesGraph.js

@@ -0,0 +1,149 @@
+const { exportDeps, drawSvgElement, drawCircle, drawLinearPath, coordsToPathData, drawText, drawToolTip } = window.__WTR__
+
+const drawValueWithTooltip  = ({x, y, label, direction, parentNode}) => {
+  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  drawToolTip({x: x, y: y - 0.0032, text: label, direction, parentNode: tooltipWrapperGroup})
+  return drawText({x: x, y: y, dominantBaseline: "middle", text: "0", className: "timeseries_value", parentNode: tooltipWrapperGroup})
+}
+
+const dataWindowSize = 16
+const dataWindowInterval = 1000
+const graphHeight = 0.25
+
+const innerCircleClipPathId = "inner_circle_clip"
+
+const createLinearScale = (domainMin, domainMax, rangeMin, rangeMax) => {
+  const domainSize = domainMax - domainMin
+  if (domainSize === 0) { return () => rangeMin }
+  const rangeSize = rangeMax - rangeMin
+  const ratio = rangeSize / domainSize
+
+  return (domainValue) => (domainValue - domainMin) * ratio + rangeMin
+}
+
+const createRandomDataWindow = () => {
+  const series = []
+  const endTime = new Date().setMilliseconds(0).valueOf()
+  const startTime = endTime - dataWindowInterval * dataWindowSize
+  let maxValue = 0
+
+  for (let time = startTime; time < endTime; time += dataWindowInterval) {
+    // const value = Math.floor(Math.random() * 101)
+    const value = 0
+    if (value > maxValue) { maxValue = value }
+    series.push({time, value})
+  }
+
+  return series
+}
+
+const getSeriesWindowInfo = (series) => {
+  const startTime = series.at(1).time
+  const endTime = series.at(-1).time
+  let maxValue = 0
+  series.forEach(({value}) => {
+    if (value > maxValue) { maxValue = value }
+  })
+
+  return {startTime, endTime, maxValue}
+}
+
+class ActivityTimeseriesGraph {
+  constructor ({innerRingRadius, parentNode}) {
+    this.innerRingRadius = innerRingRadius
+    this.parentNode = parentNode
+    this.parentNode.innerHTML = ""
+    this.dataWindow = window.activityDataWindow || createRandomDataWindow()
+    window.activityDataWindow = this.dataWindow
+    if (!window.currentActivityCount) { window.currentActivityCount = 0 }
+    this.draw()
+  }
+
+  draw () {
+    const minX = -this.innerRingRadius
+    const maxX = this.innerRingRadius
+    const width = maxX - minX
+    const height = graphHeight
+    const minY = -height / 2
+    const maxY = minY + height
+
+    const clipPath = drawSvgElement("clipPath", {id: innerCircleClipPathId}, undefined, this.parentNode)
+    drawCircle({cx: 0, cy: 0, r: this.innerRingRadius - 0.005, parentNode: clipPath})
+    drawSvgElement("rect", {"clip-path": `url(#${innerCircleClipPathId})`, x: minX, y: minY, height, width}, "timeseries_bg", this.parentNode)
+
+    const series = this.dataWindow
+    const {startTime, endTime, maxValue} = getSeriesWindowInfo(series)
+
+    const maxValueElement = drawValueWithTooltip({x: minX + width / 2, y: minY - 0.08, label: "Max updates in a 1 second window", direction: "above", parentNode: this.parentNode})
+    const currentValueElement = drawValueWithTooltip({x: minX + width / 2, y: maxY + 0.095, label: "Updates in last full second", parentNode: this.parentNode})
+
+    let valueScale = createLinearScale(0, maxValue, maxY, minY) // in svg, y increases as it goes down, so we need to flip max and min in the range
+    let timeScale = createLinearScale(startTime, endTime, minX, maxX)
+
+    const pathCoords = series.map(({time, value}) => {
+      return [timeScale(time), valueScale(value)]
+    })
+
+    const graphPath = drawLinearPath({coords: pathCoords, className: "timeseries_path", parentNode: this.parentNode})
+
+    if (window.activityTimeout) { clearTimeout(window.activityTimeout) }
+    const onTickUpdate = () => {
+      scheduleNextTick()
+
+      console.log("data tick", Date.now())
+      const series = this.dataWindow
+      const prevEndTime = series.at(-1).time
+      const newTime = prevEndTime + dataWindowInterval
+      series.shift()
+      series.push({time: newTime, value: window.currentActivityCount})
+      currentValueElement.innerHTML = window.currentActivityCount
+      window.currentActivityCount = 0
+
+      const pathCoords = series.map(({time, value}) => {
+        return [timeScale(time), valueScale(value)]
+      })
+
+      const pathData = coordsToPathData(pathCoords)
+      graphPath.style.transition = ""
+      graphPath.setAttribute("d", pathData)
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const {startTime, endTime, maxValue} = getSeriesWindowInfo(series)
+          maxValueElement.innerHTML = maxValue
+
+          valueScale = createLinearScale(0, maxValue, maxY, minY) // in svg, y increases as it goes down, so we need to flip max and min in the range
+          timeScale = createLinearScale(startTime, endTime, minX, maxX)
+
+          const pathCoords = series.map(({time, value}) => {
+            return [timeScale(time), valueScale(value)]
+          })
+
+          const pathData = coordsToPathData(pathCoords)
+          graphPath.style.transition = "all 1s linear"
+          graphPath.setAttribute("d", pathData)
+        })
+      })
+
+    }
+
+    const scheduleNextTick = () => {
+      const nowMillis = new Date().getMilliseconds()
+      const millisUntilNextSecond = 1000 - nowMillis
+      window.activityTimeout = setTimeout(onTickUpdate, millisUntilNextSecond)
+    }
+
+    scheduleNextTick()
+  }
+
+  triggerActivity () {
+    window.currentActivityCount++
+    console.log("time series graph activity")
+  }
+}
+
+exportDeps({ActivityTimeseriesGraph})
+
+/*
+ *
+ */

package/src/ui/js/components/HeaderSummary.js

@@ -0,0 +1,23 @@
+const { exportDeps, drawText } = window.__WTR__
+
+class HeaderSummary {
+  constructor ({parentNode}) {
+    this.parentNode = parentNode
+    this.draw()
+  }
+
+  draw () {
+    this.parentNode.innerHTML = ""
+    drawText({x: -.86, y: -.73, text: "editors", parentNode: this.parentNode})
+    // this.editorCountNode = drawText({x: -.96, y: -.62, text: "0", className: "header_number", parentNode: this.parentNode})
+    drawText({x: .86, y: -.73, text: "clients", className: "right_header", parentNode: this.parentNode})
+    // this.clientCountNode = drawText({x: .96, y: -.62, text: "0", className: ["right_header", "header_number"], parentNode: this.parentNode})
+  }
+
+  update (/* data */) {
+    // this.editorCountNode.innerHTML = data.editors.length
+    // this.clientCountNode.innerHTML = data.clients.length
+  }
+}
+
+exportDeps({HeaderSummary})