jupyter: auto scale images (#1404)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.85/add-2026-01-11-jupyter-images-fit.md

@@ -0,0 +1 @@
+* Add: Jupyter notebook images are auto-scaled down to fit the column width  

znai-docs/znai/release-notes/1.85/fix-2026-01-11-doc-stats-use-precalculated-unique-views.md

@@ -0,0 +1 @@
+* Fix: `_stats/` request unique aggregated views instead of incorrectly calculating them on client

znai-jupyter/src/main/java/org/testingisdocumenting/znai/jupyter/JupyterOutput.java

@@ -22,5 +22,4 @@ public record JupyterOutput(String format, String content) {
     public static final String SVG_FORMAT = "svg";
     public static final String IMG_FORMAT = "img";
     public static final String TEXT_FORMAT = "text";
-
 }

znai-reactjs/src/doc-elements/images/AnnotatedImage.tsx

@@ -136,7 +136,7 @@ export function AnnotatedImage(props: AnnotatedImageProps) {
   const imageClassName =
     "znai-annotated-image" +
     (border ? " border" : "") +
-    (fit ? " znai-image-fit" : "") +
+    (fit && isScaledDown ? " znai-image-fit" : "") +
     (isScaledDown ? " znai-image-scaled-down" : "");
 
   return (
@@ -249,7 +249,7 @@ export function AnnotatedImage(props: AnnotatedImageProps) {
     }
 
     const singleColumnWidth = isMobile ? window.innerWidth : cssVarPixelValue("znai-single-column-full-width");
-    return singleColumnWidth / width;
+    return Math.min(1.0, singleColumnWidth / width);
   }
 
   function renderTitle() {

znai-reactjs/src/doc-elements/jupyter/JupyterImageWithFit.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { AnnotatedImage } from "../images/AnnotatedImage";
+import { useImageDimensions } from "./useImageDimensions";
+
+interface Props {
+  imageSrc: string;
+  alt: string;
+  elementsLibrary: any;
+}
+
+export function JupyterImageWithFit({ imageSrc, alt, elementsLibrary }: Props) {
+  const { dimensions, handleImageLoad } = useImageDimensions();
+
+  if (!dimensions) {
+    return (
+      <img src={imageSrc} alt={alt} onLoad={handleImageLoad} style={{ visibility: "hidden", position: "absolute" }} />
+    );
+  }
+
+  return (
+    <AnnotatedImage
+      imageSrc={imageSrc}
+      width={dimensions.width}
+      height={dimensions.height}
+      fit={true}
+      shapes={[]}
+      alt={alt}
+      elementsLibrary={elementsLibrary}
+    />
+  );
+}

znai-reactjs/src/doc-elements/jupyter/JupyterImgCell.jsx

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,14 +15,12 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React from 'react';
+import { JupyterImageWithFit } from './JupyterImageWithFit';
 
-const JupyterImgCell = ({img}) => {
-    return (
-        <div className="jupyter-cell jupyter-img content-block">
-            <img src={"data:image/png;base64," + img} alt="jupyter cell"/>
-        </div>
-    )
-}
+const JupyterImgCell = ({ img, elementsLibrary }) => {
+    const imageSrc = "data:image/png;base64," + img;
+    return <JupyterImageWithFit imageSrc={imageSrc} alt="jupyter output" elementsLibrary={elementsLibrary} />;
+};
 
-export default JupyterImgCell
+export default JupyterImgCell;

znai-reactjs/src/doc-elements/jupyter/JupyterSvgCell.jsx

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,14 +15,13 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React from 'react';
+import { JupyterImageWithFit } from './JupyterImageWithFit';
 
-const JupyterSvgCell = ({svg, elementsLibrary}) => {
-    return (
-        <div className="jupyter-cell jupyter-svg content-block">
-            <elementsLibrary.Svg svg={svg}/>
-        </div>
-    )
-}
+const JupyterSvgCell = ({ svg, elementsLibrary }) => {
+    const base64Svg = btoa(unescape(encodeURIComponent(svg)));
+    const imageSrc = "data:image/svg+xml;base64," + base64Svg;
+    return <JupyterImageWithFit imageSrc={imageSrc} alt="jupyter svg output" elementsLibrary={elementsLibrary} />;
+};
 
-export default JupyterSvgCell
+export default JupyterSvgCell;

znai-reactjs/src/doc-elements/jupyter/useImageDimensions.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useCallback } from 'react';
+
+interface Dimensions {
+    width: number;
+    height: number;
+}
+
+export function useImageDimensions() {
+    const [dimensions, setDimensions] = useState<Dimensions | null>(null);
+
+    const handleImageLoad = useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
+        const { naturalWidth, naturalHeight } = event.currentTarget;
+        setDimensions({ width: naturalWidth, height: naturalHeight });
+    }, []);
+
+    return { dimensions, handleImageLoad };
+}