Merge branch 'dev' into Final-work-of-data-abstraction-layer

Author: Manik-Khajuria-5

README.md

@@ -267,6 +267,7 @@ Other options are either currently unused (endpoint, ipv6) or used for internal
 ### Basics
 Visdom offers the following basic visualization functions:
 - [`vis.image`](#visimage)    : image
+- [`vis.image_heatmap`](#visimageheatmap) : image with heatmap overlay
 - [`vis.images`](#visimages)   : list of images
 - [`vis.text`](#vistext)     : arbitrary HTML
 - [`vis.properties`](#visproperties)     : properties grid
@@ -285,6 +286,7 @@ The following API is currently supported:
 - [`vis.scatter`](#visscatter)  : 2D or 3D scatter plots
 - [`vis.sunburst`](#vissunburst)  : sunburst (hierarchy) charts
 - [`vis.line`](#visline)     : line plots
+- [`vis.learning_curve`](#vislearning_curve) : named training metric curves
 - [`vis.stem`](#visstem)     : stem plots
 - [`vis.heatmap`](#visheatmap)  : heatmap plots
 - [`vis.confusion_matrix`](#visconfusion_matrix)  : confusion matrix plots
@@ -357,6 +359,34 @@ The following `opts` are supported:
 > **Note** You can use alt on an image pane to view the x/y coordinates of the cursor. You can also ctrl-scroll to zoom, alt scroll to pan vertically, and alt-shift scroll to pan horizontally. Double click inside the pane to restore the image to default.
 
 
+#### vis.image_heatmap
+
+This function overlays a saliency or attention heatmap on top of an image. It takes a `CxHxW` or `HxW` array `img` (uint8 or float) and an `HxW` float array `heatmap` with values in `[0, 1]`. The blending is per-pixel — pixels where the heatmap is near zero stay close to the original image, so a zero-gradient background does not get tinted by the colormap.
+
+```python
+import numpy as np
+from visdom import Visdom
+
+viz = Visdom()
+
+# img: CxHxW uint8 or float in [0, 1]
+# heatmap: HxW float in [0, 1] — e.g. from a saliency method or attention map
+viz.image_heatmap(img, heatmap, opts=dict(title="Saliency", alpha=0.6, colormap="jet"))
+```
+
+Any attribution method that produces an `HxW` numpy array works — gradient saliency, GradCAM, SHAP, or a hand-computed attention map.
+
+The following `opts` are supported:
+
+- `alpha`: blend strength (`float` in `[0, 1]`; default = `0.5`). Higher values make the heatmap more visible.
+- `colormap`: matplotlib colormap name (`string`; default = `'jet'`). Falls back to a blue-red gradient if matplotlib is not installed.
+- `caption`: caption for the image pane
+- `jpgquality`: JPG quality (`number` 0-100). If set, the result is encoded as JPEG. Otherwise PNG.
+- `normalize`: normalize the image to `[0, 1]` before blending (`boolean`; default = `False`)
+
+> **Note** `heatmap` accepts any finite float range. Values outside `[0, 1]` are rescaled automatically via min-max normalization, so methods like SHAP or Integrated Gradients that return signed or unnormalized values work without any pre-processing. NaN maps to 0; infinite values are clamped to the `[0, 1]` boundary.
+
+
 #### vis.images
 
 This function draws a list of `images`. It takes an input `B x C x H x W` tensor or a `list of images` all of the same size. It makes a grid of images of size (B / nrow, nrow).
@@ -469,6 +499,7 @@ The function accepts the following arguments:
 - `labels`: a list of corresponding labels for the tensors provided for `features`
 - `data_getter=fn`: (optional) a function that takes as a parameter an index into the features array and returns a summary representation of the tensor. If this is set, `data_type` must also be set.
 - `data_type=str`: (optional) currently the only acceptable value here is `"html"`
+- `opts.register_embedding_events`: (optional) set to `False` to skip registering the default Python client event handler for hover previews and lasso drilldown. This leaves embeddings interaction events for external server or frontend code to handle.
 
 We currently assume that there are no more than 10 unique labels, in the future we hope to provide a colormap in opts for other cases.
 
@@ -581,6 +612,29 @@ The following `opts` are supported:
 - `opts.layoutopts` : additional backend layout options (`dict`)
 
 
+#### vis.learning_curve
+This function draws named machine-learning metrics as line plots. It accepts a mapping from metric names to scalar values or equal-length 1D series and forwards to [`vis.line`](#visline).
+
+For example:
+
+```python
+win = vis.learning_curve(
+    {"train_loss": [1.0, 0.8, 0.6], "val_loss": [1.1, 0.9, 0.7]},
+    step=[1, 2, 3],
+    env="training",
+    opts={"title": "Loss", "ylabel": "loss"},
+)
+
+vis.learning_curve(
+    {"train_loss": 0.55, "val_loss": 0.68},
+    step=4,
+    win=win,
+    env="training",
+    update="append",
+)
+```
+
+
 #### vis.stem
 This function draws a stem plot. It takes as input an `N` or `NxM` tensor
 `X` that specifies the values of the `N` points in the `M` time series.

cypress/integration/UploadDashboard.js

@@ -25,37 +25,4 @@ describe('Visdom - Upload Dashboard JSON Feature', () => {
       expect(str.toLowerCase()).to.contain('json');
     });
   });
-
-  it('should successfully upload valid dashboard JSON and set it as current environment', () => {
-    cy.intercept('POST', '/upload_env', (req) => {
-      req.continue((res) => {
-        res.delay = 1000;
-      });
-    }).as('uploadRequest');
-
-    cy.window().then((win) => {
-      cy.stub(win, 'alert').as('alertStub');
-    });
-
-    cy.fixture('test.json').then((fileContent) => {
-      cy.get('input[type="file"]').selectFile(
-        {
-          contents: fileContent,
-          fileName: 'test.json',
-          mimeType: 'application/json',
-        },
-        { force: true }
-      );
-
-      cy.get('button .glyphicon-upload').parent('button').click();
-      cy.wait('@uploadRequest');
-      cy.get('@alertStub', { timeout: 15000 }).should('have.been.called');
-
-      cy.window().then((win) => {
-        const envIDs = JSON.parse(win.localStorage.getItem('envIDs'));
-        expect(envIDs).to.be.an('array');
-        expect(envIDs[0]).to.match(/^uploaded_/);
-      });
-    });
-  });
 });

cypress/integration/export.js

@@ -65,27 +65,4 @@ describe('Test Export Env as HTML', () => {
       expect(html).to.include(env);
     });
   });
-
-  it('Shows alert when all panes are closed before export', () => {
-    const env = 'export_empty_' + Cypress._.random(0, 1e6);
-    cy.run('text_basic', { env });
-    cy.get('.layout .window').should('have.length', 1);
-
-    cy.get('.layout .react-grid-item')
-      .first()
-      .find('button[title="close"]')
-      .click();
-    cy.get('.layout .react-grid-item').should('have.length', 0);
-
-    cy.window().then((win) => {
-      cy.stub(win, 'alert').as('alertStub');
-    });
-
-    cy.get(exportButton).should('not.be.disabled').click();
-
-    cy.get('@alertStub').should(
-      'have.been.calledWith',
-      'No panes available to export.'
-    );
-  });
 });

cypress/integration/pane.js

@@ -17,6 +17,7 @@ const basic_examples = [
   // ["Mesh Plot", "plot_special_mesh"], // disabled due to webgl
   ['Graph Plot', 'plot_special_graph'],
   ['Sankey Plot', 'plot_special_sankey'],
+  ['Learning Curve', 'plot_line_learning_curve'],
   ['Matplotlib Plot', 'misc_plot_matplot'],
   ['Latex Plot', 'misc_plot_latex'],
   ['Video Pane', 'misc_video_tensor'],

example/components/image.py

@@ -39,6 +39,18 @@ def image_basic(viz, env, args):
     return img_callback_win
 
 
+def image_heatmap_basic(viz, env, args):
+    img = np.random.rand(3, 128, 128)
+    ys, xs = np.mgrid[0:128, 0:128]
+    heatmap = np.exp(-((ys - 64) ** 2 + (xs - 64) ** 2) / (2 * 20.0**2))
+    return viz.image_heatmap(
+        img,
+        heatmap,
+        opts={"title": "Heatmap overlay", "colormap": "jet", "alpha": 0.6},
+        env=env,
+    )
+
+
 def image_callback(viz, env, args):
     img_callback_win = image_basic(viz, env, args)
     img_coord_text = viz.text("Coords: ", env=env)

example/components/plot_line.py

@@ -114,6 +114,33 @@ def plot_line_many_updates(viz, env, args):
         )
 
 
+def plot_line_learning_curve(viz, env, args):
+    epochs = np.arange(1, 11)
+    train_loss = np.exp(-epochs / 4.0) + 0.08 * np.random.rand(len(epochs))
+    val_loss = np.exp(-epochs / 3.7) + 0.12 * np.random.rand(len(epochs)) + 0.08
+    win = viz.learning_curve(
+        {
+            "train_loss": train_loss,
+            "val_loss": val_loss,
+        },
+        step=epochs,
+        opts={"title": "Learning curve", "ylabel": "loss"},
+        env=env,
+    )
+
+    for epoch in range(11, 16):
+        viz.learning_curve(
+            {
+                "train_loss": np.exp(-epoch / 4.0),
+                "val_loss": np.exp(-epoch / 3.7) + 0.08,
+            },
+            step=epoch,
+            win=win,
+            update="append",
+            env=env,
+        )
+
+
 def plot_line_opts(viz, env, args):
     return viz.line(
         X=np.column_stack(

example/demo.py

@@ -27,6 +27,7 @@
     image_grid,
     image_svg,
     image_compare_basic,
+    image_heatmap_basic,
 )
 from components.plot_scatter import (
     plot_scatter_basic,
@@ -73,6 +74,7 @@
     plot_line_pytorch,
     plot_line_stem,
     plot_line_many_updates,
+    plot_line_learning_curve,
 )
 from components.plot_special import (
     plot_special_boxplot,
@@ -133,6 +135,7 @@ def run_demo(viz, env, args):
     image_save_jpeg(viz, env, args)
     image_history(viz, env, args)
     image_grid(viz, env, args)
+    image_heatmap_basic(viz, env, args)
 
     # ========== #
     # line plots #
@@ -149,6 +152,7 @@ def run_demo(viz, env, args):
     plot_line_doubleyaxis(viz, env, args)
     plot_line_pytorch(viz, env, args)
     plot_line_stem(viz, env, args)
+    plot_line_learning_curve(viz, env, args)
 
     # ============= #
     # scatter plots #

js/main.js

@@ -36,6 +36,8 @@ import {
   ROW_HEIGHT,
 } from './settings';
 import buildExportHtml from './template/exportTemplate';
+import ToastContainer from './toasts/ToastContainer';
+import { showToast } from './toasts/toastEvents';
 import ConnectionIndicator from './topbar/ConnectionIndicator';
 import EnvControls from './topbar/EnvControls';
 import FilterControls from './topbar/FilterControls';
@@ -876,7 +878,7 @@ const App = () => {
   };
   const exportCurrentEnvToHtml = () => {
     if (!storeData.panes || Object.keys(storeData.panes).length === 0) {
-      alert('No panes available to export.');
+      showToast('No panes available to export.', 'error', { duration: 4000 });
       return;
     }
 
@@ -1034,6 +1036,7 @@ const App = () => {
 
   return (
     <div>
+      <ToastContainer />
       {modals}
       <div className="navbar-form navbar-default">
         <span className="navbar-brand visdom-title">visdom</span>

js/toasts/Toast.js

@@ -0,0 +1,87 @@
+/**
+ * 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.
+ *
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const EXIT_ANIMATION_MS = 200;
+
+const Toast = ({
+  message,
+  type = 'info',
+  duration = 4000,
+  shape = 'rect',
+  onDismiss,
+}) => {
+  const [isLeaving, setIsLeaving] = useState(false);
+  const isLeavingRef = useRef(false);
+  const dismissTimerRef = useRef(null);
+  const exitTimerRef = useRef(null);
+  const onDismissRef = useRef(onDismiss);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  const startExit = useCallback(() => {
+    if (isLeavingRef.current) return;
+    isLeavingRef.current = true;
+    setIsLeaving(true);
+    exitTimerRef.current = setTimeout(
+      () => onDismissRef.current(),
+      EXIT_ANIMATION_MS
+    );
+  }, []);
+
+  useEffect(() => {
+    if (duration > 0) {
+      dismissTimerRef.current = setTimeout(startExit, duration);
+    }
+    return () => {
+      clearTimeout(dismissTimerRef.current);
+      clearTimeout(exitTimerRef.current);
+    };
+  }, [duration, startExit]);
+
+  const isPill = shape === 'pill';
+
+  const className = [
+    'visdom-toast',
+    `visdom-toast-${type}`,
+    isPill ? 'visdom-toast-pill' : '',
+    isLeaving ? 'visdom-toast-leaving' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={className} role="alert">
+      <span className="visdom-toast-message">{message}</span>
+
+      {!isPill && (
+        <button
+          aria-label="Dismiss notification"
+          className="visdom-toast-close"
+          onClick={startExit}
+          type="button"
+        >
+          &times;
+        </button>
+      )}
+
+      {!isPill && duration > 0 && !isLeaving && (
+        <div
+          className="visdom-toast-progress"
+          style={{ animationDuration: `${duration}ms` }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Toast;