Merge branch 'dev' into server-over-https

Author: rajnisht7

.agents/context/backend.md

@@ -8,7 +8,7 @@
 - `py/visdom/server/app.py` — Application class, routes, state management.
 - `py/visdom/server/handlers/web_handlers.py` — HTTP handlers. Copy app attributes in `initialize()`, use `@check_auth`.
 - `py/visdom/server/handlers/socket_handlers.py` — WebSocket handlers (read-only + write-enabled).
-- `py/visdom/utils/server_utils.py` — `check_auth`, `broadcast`, `LazyEnvData`, `serialize_env`.
+- `py/visdom/utils/server_utils.py` — `check_auth`, `broadcast`, `LazyEnvData`. Environment persistence lives in `py/visdom/data_model/json_store.py` (`JSONStore`).
 - `py/visdom/server/build.py` — `download_scripts()`: fetches CDN dependencies.
 
 ## Coding Rules

.gitignore

@@ -2,6 +2,9 @@ cypress/screenshots
 cypress/screenshots_init
 cypress/downloads
 cypress/fixtures
+playwright/screenshots
+playwright/screenshots_init
+playwright/screenshots_diff
 node_modules
 build
 th/CMakeLists.txt

REFACTORING.md

@@ -79,7 +79,7 @@ This is the primary TODO from PR #675: *"move the logic that actually parses env
 | File | Purpose |
 |------|---------|
 | `environment.py` | `Environment` class wrapping `{"jsons": {}, "reload": {}}` dict. Methods: `get_window()`, `set_window()`, `remove_window()`, `list_windows()`, `get_reload()` |
-| `state_manager.py` | `StateManager` class wrapping the top-level `state` dict. Methods: `get_env()`, `create_env()`, `delete_env()`, `list_envs()`, `fork_env()`, `serialize()`, `serialize_all()`. Absorbs functions from `server_utils.py` (`serialize_env`, `serialize_all`, `load_env`, `gather_envs`, `compare_envs`) |
+| `state_manager.py` | `StateManager` class wrapping the top-level `state` dict. Methods: `get_env()`, `create_env()`, `delete_env()`, `list_envs()`, `fork_env()`, `serialize()`, `serialize_all()`. Absorbs functions from `server_utils.py` (`load_env`, `gather_envs`, `compare_envs`). Environment file serialization now lives in `data_model/json_store.py` (`JSONStore`) via the `DataStore` abstraction |
 | `window.py` | Typed window structures (dataclasses/TypedDicts) replacing raw dicts built in `server_utils.py:window()` (lines 202-258) |
 
 ### 3b. Refactor handlers to use data model
@@ -109,12 +109,12 @@ py/visdom/server/
 **Effort: Medium-Large | Risk: Medium | PRs: 2 | Dependencies: Phase 3**
 
 ### 4a. Wrap blocking file I/O with `run_in_executor`
-Currently only **ONE** place uses async I/O (`socket_handlers.py:123` for `serialize_all`). All others block the Tornado event loop:
+Currently only **ONE** place uses async I/O (`socket_handlers.py:123` for `storage.save_all`). All others block the Tornado event loop:
 
 | File | Lines | Blocking Operation |
 |------|-------|-------------------|
 | `server_utils.py` | 72 | Cookie file write |
-| `server_utils.py` | 121-155 | `serialize_env()` — JSON file write |
+| `data_model/json_store.py` | `save_envs()` | `JSONStore` — JSON file write |
 | `server_utils.py` | 273-303 | `compare_envs()` — env file read |
 | `app.py` | 141 | Layout save (file write) |
 | `app.py` | 155 | Layout load (file read) |

js/api/ApiProvider.js

@@ -336,6 +336,18 @@ const ApiProvider = ({ children }) => {
     });
   };
 
