initial commit

Author: rajnisht7

js/panes/ImageComparePane.js

@@ -7,12 +7,22 @@
  *
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 function ImageComparePane(props) {
   const { content, title, id } = props;
+  const containerRef = useRef();
+
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(contentRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content]);
 
   // If content isn't an array, fallback
   if (!Array.isArray(content)) {
@@ -38,6 +48,7 @@ function ImageComparePane(props) {
   return (
     <Pane {...props} handleDownload={handleDownload}>
       <div
+        ref={containerRef}
         style={{
           display: 'flex',
           flexDirection: 'row',

js/panes/ImagePane.js

@@ -12,6 +12,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import ApiContext from '../api/ApiContext';
 import EventSystem from '../EventSystem';
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 const DEFAULT_HEIGHT = 400;
 const DEFAULT_WIDTH = 300;
@@ -25,6 +26,7 @@ function ImagePane(props) {
   // --------------
   const paneRef = useRef();
   const imgRef = useRef();
+  const captionRef = useRef();
   const mouseLocationRef = useRef({ x: null, y: null });
   const [view, setView] = useState({ scale: 1, tx: 0, ty: 0 });
   const [imgDim, setImgDim] = useState({ width: null, height: 0 });
@@ -147,7 +149,11 @@ function ImagePane(props) {
   const commitSliderSelection = (value) => {
     const idx = parseInt(value, 10);
     if (Number.isNaN(idx)) return;
-    sendPaneMessage({ event_type: 'SliderMoved', index: idx, pane_data: false }, id, envID);
+    sendPaneMessage(
+      { event_type: 'SliderMoved', index: idx, pane_data: false },
+      id,
+      envID
+    );
   };
 
   const finalizeSlider = (evt) => {
@@ -307,12 +313,20 @@ function ImagePane(props) {
     content = content[actualSelected];
   }
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(captionRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content.caption]);
+
   // add caption as widget
   if (content.caption) {
     widgets.splice(
       0,
       0,
-      <span className="widget" key="img_caption">
+      <span className="widget" key="img_caption" ref={captionRef}>
         {content.caption}
       </span>
     );

js/panes/PlotPane.js

@@ -9,6 +9,7 @@
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
 const { usePrevious } = require('../util');
+import { typesetMathJax } from './utils/mathjaxHelpers';
 import ApiContext from '../api/ApiContext';
 import Pane from './Pane';
 const { sgg } = require('ml-savitzky-golay-generalized');
@@ -20,6 +21,7 @@ var PlotPane = (props) => {
   // state variables
   // --------------
   const plotlyRef = useRef();
+  const captionRef = useRef();
   const maxsmoothvalue = 100;
   const [smoothWidgetActive, setSmoothWidgetActive] = useState(false);
   const [smoothvalue, setSmoothValue] = useState(1);
@@ -41,6 +43,14 @@ var PlotPane = (props) => {
     }
   }, [selected]);
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(captionRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content && content.caption]);
+
   // private events
   // -------------
   const toggleSmoothWidget = () => {
@@ -327,7 +337,7 @@ var PlotPane = (props) => {
   var caption_widget = '';
   if (content && content.caption) {
     caption_widget = (
-      <div className="widget plot-caption" key="plot_caption">
+      <div className="widget plot-caption" key="plot_caption" ref={captionRef}>
         {content.caption}
       </div>
     );

js/panes/TextPane.js

@@ -7,16 +7,18 @@
  *
  */
 
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import ScrollToBottom from 'react-scroll-to-bottom';
 
 import ApiContext from '../api/ApiContext';
 import EventSystem from '../EventSystem';
 import Pane from './Pane';
+import { typesetMathJax } from './utils/mathjaxHelpers';
 
 function TextPane(props) {
   const { sendPaneMessage } = useContext(ApiContext);
   const { envID, id, content, isFocused } = props;
+  const contentRef = useRef();
 
   // private events
   // --------------
@@ -70,6 +72,14 @@ function TextPane(props) {
     };
   });
 
+  useEffect(() => {
+    let cancelled = false;
+    typesetMathJax(contentRef.current, () => cancelled);
+    return () => {
+      cancelled = true;
+    };
+  }, [content]);
+
   // rendering
   // ---------
 
@@ -88,7 +98,7 @@ function TextPane(props) {
         initialScrollBehavior={initialScrollBehavior}
         mode="bottom"
       >
-        <div dangerouslySetInnerHTML={{ __html: content }} />
+        <div ref={contentRef} dangerouslySetInnerHTML={{ __html: content }} />
       </ScrollToBottom>
     </Pane>
   );

js/panes/utils/mathjaxHelpers.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ */
+
+function typesetMathJax(element, isCancelled) {
+  if (!element) return;
+  if (
+    !window.MathJax ||
+    !window.MathJax.startup ||
+    !window.MathJax.startup.promise
+  ) {
+    return;
+  }
+  window.MathJax.startup.promise = window.MathJax.startup.promise
+    .then(() => {
+      if (isCancelled && isCancelled()) return;
+      return window.MathJax.typesetPromise([element]);
+    })
+    .catch((err) => {
+      console.error('MathJax typeset error:', err);
+    });
+}
+
+export { typesetMathJax };