Skip to content

Commit 28c042e

Browse files
kMutagenekMutagene
committed
wip mathjax rendering in notebooks
1 parent c5f7108 commit 28c042e

File tree

7 files changed

+69
-35
lines changed

7 files changed

+69
-35
lines changed

‎src/Plotly.NET.Interactive/Plotly.NET.Interactive.fsproj‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
</ItemGroup>
5050

5151
<ItemGroup>
52-
<PackageReference Include="Plotly.NET" Version="4.0.0-preview.2" />
52+
<!--<PackageReference Include="Plotly.NET" Version="4.0.0-preview.2" />-->
53+
<ProjectReference Include="..\Plotly.NET\Plotly.NET.fsproj" />
5354
<PackageReference Include="Microsoft.DotNet.Interactive" Version="1.0.0-beta.23102.2" />
5455
<PackageReference Include="Microsoft.DotNet.Interactive.Formatting" Version="1.0.0-beta.23102.2" />
5556
</ItemGroup>

‎src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -961,7 +961,7 @@ module GenericChartExtensions =
961961
[<Extension>]
962962
member this.WithMathTex(
963963
[<Optional; DefaultParameterValue(true)>] ?AppendTags: bool,
964-
[<Optional; DefaultParameterValue(3)>] ?MathJaxVersion: int
964+
[<Optional; DefaultParameterValue(null)>] ?MathJaxVersion: MathJax
965965
) =
966966
let append =
967967
Option.defaultValue true AppendTags

‎src/Plotly.NET/ChartAPI/Chart.fs‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3207,25 +3207,27 @@ type Chart =
32073207
[<CompiledName("WithMathTex")>]
32083208
static member withMathTex(
32093209
[<Optional; DefaultParameterValue(true)>] ?AppendTags: bool,
3210-
[<Optional; DefaultParameterValue(3)>] ?MathJaxVersion: int
3210+
[<Optional; DefaultParameterValue(null)>] ?MathJaxVersion: MathJax
32113211
) =
3212-
let version = MathJaxVersion |> Option.defaultValue 3
3212+
let version = MathJaxVersion |> Option.defaultValue MathJax.V2
32133213

32143214
let tags =
3215-
if version = 2 then
3216-
Globals.MATHJAX_V2_TAGS
3217-
else
3218-
Globals.MATHJAX_V3_TAGS
3215+
match version with
3216+
| V2 -> Globals.MATHJAX_V2_TAGS
3217+
| V3 -> Globals.MATHJAX_V3_TAGS
3218+
| _ -> []
32193219

32203220
(fun (ch: GenericChart) ->
32213221

32223222
if (AppendTags |> Option.defaultValue true) then
32233223
ch
32243224
|> Chart.withAdditionalHeadTags tags
3225+
|> GenericChart.mapDisplayOptions (DisplayOptions.setMathJaxVersion version)
32253226
|> Chart.withConfigStyle(TypesetMath=true)
32263227
else
32273228
ch
32283229
|> Chart.withHeadTags tags
3230+
|> GenericChart.mapDisplayOptions (DisplayOptions.setMathJaxVersion version)
32293231
|> Chart.withConfigStyle(TypesetMath=true)
32303232
)
32313233

‎src/Plotly.NET/ChartAPI/GenericChart.fs‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,21 @@ type HTML() =
3030
static member CreateChartHTML(
3131
data: string,
3232
layout: string,
33-
config: string
33+
config: string,
34+
mathjax: MathJax
3435
) =
35-
3636
let scriptContent = """
3737
var renderPlotly_[SCRIPTID] = function() {
38-
var fsharpPlotlyRequire = requirejs.config({context:'fsharp-plotly',paths:{plotly:'https://cdn.plot.ly/plotly-[PLOTLYJS_VERSION].min'}}) || require;
39-
fsharpPlotlyRequire(['plotly'], function(Plotly) {
38+
var fsharpPlotlyRequire = requirejs.config(
39+
{
40+
context:'fsharp-plotly',
41+
paths: [REQUIRE_PATHS]
42+
}) || require;
43+
fsharpPlotlyRequire([REQUIRE_LIST], function(Plotly) {
4044
var data = [DATA];
4145
var layout = [LAYOUT];
4246
var config = [CONFIG];
47+
[MATHJAX_CONFIG]
4348
Plotly.newPlot('[ID]', data, layout, config);
4449
});
4550
};
@@ -57,12 +62,23 @@ else {
5762
"""
5863
let guid = Guid.NewGuid().ToString()
5964