+  const sendCommentUpdate = (envID, win, comment) => {
+    if (win === null || sessionInfo.readonly) {
+      return;
+    }
+    sendSocketMessage({
+      cmd: 'update_comment',
+      eid: envID,
+      win: win,
+      data: comment,
+    });
+  };
+
   // Save layout lists to the server
   const sendLayoutsSave = (layoutLists) => {
     // pushes layouts to the server
@@ -387,6 +399,7 @@ const ApiProvider = ({ children }) => {
       value={{
         apiHandlers,
         connected,
+        sendCommentUpdate,
         sendEmbeddingPop,
         sendEnvDelete,
         sendEnvQuery,

js/panes/Pane.js

@@ -7,21 +7,69 @@
  *
  */
 
-import React, { forwardRef, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
+import ApiContext from '../api/ApiContext';
 import PropertyItem from './PropertyItem';
 var classNames = require('classnames');
 
+const COMMENT_SAVE_DEBOUNCE_MS = 500;
+
 var Pane = forwardRef((props, ref) => {
   const { id, title, content, children, widgets, enablePropertyList } = props;
   var { barwidgets } = props;
   barwidgets = barwidgets || [];
+  const commentEnabled = !props.commentsDisabled;
 
   // state varibles
   // --------------
   const [propertyListShown, setPropertyListShown] = useState(false);
   const barRef = useRef();
 
+  const { sendCommentUpdate, sessionInfo } = useContext(ApiContext);
+  const [commentOpen, setCommentOpen] = useState(false);
+  const [commentText, setCommentText] = useState(props.comment || '');
+  const commentSaveTimeout = useRef(null);
+  const isEditingComment = useRef(false);
+  const latestCommentTextRef = useRef(commentText);
+
+  useEffect(() => {
+    if (!isEditingComment.current) {
+      setCommentText(props.comment || '');
+      latestCommentTextRef.current = props.comment || '';
+    }
+  }, [props.comment]);
+
+  useEffect(() => {
+    return () => {
+      if (commentSaveTimeout.current) {
+        flushCommentSave(latestCommentTextRef.current);
+      }
+    };
+  }, []);
+
+  const flushCommentSave = (value) => {
+    clearTimeout(commentSaveTimeout.current);
+    commentSaveTimeout.current = null;
+    sendCommentUpdate(props.envID, id, value);
+  };
+
+  const handleCommentChange = (ev) => {
+    const value = ev.target.value;
+    setCommentText(value);
+    latestCommentTextRef.current = value;
+    clearTimeout(commentSaveTimeout.current);
+    commentSaveTimeout.current = setTimeout(() => {
+      flushCommentSave(value);
+    }, COMMENT_SAVE_DEBOUNCE_MS);
+  };
+
   // public events
   // -------------
   const handleOnFocus = props.handleOnFocus || (() => props.onFocus(id));
@@ -37,6 +85,11 @@ var Pane = forwardRef((props, ref) => {
   let windowClassNames = classNames({ window: true, focus: props.isFocused });
   let barClassNames = classNames({ bar: true, focus: props.isFocused });
 
+  let contentClassNames = classNames({
+   content: true,
+   'content-with-comment': commentEnabled && commentOpen,
+  });
+
   // add property list button to barwidgets
   if (
     enablePropertyList &&
@@ -129,10 +182,38 @@ var Pane = forwardRef((props, ref) => {
           {' '}
           ⟲{' '}
         </button>
+        <button
+          title="comment"
+          onClick={() => setCommentOpen(!commentOpen)}
+          className={commentOpen ? 'pull-right active' : 'pull-right'}
+          hidden={!commentEnabled}
+        >
+          <span className="glyphicon glyphicon-comment" />
+        </button>
         {barwidgets}
         <div className="pull-right">{title}</div>
       </div>
-      <div className="content">{children}</div>
+      <div className={contentClassNames}>
+        {children}
+        {commentEnabled && commentOpen && (
+          <div className="comment-panel">
+            <textarea
+              className="comment-textarea"
+              placeholder="Add a note for this pane..."
+              value={commentText}
+              onFocus={() => {
+                isEditingComment.current = true;
+              }}
+              onBlur={() => {
+                isEditingComment.current = false;
+                flushCommentSave(commentText);
+              }}
+              onChange={handleCommentChange}
+              readOnly={!!sessionInfo?.readonly}
+            />
+          </div>
+        )}
+      </div>
       <div className="widgets">{widgets}</div>
       {propertyListOverlay}
     </div>
@@ -147,6 +228,7 @@ Pane = React.memo(Pane, (props, nextProps) => {
   else if (props.h !== nextProps.h || props.w !== nextProps.w) return false;
   else if (props.children !== nextProps.children) return false;
   else if (props.isFocused !== nextProps.isFocused) return false;
+  else if (props.comment !== nextProps.comment) return false;
   return true;
 });
 

js/panes/PlotPane.js

@@ -183,7 +183,7 @@ var PlotPane = (props) => {
           smooth_d.showlegend = false;
 
           // turn off smoothing for smoothvalue of 3 or too small arrays
-          if (windowSize < 5 || smooth_d.x.length <= 5) {
+          if (windowSize < 5 || !smooth_d.x || smooth_d.x.length <= 5) {
             d.opacity = 1.0;
 
             return smooth_d;

package.json

@@ -38,6 +38,7 @@
     "test:visual": "cypress run --spec './cypress/integration/screenshots.js'",
     "test": "cypress run --config excludeSpecPattern=**/*.init.js",
     "test:pw": "playwright test --config=playwright.config.js",
+    "test:pw:init": "playwright test --config=playwright.init.config.js",
     "lint": "eslint js/.",
     "lint:fix": "eslint --fix --ext .js,.jsx js/"
   },

playwright.config.js

@@ -23,6 +23,7 @@ module.exports = defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: 1,
   outputDir: './playwright/test-results',
+  testIgnore: ['**/*.init.spec.js'],
   reporter: [['html', { outputFolder: 'playwright/playwright-report' }]],
   use: {
     baseURL: 'http://localhost:8098',

playwright.init.config.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2017-present, The Visdom Authors
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const { defineConfig } = require('@playwright/test');
+const baseConfig = require('./playwright.config');
+
+module.exports = defineConfig({
+  ...baseConfig,
+  testIgnore: [],
+  testMatch: '**/*.init.spec.js',
+});

playwright/support/helpers.js

@@ -121,10 +121,45 @@ async function openEnv(page, name) {
   await closeEnvDropdown(page);
 }
 
+async function waitForPlotRender(page) {
+  await page
+    .locator('.content')
+    .first()
+    .waitFor({ state: 'visible', timeout: 20000 });
+  await page.waitForTimeout(800);
+}
+
+async function waitForMathJax(page) {
+  await page.waitForTimeout(2000);
+  await page.evaluate(async () => {
+    if (window.MathJax && window.MathJax.Hub) {
+      await new Promise((resolve) => {
+        window.MathJax.Hub.Queue(() => resolve());
+      });
+    }
+
+    if (document.fonts && document.fonts.ready) {
+      await document.fonts.ready;
+    }
+  });
+  await page.waitForTimeout(2000);
+}
+
+async function screenshotContent(page, screenshotPath) {
+  fs.mkdirSync(path.dirname(screenshotPath), { recursive: true });
+
+  const content = page.locator('.content').first();
+  await content.waitFor({ state: 'visible', timeout: 20000 });
+  await content.screenshot({ path: screenshotPath });
+}
+
 module.exports = {
   runDemo,
   closeEnvs,
   expandAllEnvGroups,
   closeEnvDropdown,
   openEnv,
+  waitForPlotRender,
+  waitForMathJax,
+  screenshotContent,
 };