Fix/websocket url and livechat visibility

[ckrew]

Fix the websocket URL and the Live Chat disappearing act

Two bugs that surfaced together: a browser warning about accessing other apps and services on this device, and a Live Chat widget that appeared to be losing every message.

1. The websocket URL had a host baked into it

REDIS_WS_URL was an absolute ws://localhost:8000/... URL in both env files, and WebSocketContext passed it straight to new WebSocket(). A deployed bundle therefore told every visitor's browser to open a socket to their own machine:

• Chrome flags it as local network access (the notice that started this).
• On an HTTPS site, ws:// is mixed content and gets blocked outright.
• Even when allowed, it connects to the visitor rather than the server, so plugin progress updates and Live Chat silently do nothing in any deployment.

getWebsocketUrl() in services/utilities.js now treats the env value as a path under the app root and resolves the origin and ws:/wss: scheme from window.location at runtime — the same approach getTethysPortalHost() and getTethysAppRoot() already use for every other URL in the frontend. An absolute ws:///wss:// value is still honored as an escape hatch for a separate notification host, and an empty value still disables websockets.

Development now uses the same relative path as production, because the dev server proxies websocket upgrades (ws: true). The proxy context gained "!/ws" so webpack-dev-server's own HMR socket stays local instead of being handed to Django, which has no consumer at that path.

Deployment note: reactapp/config/production.env is gitignored and hand-created per deployment. Each deployment's copy needs REDIS_WS_URL = "visualizations/notifications/ws/" to pick this up.

2. Live Chat scrolled itself off the page

Opening a dashboard with a Live Chat widget scrolled the page down to the message input, leaving the history above the fold — which looked exactly like messages being dropped. Three independent causes:

Flex sizing. ChatLogArea sets flex: 1 1 0% with overflow-y: auto, but a flex item's automatic minimum size is its content size, so it could never shrink below the full height of the message list. The log grew instead of scrolling and pushed the input row out of the grid item and down the page. min-height: 0 lets it shrink so overflow-y actually scrolls inside the tile; box-sizing: border-box keeps PaddedContainer's 16px padding inside the tile height rather than adding to it.

Focus on mount. The autofocus effect fired on mount whenever a username was already cached, and the username input carried autoFocus for the case where one wasn't. Focusing an element scrolls its ancestors to reveal it, so whichever branch rendered, the page jumped to the input on load. Focus now skips the initial mount, passes preventScroll, and moves to whichever input just became active.

Browser scroll restoration. The default history.scrollRestoration re-applies the pre-reload offset — and since dashboard widgets fetch after mount, the page only reaches full height a moment later, so the restore lands after load and reads as the page scrolling itself. index.js sets it to manual.

3. Stale chat history on re-fetch

useState(chatHistory) reads its argument only on mount, so any re-fetch (refresh interval, manual retry, arg change) left the log frozen on the history it mounted with. Added a sync effect that carries over messages which arrived over the websocket after the server took its snapshot, rather than dropping them in the race. Also defaults to [] so an absent chatHistory can't crash the render — propTypes doesn't mark it required.

Verification

The backend was ruled out empirically before any of this was written: the history endpoint returns the full message list, two raw WebSocket clients both receive a broadcast sent by either one, and messages persist correctly. Nothing in controllers.py, visualizations.py, or the channel layer needed changing.

The dev-server proxy change was verified on a throwaway server: HMR socket connects locally (101), the app socket connects through the proxy (101), and a chat frame sent through it round-trips back from Django.

Full Jest suite: 2801 tests across 145 suites, all passing. Nine new regression tests — six for getWebsocketUrl (unset, empty, absolute passthrough, http→ws, https→wss, prefix URLs, trailing-slash host), three for focus behavior (no focus on mount, preventScroll on both later transitions), two for history sync, one for scrollRestoration. eslint and prettier clean.