@myst-theme/jupyter 0.5.22 → 0.6.0

package/dist/convertImages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convertImages.d.ts","sourceRoot":"","sources":["../src/convertImages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AA6B/D,wBAAsB,0BAA0B,CAC9C,OAAO,EAAE,cAAc,EAAE,GACxB,OAAO,CAAC,cAAc,EAAE,CAAC,CAmC3B"}
+{"version":3,"file":"convertImages.d.ts","sourceRoot":"","sources":["../src/convertImages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AA6B/D,wBAAsB,0BAA0B,CAC9C,OAAO,EAAE,cAAc,EAAE,GACxB,OAAO,CAAC,cAAc,EAAE,CAAC,CAoC3B"}

package/dist/convertImages.js

@@ -38,7 +38,7 @@ export function fetchAndEncodeOutputImages(outputs) {
         return Promise.all(outputs.map((output) => __awaiter(this, void 0, void 0, function* () {
             if (!('data' in output))
                 return output;
-            const imageMimetypes = Object.keys(output.data).filter((mimetype) => mimetype !== 'image/svg' && mimetype.startsWith('image/'));
+            const imageMimetypes = Object.keys(output.data).filter((mimetype) => mimetype !== 'image/svg' && mimetype !== 'image/svg+xml' && mimetype.startsWith('image/'));
             if (imageMimetypes.length === 0)
                 return output;
             // this is an async fetch, so we need to await the result

package/dist/execute/leaf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../../src/execute/leaf.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAW9D,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,EACH,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,kDAkBA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QA8CA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QAmFA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QA4BA"}
+{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../../src/execute/leaf.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAY9D,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,EACH,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,kDAkBA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QAiDA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QAmFA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;CAC9C,QA4BA"}

package/dist/execute/leaf.js

@@ -4,6 +4,7 @@ import { useThebeLoader, useThebeConfig, useThebeServer } from 'thebe-react';
 import { notebookFromMdast } from './utils.js';
 import { selectAreAllNotebookScopesBuilt, selectAreAllSessionsStarted, selectNotebookForPage, } from './selectors.js';
 import { useFetchMdast } from 'myst-to-react';
+import { useLoadPlotly } from '../plotly.js';
 export function MdastFetcher({ slug, url, dispatch, }) {
     const { data, error } = useFetchMdast({ remote: true, dataUrl: `${url}.json` });
     useEffect(() => {
@@ -22,13 +23,16 @@ export function NotebookBuilder({ pageSlug, notebookSlug, idkmap, state, dispatc
     const { config } = useThebeConfig();
     const lock = useRef(false); // TODO can be removed if we solve double render from provider
     const scopeHasNotebook = !!((_a = state.pages[pageSlug]) === null || _a === void 0 ? void 0 : _a.scopes[notebookSlug]);
+    const { plotly } = useLoadPlotly();
     useEffect(() => {
         var _a;
-        if (!core || !config || scopeHasNotebook || lock.current)
+        if (!core || !config || !plotly || scopeHasNotebook || lock.current)
             return;
         lock.current = true;
         console.debug(`Jupyter: NotebookBuilder - ${notebookSlug} being added to scope ${pageSlug}`);
         const rendermime = core === null || core === void 0 ? void 0 : core.makeRenderMimeRegistry(config === null || config === void 0 ? void 0 : config.mathjax);
+        if (plotly)
+            rendermime.addFactory(plotly.rendererFactory, 41);
         const notebook = notebookFromMdast(core, config, pageSlug, notebookSlug, state.mdast[notebookSlug].root, idkmap, rendermime);
         // hook up computable targets
         const computables = (_a = state.pages[pageSlug]) === null || _a === void 0 ? void 0 : _a.computables;
@@ -42,7 +46,7 @@ export function NotebookBuilder({ pageSlug, notebookSlug, idkmap, state, dispatc
             type: 'ADD_NOTEBOOK',
             payload: { pageSlug, notebookSlug, rendermime, notebook },
         });
-    }, [core, config, pageSlug, notebookSlug, scopeHasNotebook, lock]);
+    }, [core, config, pageSlug, notebookSlug, scopeHasNotebook, lock, plotly]);
     // TODO find a way to check if the all the notebooks are built and do a single dispatch
     // potentilly use a move the loop down into this component
     const allNotebooksAreBuilt = selectAreAllNotebookScopesBuilt(state, pageSlug);

package/dist/jupyter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAsF3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAwD1D,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AA4F3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAwD1D,CAAC"}

package/dist/jupyter.js

@@ -10,6 +10,7 @@ import { useCellExecution } from './execute/index.js';
 import { usePlaceholder } from './decoration.js';
 import { MyST } from 'myst-to-react';
 import classNames from 'classnames';
+import { usePlotlyPassively } from './plotly.js';
 function ActiveOutputRenderer({ id, initialData, core, }) {
     var _a;
     const exec = useCellExecution(id);
@@ -37,15 +38,18 @@ function ActiveOutputRenderer({ id, initialData, core, }) {
     return (_jsxs("div", { children: [_jsx("div", { ref: ref, "data-thebe-active-ref": "true", className: classNames('relative', { 'invisible h-0': !executed && placeholder }) }), placeholder && !executed && _jsx(MyST, { ast: placeholder })] }));
 }
 function PassiveOutputRenderer({ id, data, core, }) {
-    const cell = useRef(new core.PassiveCellRenderer(id, undefined, undefined));
+    const rendermime = core.makeRenderMimeRegistry();
+    const cell = useRef(new core.PassiveCellRenderer(id, rendermime, undefined));
     const ref = useRef(null);
+    const { loaded } = usePlotlyPassively(rendermime, data);
     useEffect(() => {
-        var _a;
-        if (!ref.current)
+        var _a, _b;
+        if (!ref.current || !loaded)
             return;
-        cell.current.attachToDOM(ref.current, true);
-        cell.current.render((_a = core === null || core === void 0 ? void 0 : core.stripWidgets(data)) !== null && _a !== void 0 ? _a : data);
-    }, [ref]);
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        cell.current.attachToDOM((_a = ref.current) !== null && _a !== void 0 ? _a : undefined, true);
+        cell.current.render((_b = core === null || core === void 0 ? void 0 : core.stripWidgets(data)) !== null && _b !== void 0 ? _b : data);
+    }, [ref, loaded]);
     return _jsx("div", { ref: ref, "data-thebe-passive-ref": "true" });
 }
 export const JupyterOutputs = React.memo(({ id, outputs }) => {

package/dist/plotly.d.ts

@@ -0,0 +1,12 @@
+import type { IRenderMime, IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import type { IOutput } from '@jupyterlab/nbformat';
+export declare function useLoadPlotly(): {
+    plotly: {
+        rendererFactory: IRenderMime.IRendererFactory;
+    } | undefined;
+};
+export declare function isPlotly(outputs: IOutput[]): boolean;
+export declare function usePlotlyPassively(rendermime: IRenderMimeRegistry, outputs: IOutput[]): {
+    loaded: boolean;
+};
+//# sourceMappingURL=plotly.d.ts.map

package/dist/plotly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotly.d.ts","sourceRoot":"","sources":["../src/plotly.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,wBAAgB,aAAa;;yBAEN,YAAY,gBAAgB;;EAiBlD;AAID,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,WAE1C;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,EAAE;;EAoBrF"}

package/dist/plotly.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+export function useLoadPlotly() {
+    const [plotly, setPlotly] = useState();
+    useEffect(() => {
+        if (plotly)
+            return;
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        import('jupyterlab-plotly/lib/plotly-renderer.js').then((module) => {
+            console.debug('Jupyter: Adding plotly renderer factory to rendermime registry', {
+                module,
+            });
+            setPlotly(module);
+        });
+    }, [plotly]);
+    return { plotly };
+}
+const PLOTLY_MIMETYPE = 'application/vnd.plotly.v1+json';
+export function isPlotly(outputs) {
+    return outputs.some((output) => { var _a; return Object.keys((_a = output.data) !== null && _a !== void 0 ? _a : []).includes(PLOTLY_MIMETYPE); });
+}
+export function usePlotlyPassively(rendermime, outputs) {
+    const [loaded, setLoaded] = useState(false);
+    const isPlotlyOutput = isPlotly(outputs);
+    useEffect(() => {
+        if (loaded || !isPlotlyOutput)
+            return;
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        import('jupyterlab-plotly/lib/plotly-renderer.js').then((module) => {
+            console.debug('Jupyter: Adding plotly renderer factory to rendermime registry', {
+                module,
+            });
+            rendermime.addFactory(module.rendererFactory, 41);
+            setLoaded(true);
+        });
+    }, [loaded, isPlotlyOutput]);
+    return { loaded };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/jupyter",
-  "version": "0.5.22",
+  "version": "0.6.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,16 +25,17 @@
     "@curvenote/ansi-to-react": "^7.0.0",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.5.22",
+    "@myst-theme/providers": "^0.6.0",
     "@scienceicons/react": "^0.0.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
+    "jupyterlab-plotly": "^5.18.0",
     "myst-common": "^1.1.18",
     "myst-config": "^1.1.18",
     "myst-frontmatter": "^1.1.18",
     "myst-spec": "^0.0.4",
     "myst-spec-ext": "^1.1.18",
-    "myst-to-react": "^0.5.22",
+    "myst-to-react": "^0.6.0",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",
     "react-syntax-highlighter": "^15.5.0",
@@ -49,6 +50,5 @@
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
-  },
-  "devDependencies": {}
+  }
 }