Skip to content
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

Jump to bottom

Update plotly #1911

Merged
merged 3 commits into from Feb 3, 2021
Merged

Update plotly #1911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9905980
update plotly
pfitzseb Feb 3, 2021
1d0525b
more fixes
pfitzseb Feb 3, 2021
ee51bc7
remove vega autosizing
pfitzseb Feb 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
60 changes: 57 additions & 3 deletions libs/plotly/plotly.min.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 3 additions & 4 deletions scripts/packages/VSCodeServer/src/display.jl
View file
Open in desktop
Expand Up @@ -43,7 +43,8 @@ function display(d::InlineDisplay, m::MIME, x)
else
mime = string(m)
if mime in DISPLAYABLE_MIMES
payload = stringmime(m, x)
# we now all except for `image/...` mime types are not binary
payload = startswith(mime, "image") ? stringmime(m, x) : String(repr(m, x))
sendDisplayMsg(mime, payload)
else
throw(MethodError(display, (d, m, x)))
Expand All @@ -53,16 +54,14 @@ function display(d::InlineDisplay, m::MIME, x)
end

Base.Multimedia.istextmime(::MIME{Symbol("juliavscode/html")}) = true
Base.Multimedia.istextmime(::MIME{Symbol("application/vnd.dataresource+json")}) = true

Base.Multimedia.displayable(d::InlineDisplay, ::MIME{Symbol("application/vnd.dataresource+json")}) = true

function display(d::InlineDisplay, m::MIME{Symbol("application/vnd.dataresource+json")}, x)
payload = stringmime(m, x)
payload = String(repr(m, x))
sendDisplayMsg(string(m), payload)
end


Base.Multimedia.displayable(d::InlineDisplay, ::MIME{Symbol("application/vnd.plotly.v1+json")}) = true

Base.Multimedia.displayable(_::InlineDisplay, mime::MIME) = PLOT_PANE_ENABLED[] && string(mime) in DISPLAYABLE_MIMES
Expand Down
53 changes: 24 additions & 29 deletions src/interactive/plots.ts
View file
Open in desktop
Expand Up @@ -153,17 +153,17 @@ export function displayPlot(params: { kind: string, data: string }) {
const payload = params.data

if (kind === 'image/svg+xml') {
const has_xmlns_attribute = payload.includes('xmlns=');
let plotPaneContent: string;
const has_xmlns_attribute = payload.includes('xmlns=')
let plotPaneContent: string
if (has_xmlns_attribute) {
// the xmlns attribute has to be present for data:image/svg+xml to work (https://stackoverflow.com/questions/18467982)
// encodeURIComponent is needed to replace all special characters from the SVG string
// which could break the HTML
plotPaneContent = wrap_imagelike(`data:image/svg+xml,${encodeURIComponent(payload)}`);
plotPaneContent = wrap_imagelike(`data:image/svg+xml,${encodeURIComponent(payload)}`)
} else {
// otherwise we just show the svg directly as it's not straightforward to scale it
// correctly if it's not in an img tag
plotPaneContent = payload;
plotPaneContent = payload
}

g_currentPlotIndex = g_plots.push(plotPaneContent) - 1
Expand Down Expand Up @@ -196,7 +196,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -231,7 +231,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -266,7 +266,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -299,7 +299,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -332,7 +332,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -365,7 +365,7 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriVegaEmbed}"></script>
</head>
<body>
<div id="plotdiv" style="width:100%;height:100%;"></div>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<style media="screen">
.vega-actions a {
Expand Down Expand Up @@ -396,27 +396,22 @@ export function displayPlot(params: { kind: string, data: string }) {
<script src="${uriPlotly}"></script>
</head>
<body>
<div id="plotdiv" style="position: absolute; width: 100%; height: 100vh; top: 0; left: 0;"></div>
</body>
<script type="text/javascript">
gd = (function() {
var WIDTH_IN_PERCENT_OF_PARENT = 100
var HEIGHT_IN_PERCENT_OF_PARENT = 100;
var gd = Plotly.d3.select('body')
.append('div').attr("id", "plotdiv")
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + '%',
'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
})
.node();
var spec = ${payload};
Plotly.newPlot(gd, spec.data, spec.layout);
window.onresize = function() {
Plotly.Plots.resize(gd);
};
return gd;
})();
function onResize () {
const update = {
width: window.innerWidth,
height: window.innerHeight
}
Plotly.relayout('plotdiv', update)
}
const spec = ${payload};
Plotly.newPlot('plotdiv', spec.data, spec.layout);
if (!(spec.layout.width || spec.layout.height)) {
onResize()
window.addEventListener('resize', onResize);
}
</script>
</html>`
g_currentPlotIndex = g_plots.push(plotPaneContent) - 1
Expand Down