Skip to content

[WIP] Towards offline Mathjax support#1169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jonmmease wants to merge 5 commits into from
Closed

[WIP] Towards offline Mathjax support #1169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c538bb6
Work towards supporting mathjax in plotly.offline.plot
jonmmease Sep 8, 2018
13d1a1d
Experiment adding mathajx to widget dependencies (not working)
jonmmease Sep 8, 2018
39d2a58
Initial work to fix latex support in plotly.offline.iplot.
jonmmease Sep 9, 2018
81303ba
Basic Latex support in FigureWidget
jonmmease Sep 9, 2018
48df50d
Don't assume original renderer is HTML-CSS
jonmmease Sep 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion js/src/Figure.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ var Plotly = require("plotly.js/dist/plotly");
var PlotlyIndex = require("plotly.js/src/lib/index");
var semver_range = "^" + require("../package.json").version;


// Model
// =====
/**
Expand DownExpand Up@@ -680,6 +681,37 @@ var FigureModel = widgets.DOMWidgetModel.extend({

// View
// ====
var default_renderer;

function mathjax_init() {
if (window.MathJax) {
// MathJax loaded
MathJax.Hub.Config({
SVG: {font: "STIX-Web"},
});
}
}

function mathjax_pre() {
if (window.MathJax) {
// MathJax loaded

// Save off original renderer so we can restore it after we're done
default_renderer = MathJax.Hub.config.menuSettings.renderer;
MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "SVG"]);

}
}

function mathjax_post() {
if (window.MathJax) {
// MathJax loaded

// Restore original renderer
MathJax.Hub.Queue(["setRenderer", MathJax.Hub, default_renderer]);
}
}

/**
* A FigureView manages the visual presentation of a single Plotly.js
* figure for a single notebook output cell. Each FigureView has a
Expand All@@ -702,6 +734,8 @@ var FigureView = widgets.DOMWidgetView.extend({

var that = this;

mathjax_init();

// Wire up message property callbacks
// ----------------------------------
// Python -> JS event properties
Expand DownExpand Up@@ -741,6 +775,8 @@ var FigureView = widgets.DOMWidgetView.extend({
var initialTraces = _.cloneDeep(this.model.get("_data"));
var initialLayout = _.cloneDeep(this.model.get("_layout"));

mathjax_pre();

Plotly.newPlot(that.el, initialTraces, initialLayout).then(
function () {

Expand All@@ -752,6 +788,8 @@ var FigureView = widgets.DOMWidgetView.extend({
// ### Send layout delta ###
that._sendLayoutDelta(layout_edit_id);

mathjax_post();

// Wire up plotly event callbacks
that.el.on("plotly_restyle",
function (update) {
Expand DownExpand Up@@ -1257,6 +1295,7 @@ var FigureView = widgets.DOMWidgetView.extend({
msgData.restyle_traces);

restyleData["_doNotReportToPy"] = true;

Plotly.restyle(this.el, restyleData, traceIndexes);

// ### Send trace deltas ###
Expand DownExpand Up@@ -1307,7 +1346,8 @@ var FigureView = widgets.DOMWidgetView.extend({
msgData.style_traces);

style["_doNotReportToPy"] = true;
Plotly.update(this.el, style, layout, traceIndexes);

Plotly.update(this.el, style, layout, traceIndexes);

// ### Send trace deltas ###
// We create an array of deltas corresponding to the updated
Expand Down
134 changes: 94 additions & 40 deletions plotly/offline/offline.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -108,37 +108,48 @@ def init_notebook_mode(connected=False):

global __PLOTLY_OFFLINE_INITIALIZED

mathjax_config = """
MathJax.Hub.Config({
SVG: {font: "STIX-Web"},
displayAlign: "center"});"""

if connected:
# Inject plotly.js into the output cell
script_inject = (
''
'<script>'
'requirejs.config({'
'paths: { '
# Note we omit the extension .js because require will include it.
'\'plotly\': [\'https://cdn.plot.ly/plotly-latest.min\']},'
'});'
'if(!window.Plotly) {{'
'require([\'plotly\'],'
'function(plotly) {window.Plotly=plotly;});'
'}}'
'</script>'
)
#
# Note we omit the extension .js in requirejs.config
# because require will include it.
script_inject = """
<script>
requirejs.config(
{{paths: {{'plotly': ['https://cdn.plot.ly/plotly-latest.min']}}}});

{mathjax_config}

if(!window.Plotly) {{
require(['plotly'], function(plotly) {{
window.Plotly=plotly;
}});
}}
</script>
""".format(mathjax_config=mathjax_config)

else:
# Inject plotly.js into the output cell
script_inject = (
''
'<script type=\'text/javascript\'>'
'if(!window.Plotly){{'
'define(\'plotly\', function(require, exports, module) {{'
'{script}'
'}});'
'require([\'plotly\'], function(Plotly) {{'
'window.Plotly = Plotly;'
'}});'
'}}'
'</script>'
'').format(script=get_plotlyjs())
script_inject = """
<script type='text/javascript'>

{mathjax_config}

if(!window.Plotly){{
define('plotly', function(require, exports, module) {{
{script}
}});
require(['plotly'], function(Plotly) {{
window.Plotly = Plotly;
}});
}}
</script>
""".format(script=get_plotlyjs(), mathjax_config=mathjax_config)

display_bundle = {
'text/html': script_inject,
Expand All@@ -149,7 +160,7 @@ def init_notebook_mode(connected=False):


def _plot_html(figure_or_data, config, validate, default_width,
default_height, global_requirejs):
default_height, global_requirejs, mathjax_notebook=False):

figure = tools.return_figure_from_figure_or_data(figure_or_data, validate)

Expand DownExpand Up@@ -232,30 +243,60 @@ def _plot_html(figure_or_data, config, validate, default_width,
config['linkText'] = link_text
jconfig = jconfig.replace('Export to plot.ly', link_text)

if mathjax_notebook:
# Construct JavaScript snippets to configure MathJax for Plotly.js,
# and then reconfigure it for the notebook once Plotly.js is finished.
mathjax_pre = """\
MathJax.Hub.Queue(
["setRenderer", MathJax.Hub, "SVG"]);"""

mathjax_post = """\
MathJax.Hub.Queue(
["setRenderer", MathJax.Hub, "HTML-CSS"]);"""
else:
mathjax_pre = ''
mathjax_post = ''

if jframes:
script = '''
Plotly.plot(
script = """
{mathjax_pre}

Plotly.newPlot(
'{id}',
{data},
{layout},
{config}
).then(function () {add_frames}).then(function(){animate})
'''.format(
).then(function () {{
return Plotly.addFrames('{id}', {frames})
}}
).then(function() {{
Plotly.animate('{id}').then(function() {{
{mathjax_post}
}})}})
""".format(
mathjax_pre=mathjax_pre,
id=plotdivid,
data=jdata,
layout=jlayout,
config=jconfig,
add_frames="{" + "return Plotly.addFrames('{id}',{frames}".format(
id=plotdivid, frames=jframes
) + ");}",
animate="{" + "Plotly.animate('{id}');".format(id=plotdivid) + "}"
frames=jframes,
mathjax_post=mathjax_post
)
else:
script = 'Plotly.newPlot("{id}", {data}, {layout}, {config})'.format(

script = """
{mathjax_pre}

Plotly.newPlot(
"{id}", {data}, {layout}, {config}).then(function() {{
{mathjax_post}
}})""".format(
mathjax_pre=mathjax_pre,
id=plotdivid,
data=jdata,
layout=jlayout,
config=jconfig)
config=jconfig,
mathjax_post=mathjax_post)

optional_line1 = ('require(["plotly"], function(Plotly) {{ '
if global_requirejs else '')
Expand DownExpand Up@@ -356,8 +397,8 @@ def iplot(figure_or_data, show_link=True, link_text='Export to plot.ly',

if __PLOTLY_OFFLINE_INITIALIZED:
plot_html, plotdivid, width, height = _plot_html(
figure_or_data, config, validate, '100%', 525, True
)
figure_or_data, config, validate, '100%', 525, True,
mathjax_notebook=True)
display_bundle['text/html'] = plot_html
display_bundle['text/vnd.plotly.v1+html'] = plot_html

Expand DownExpand Up@@ -485,8 +526,20 @@ def plot(figure_or_data, show_link=True, link_text='Export to plot.ly',
'</script>'
).format(id=plotdivid)

mathjax_path = ('https://cdnjs.cloudflare.com/ajax/libs/mathjax/'
'2.7.5/MathJax.js')
if output_type == 'file':
with open(filename, 'w') as f:

include_mathjax = True

if include_mathjax:
mathjax_script = ''.join([
'<script type="text/javascript"'
'src="%s?config=TeX-AMS-MML_SVG">' % mathjax_path,
'</script>',
])

if include_plotlyjs:
plotly_js_script = ''.join([
'<script type="text/javascript">',
Expand DownExpand Up@@ -516,6 +569,7 @@ def plot(figure_or_data, show_link=True, link_text='Export to plot.ly',
'<html>',
'<head><meta charset="utf-8" /></head>',
'<body>',
mathjax_script,
plotly_js_script,
plot_html,
resize_script,
Expand Down
42 changes: 41 additions & 1 deletion plotlywidget/static/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12560,6 +12560,7 @@ var Plotly = __webpack_require__(25);
var PlotlyIndex = __webpack_require__(26);
var semver_range = "^" + __webpack_require__(19).version;


// Model
// =====
/**
Expand DownExpand Up@@ -13236,6 +13237,37 @@ var FigureModel = widgets.DOMWidgetModel.extend({

// View
// ====
var default_renderer;

function mathjax_init() {
if (window.MathJax) {
// MathJax loaded
MathJax.Hub.Config({
SVG: {font: "STIX-Web"},
});
console.log(MathJax);
}
}

function mathjax_pre() {
if (window.MathJax) {
// MathJax loaded

console.log(MathJax.Hub.config.menuSettings.renderer);
default_renderer = MathJax.Hub.config.menuSettings.renderer;
MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "SVG"]);

}
}

function mathjax_post() {
if (window.MathJax) {
// MathJax loaded
console.log(MathJax.Hub.config.menuSettings.renderer);
MathJax.Hub.Queue(["setRenderer", MathJax.Hub, default_renderer]);
}
}

/**
* A FigureView manages the visual presentation of a single Plotly.js
* figure for a single notebook output cell. Each FigureView has a
Expand All@@ -13258,6 +13290,8 @@ var FigureView = widgets.DOMWidgetView.extend({

var that = this;

mathjax_init();

// Wire up message property callbacks
// ----------------------------------
// Python -> JS event properties
Expand DownExpand Up@@ -13297,6 +13331,8 @@ var FigureView = widgets.DOMWidgetView.extend({
var initialTraces = _.cloneDeep(this.model.get("_data"));
var initialLayout = _.cloneDeep(this.model.get("_layout"));

mathjax_pre();

Plotly.newPlot(that.el, initialTraces, initialLayout).then(
function () {

Expand All@@ -13308,6 +13344,8 @@ var FigureView = widgets.DOMWidgetView.extend({
// ### Send layout delta ###
that._sendLayoutDelta(layout_edit_id);

mathjax_post();

// Wire up plotly event callbacks
that.el.on("plotly_restyle",
function (update) {
Expand DownExpand Up@@ -13813,6 +13851,7 @@ var FigureView = widgets.DOMWidgetView.extend({
msgData.restyle_traces);

restyleData["_doNotReportToPy"] = true;

Plotly.restyle(this.el, restyleData, traceIndexes);

// ### Send trace deltas ###
Expand DownExpand Up@@ -13863,7 +13902,8 @@ var FigureView = widgets.DOMWidgetView.extend({
msgData.style_traces);

style["_doNotReportToPy"] = true;
Plotly.update(this.el, style, layout, traceIndexes);

Plotly.update(this.el, style, layout, traceIndexes);

// ### Send trace deltas ###
// We create an array of deltas corresponding to the updated
Expand Down
2 changes: 1 addition & 1 deletion plotlywidget/static/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.