65+
let require_list, require_paths, mathjax_config =
66+
match mathjax with
67+
| V2 -> """['plotly', 'mathjax']""", $"{{plotly: '{Globals.PLOTLY_REQUIRE_CDN}', mathjax: '{Globals.MATHJAX_V2_REQUIRE_CDN}'}}", Globals.MATHJAX_V2_CONFIG
68+
// found no way on how to load mathjax v3 using requirejs
69+
| V3 -> """['plotly', 'mathjax']""", $"{{plotly: '{Globals.PLOTLY_REQUIRE_CDN}', mathjax: '{Globals.MATHJAX_V3_REQUIRE_CDN}'}}", Globals.MATHJAX_V3_CONFIG
70+
| _ -> """['plotly']""", $"{{plotly: {Globals.PLOTLY_REQUIRE_CDN}}}", ""
71+
72+
6073
[
6174
div [_id guid] [comment "Plotly chart will be drawn inside this DIV"]
6275
script [_type "text/javascript"] [
6376
rawText (
6477
scriptContent
6578
.Replace("[PLOTLYJS_VERSION]",Globals.PLOTLYJS_VERSION)
79+
.Replace("[REQUIRE_PATHS]",require_paths)
80+
.Replace("[REQUIRE_LIST]",require_list)
81+
.Replace("[MATHJAX_CONFIG]",mathjax_config)
6682
.Replace("[SCRIPTID]",guid.Replace("-",""))
6783
.Replace("[ID]",guid)
6884
.Replace("[DATA]",data)
@@ -308,7 +324,8 @@ module GenericChart =
308324
yield! HTML.CreateChartHTML(
309325
tracesJson,
310326
layoutJson,
311-
configJson
327+
configJson,
328+
displayOpts.MathJaxVersion
312329
)
313330
yield! displayOpts.Description
314331
]
@@ -339,7 +356,8 @@ module GenericChart =
339356
chart = HTML.CreateChartHTML(
340357
tracesJson,
341358
layoutJson,
342-
configJson
359+
configJson,
360+
displayOpts.MathJaxVersion
343361
),
344362
AdditionalHeadTags = displayOpts.AdditionalHeadTags,
345363
Description = displayOpts.Description

‎src/Plotly.NET/DisplayOptions/DisplayOptions.fs‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,25 @@ open DynamicObj
44
open System.Runtime.InteropServices
55
open Giraffe.ViewEngine
66

7+
type MathJax =
8+
| V2
9+
| V3
10+
| NoMathJax
11+
712
type DisplayOptions = {
813
AdditionalHeadTags: XmlNode list
914
Description: XmlNode list
15+
MathJaxVersion: MathJax
1016
} with
1117
static member Create(
1218
[<Optional; DefaultParameterValue(null)>] ?AdditionalHeadTags: XmlNode list,
13-
[<Optional; DefaultParameterValue(null)>] ?Description: XmlNode list
19+
[<Optional; DefaultParameterValue(null)>] ?Description: XmlNode list,
20+
[<Optional; DefaultParameterValue(null)>] ?MathJaxVersion: MathJax
1421
) =
1522
{
1623
AdditionalHeadTags = AdditionalHeadTags |> Option.defaultValue []
1724
Description = Description |> Option.defaultValue []
25+
MathJaxVersion = MathJaxVersion |> Option.defaultValue MathJax.V2
1826
}
1927

2028
static member addAdditionalHeadTags (additionalHeadTags: XmlNode list) (displayOpts:DisplayOptions) =
@@ -28,3 +36,9 @@ type DisplayOptions = {
2836
displayOpts with
2937
Description = List.append displayOpts.Description description
3038
}
39+
40+
static member setMathJaxVersion (version: MathJax) (displayOpts:DisplayOptions) =
41+
{
42+
displayOpts with
43+
MathJaxVersion = version
44+
}

‎src/Plotly.NET/Globals.fs‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,33 @@ open Giraffe.ViewEngine
77

88
/// The plotly js version loaded from cdn in rendered html docs
99
let [<Literal>] PLOTLYJS_VERSION = "2.18.1"
10+
let PLOTLY_CDN = $"""https://cdn.plot.ly/plotly-{PLOTLYJS_VERSION}.min.js"""
11+
let PLOTLY_REQUIRE_CDN = $"""https://cdn.plot.ly/plotly-{PLOTLYJS_VERSION}.min"""
1012

1113
///
1214
let internal JSON_CONFIG =
1315
JsonSerializerSettings(
1416
ReferenceLoopHandling = ReferenceLoopHandling.Serialize
1517
)
1618

19+
let [<Literal>] MATHJAX_V2_CDN = """https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1"""
20+
let [<Literal>] MATHJAX_V2_REQUIRE_CDN = """https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1"""
21+
let [<Literal>] MATHJAX_V2_CONFIG = """MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});"""
22+
23+
let [<Literal>] MATHJAX_V3_CDN = """https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-svg.js"""
24+
let [<Literal>] MATHJAX_V3_REQUIRE_CDN = """https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-svg"""
25+
let [<Literal>] MATHJAX_V3_CONFIG = """MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};"""
26+
1727
/// the mathjax v2 tags to add to html docs for rendering latex
1828
let internal MATHJAX_V2_TAGS =
1929
[
20-
script [_type "text/x-mathjax-config;executed=true"] [rawText """MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});"""]
21-
script [_type "text/javascript"; _src """https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1"""] []
30+
script [_type "text/x-mathjax-config;executed=true"] [rawText MATHJAX_V2_CONFIG]
31+
script [_type "text/javascript"; _src MATHJAX_V2_CDN] []
2232
]
2333

2434
/// the mathjax v3 tags to add to html docs for rendering latex
2535
let internal MATHJAX_V3_TAGS =
2636
[
27-
script [] [rawText """MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};"""]
28-
script [_src """https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-svg.js"""] []
37+
script [] [rawText MATHJAX_V3_CONFIG]
38+
script [_src MATHJAX_V3_CDN] []
2939
]

‎tests/Plotly.NET.Tests.FSharpConsole/Program.fs‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,12 @@ let from whom =
1515
[<EntryPoint>]
1616
let main argv =
1717
[
18-
Chart.Line([1,2; 3,4])
19-
|> Chart.withAxisAnchor(Y=1)
20-
Chart.Spline([100,200; 300,400])
21-
|> Chart.withAxisAnchor(Y=2)
18+
Chart.Point([(1.,2.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$")
19+
Chart.Point([(2.,4.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$")
2220
]
2321
|> Chart.combine
24-
|> Chart.withYAxis (LinearAxis.init(), Id = StyleParam.SubPlotId.YAxis 1)
25-
|> Chart.withYAxis (LinearAxis.init(Anchor = StyleParam.LinearAxisId.Free, Shift = -50, ShowLine = true), Id = StyleParam.SubPlotId.YAxis 2)
26-
|> Chart.withDescription [
27-
h1 [] [str "now look at this!"]
28-
ul [] [
29-
li [] [str "this"]
30-
li [] [str "is"]
31-
li [] [str "a"]
32-
li [] [img [_src "https://images.deepai.org/machine-learning-models/0c7ba850aa2443d7b40f9a45d9c86d3f/text2imgthumb.jpeg"]]
33-
]
34-
]
35-
|> Chart.withSize(1000,1000)
22+
|> Chart.withTitle @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$"
23+
// include mathtex tags in <head>. pass true to append these scripts, false to ONLY include MathTeX.
24+
|> Chart.withMathTex(true)
3625
|> Chart.show
3726
0

0 commit comments

Comments
 (0)