Skip to content

[webgui] more use of <jsroot-importmap> #18097

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

Merged
merged 6 commits into from
Mar 24, 2025
Merged

[webgui] more use of <jsroot-importmap> #18097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2072326
[http] buitify <--jsroot_importmap--> output
linev Mar 21, 2025
d515fe6
[http] Add several modules to <!--jsroot_importmap-->
linev Mar 21, 2025
eba2e7b
[http] use jsroot importmap in tutorials
linev Mar 21, 2025
04e0551
[webgui] use <!--jsroot_importmap--> in documentation
linev Mar 21, 2025
178b50b
[webgui] use <!--jsroot_importmap--> in all widgets
linev Mar 21, 2025
693ee6b
[jsroot] dev 21/03/2025
linev Mar 21, 2025
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
49 changes: 25 additions & 24 deletions documentation/users-guide/WebDisplay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,32 +86,33 @@ The minimal HTML/JavaScript code, which establish connection with the server, lo
``` {.html}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RWebWindow Example</title>
</head>
<head>
<meta charset="utf-8">
<title>RWebWindow Example</title>
<!--jsroot_importmap-->
</head>
<body>
<div id="main"></div>
<script type="module">
import { connectWebWindow } from './jsrootsys/modules/webwindow.mjs';
connectWebWindow({
receiver: {
onWebsocketOpened(handle) {
console.log('Connected');
handle.send('Init msg from client');
},
onWebsocketMsg(handle, msg) {
console.log('Get message ' + msg);
document.getElementById('main').innerHTML = msg;
},
onWebsocketClosed(handle) {
// when connection closed, close panel as well
if (window) window.close();
}
}
});
</script>
<div id="main"></div>
</body>
<script type="module">
import { connectWebWindow } from 'jsroot/webwindow';
connectWebWindow({
receiver: {
onWebsocketOpened(handle) {
console.log('Connected');
handle.send('Init msg from client');
},
onWebsocketMsg(handle, msg) {
console.log('Get message ' + msg);
document.getElementById('main').innerHTML = msg;
},
onWebsocketClosed(handle) {
// when connection closed, close panel as well
window?.close();
}
}
});
</script>
</html>

```
20 changes: 12 additions & 8 deletions js/build/jsroot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const version_id = 'dev',

/** @summary version date
* @desc Release date in format day/month/year like '14/04/2022' */
version_date = '20/03/2025',
version_date = '21/03/2025',

/** @summary version id and date
* @desc Produced by concatenation of {@link version_id} and {@link version_date}
Expand Down Expand Up @@ -1142,7 +1142,7 @@ const prROOT = 'ROOT.', clTObject = 'TObject', clTNamed = 'TNamed', clTString =
clTPolyLine3D = 'TPolyLine3D', clTPolyMarker3D = 'TPolyMarker3D',
clTAttPad = 'TAttPad', clTPad = 'TPad', clTCanvas = 'TCanvas', clTFrame = 'TFrame', clTAttCanvas = 'TAttCanvas',
clTGaxis = 'TGaxis', clTAttAxis = 'TAttAxis', clTAxis = 'TAxis', clTStyle = 'TStyle',
clTH1 = 'TH1', clTH1I = 'TH1I', clTH1D = 'TH1D', clTH2 = 'TH2', clTH2I = 'TH2I', clTH2F = 'TH2F', clTH3 = 'TH3',
clTH1 = 'TH1', clTH1I = 'TH1I', clTH1F = 'TH1F', clTH1D = 'TH1D', clTH2 = 'TH2', clTH2I = 'TH2I', clTH2F = 'TH2F', clTH2D = 'TH2D', clTH3 = 'TH3',
clTF1 = 'TF1', clTF12 = 'TF12', clTF2 = 'TF2', clTF3 = 'TF3', clTProfile = 'TProfile', clTProfile2D = 'TProfile2D', clTProfile3D = 'TProfile3D',
clTGeoVolume = 'TGeoVolume', clTGeoNode = 'TGeoNode', clTGeoNodeMatrix = 'TGeoNodeMatrix',
nsREX = 'ROOT::Experimental::', nsSVG = 'http://www.w3.org/2000/svg',
Expand Down Expand Up @@ -1994,8 +1994,10 @@ clTGraphPolargram: clTGraphPolargram,
clTGraphTime: clTGraphTime,
clTH1: clTH1,
clTH1D: clTH1D,
clTH1F: clTH1F,
clTH1I: clTH1I,
clTH2: clTH2,
clTH2D: clTH2D,
clTH2F: clTH2F,
clTH2I: clTH2I,
clTH3: clTH3,
Expand Down Expand Up @@ -94504,7 +94506,7 @@ let TGraphPainter$1 = class TGraphPainter extends ObjectPainter {
}

if (!histo) {
histo = this._is_scatter ? createHistogram(clTH2I, 30, 30) : createHistogram(clTH1I, 100);
histo = this._is_scatter ? createHistogram(clTH2F, 30, 30) : createHistogram(clTH1F, 100);
histo.fName = graph.fName + '_h';
histo.fBits |= kNoStats;
this._own_histogram = true;
Expand Down Expand Up @@ -160253,14 +160255,14 @@ let THStackPainter$2 = class THStackPainter extends ObjectPainter {
numhistos = histos ? histos.arr.length : 0;

if (!numhistos) {
const histo = createHistogram(clTH1I, 100);
const histo = createHistogram(clTH1F, 100);
setHistogramTitle(histo, stack.fTitle);
histo.fBits |= kNoStats;
return histo;
}

const h0 = histos.arr[0],
histo = createHistogram((this.options.ndim === 1) ? clTH1I : clTH2I, h0.fXaxis.fNbins, h0.fYaxis.fNbins);
histo = createHistogram((this.options.ndim === 1) ? clTH1F : clTH2F, h0.fXaxis.fNbins, h0.fYaxis.fNbins);
histo.fName = 'axis_hist';
histo.fBits |= kNoStats;
Object.assign(histo.fXaxis, h0.fXaxis);
Expand Down Expand Up @@ -161938,7 +161940,7 @@ class TGraph2DPainter extends ObjectPainter {

this._own_histogram = true; // when histogram created on client side

const histo = createHistogram(clTH2F, graph.fNpx, graph.fNpy);
const histo = createHistogram(clTH2D, graph.fNpx, graph.fNpy);
histo.fName = graph.fName + '_h';
setHistogramTitle(histo, graph.fTitle);
histo.fXaxis.fXmin = uxmin;
Expand Down Expand Up @@ -164440,7 +164442,7 @@ let TMultiGraphPainter$2 = class TMultiGraphPainter extends ObjectPainter {
if (!histo || reset_histo || dummy_histo) {
let xaxis, yaxis;
if (this._3d) {
histo = createHistogram(clTH2I, graphs.arr.length, 10);
histo = createHistogram(clTH2F, graphs.arr.length, 10);
xaxis = histo.fXaxis;
xaxis.fXmin = 0;
xaxis.fXmax = graphs.arr.length;
Expand All @@ -164454,7 +164456,7 @@ let TMultiGraphPainter$2 = class TMultiGraphPainter extends ObjectPainter {
xaxis = histo.fYaxis;
yaxis = histo.fZaxis;
} else {
histo = createHistogram(clTH1I, 10);
histo = createHistogram(clTH1F, 10);
xaxis = histo.fXaxis;
yaxis = histo.fYaxis;
}
Expand Down Expand Up @@ -176813,8 +176815,10 @@ exports.clTGraphPolargram = clTGraphPolargram;
exports.clTGraphTime = clTGraphTime;
exports.clTH1 = clTH1;
exports.clTH1D = clTH1D;
exports.clTH1F = clTH1F;
exports.clTH1I = clTH1I;
exports.clTH2 = clTH2;
exports.clTH2D = clTH2D;
exports.clTH2F = clTH2F;
exports.clTH2I = clTH2I;
exports.clTH3 = clTH3;
Expand Down
8 changes: 1 addition & 7 deletions js/files/draw.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,15 @@
<link rel="shortcut icon" href="jsrootsys/img/RootIcon.ico"/>
<!--jsroot_importmap-->
</head>

<body>
<div id="drawGUI">
loading ...
</div>
</body>

<script type='module'>

import { buildGUI, internals } from 'jsrootsys/modules/gui.mjs';

import { buildGUI, internals } from 'jsroot/gui';
internals.getCachedHierarchy = function() { return "$$$h.json$$$"; }
internals.getCachedObject = function() { return "$$$root.json$$$"; }

buildGUI('drawGUI', 'draw');
</script>

</html>
7 changes: 1 addition & 6 deletions js/files/online.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,14 @@
<link rel="shortcut icon" href="jsrootsys/img/RootIcon.ico"/>
<!--jsroot_importmap-->
</head>

<body>
<div id="onlineGUI">
loading ...
</div>
</body>

<script type="module">
import { buildGUI, internals } from 'jsrootsys/modules/gui.mjs';

import { buildGUI, internals } from 'jsroot/gui';
internals.getCachedHierarchy = function() { return "$$$h.json$$$"; }

buildGUI('onlineGUI', 'online');
</script>

</html>
6 changes: 3 additions & 3 deletions js/modules/core.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const version_id = 'dev',

/** @summary version date
* @desc Release date in format day/month/year like '14/04/2022' */
version_date = '20/03/2025',
version_date = '21/03/2025',

/** @summary version id and date
* @desc Produced by concatenation of {@link version_id} and {@link version_date}
Expand Down Expand Up @@ -1134,7 +1134,7 @@ const prROOT = 'ROOT.', clTObject = 'TObject', clTNamed = 'TNamed', clTString =
clTPolyLine3D = 'TPolyLine3D', clTPolyMarker3D = 'TPolyMarker3D',
clTAttPad = 'TAttPad', clTPad = 'TPad', clTCanvas = 'TCanvas', clTFrame = 'TFrame', clTAttCanvas = 'TAttCanvas',
clTGaxis = 'TGaxis', clTAttAxis = 'TAttAxis', clTAxis = 'TAxis', clTStyle = 'TStyle',
clTH1 = 'TH1', clTH1I = 'TH1I', clTH1D = 'TH1D', clTH2 = 'TH2', clTH2I = 'TH2I', clTH2F = 'TH2F', clTH3 = 'TH3',
clTH1 = 'TH1', clTH1I = 'TH1I', clTH1F = 'TH1F', clTH1D = 'TH1D', clTH2 = 'TH2', clTH2I = 'TH2I', clTH2F = 'TH2F', clTH2D = 'TH2D', clTH3 = 'TH3',
clTF1 = 'TF1', clTF12 = 'TF12', clTF2 = 'TF2', clTF3 = 'TF3', clTProfile = 'TProfile', clTProfile2D = 'TProfile2D', clTProfile3D = 'TProfile3D',
clTGeoVolume = 'TGeoVolume', clTGeoNode = 'TGeoNode', clTGeoNodeMatrix = 'TGeoNodeMatrix',
nsREX = 'ROOT::Experimental::', nsSVG = 'http://www.w3.org/2000/svg',
Expand Down Expand Up @@ -1956,7 +1956,7 @@ export { version_id, version_date, version, source_dir, isNodeJs, isBatchMode, s
clTPave, clTPaveText, clTPavesText, clTPaveStats, clTPaveLabel, clTPaveClass, clTDiamond,
clTLegend, clTLegendEntry, clTPaletteAxis, clTImagePalette, clTText, clTLink, clTLatex, clTMathText, clTAnnotation, clTMultiGraph,
clTColor, clTLine, clTBox, clTPolyLine, clTPad, clTCanvas, clTFrame, clTAttCanvas, clTGaxis,
clTAxis, clTStyle, clTH1, clTH1I, clTH1D, clTH2, clTH2I, clTH2F, clTH3, clTF1, clTF12, clTF2, clTF3,
clTAxis, clTStyle, clTH1, clTH1I, clTH1F, clTH1D, clTH2, clTH2I, clTH2F, clTH2D, clTH3, clTF1, clTF12, clTF2, clTF3,
clTProfile, clTProfile2D, clTProfile3D, clTHStack,
clTGraph, clTGraph2DErrors, clTGraph2DAsymmErrors,
clTGraphPolar, clTGraphPolargram, clTGraphTime, clTCutG,
Expand Down
4 changes: 2 additions & 2 deletions js/modules/hist/TGraph2DPainter.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { settings, createHistogram, setHistogramTitle, kNoZoom,
clTH2F, clTGraph2DErrors, clTGraph2DAsymmErrors, clTPaletteAxis, kNoStats } from '../core.mjs';
clTH2D, clTGraph2DErrors, clTGraph2DAsymmErrors, clTPaletteAxis, kNoStats } from '../core.mjs';
import { buildSvgCurve, DrawOptions } from '../base/BasePainter.mjs';
import { ObjectPainter } from '../base/ObjectPainter.mjs';
import { TH2Painter } from './TH2Painter.mjs';
Expand Down Expand Up @@ -1170,7 +1170,7 @@ class TGraph2DPainter extends ObjectPainter {

this._own_histogram = true; // when histogram created on client side

const histo = createHistogram(clTH2F, graph.fNpx, graph.fNpy);
const histo = createHistogram(clTH2D, graph.fNpx, graph.fNpy);
histo.fName = graph.fName + '_h';
setHistogramTitle(histo, graph.fTitle);
histo.fXaxis.fXmin = uxmin;
Expand Down
4 changes: 2 additions & 2 deletions js/modules/hist2d/TGraphPainter.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { gStyle, BIT, settings, create, createHistogram, setHistogramTitle, isFunc, isStr,
clTPaveStats, clTCutG, clTH1I, clTH2I, clTF1, clTF2, clTPad, kNoZoom, kNoStats } from '../core.mjs';
clTPaveStats, clTCutG, clTH1F, clTH2F, clTF1, clTF2, clTPad, kNoZoom, kNoStats } from '../core.mjs';
import { select as d3_select } from '../d3.mjs';
import { DrawOptions, buildSvgCurve, makeTranslate, addHighlightStyle } from '../base/BasePainter.mjs';
import { ObjectPainter, kAxisNormal } from '../base/ObjectPainter.mjs';
Expand Down Expand Up @@ -333,7 +333,7 @@ class TGraphPainter extends ObjectPainter {
}

if (!histo) {
histo = this._is_scatter ? createHistogram(clTH2I, 30, 30) : createHistogram(clTH1I, 100);
histo = this._is_scatter ? createHistogram(clTH2F, 30, 30) : createHistogram(clTH1F, 100);
histo.fName = graph.fName + '_h';
histo.fBits |= kNoStats;
this._own_histogram = true;
Expand Down
6 changes: 3 additions & 3 deletions js/modules/hist2d/THStackPainter.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { clone, create, createHistogram, setHistogramTitle, BIT,
gStyle, clTH1I, clTH2, clTH2I, clTObjArray, kNoZoom, kNoStats } from '../core.mjs';
gStyle, clTH1F, clTH2, clTH2F, clTObjArray, kNoZoom, kNoStats } from '../core.mjs';
import { DrawOptions } from '../base/BasePainter.mjs';
import { ObjectPainter, EAxisBits } from '../base/ObjectPainter.mjs';
import { TH1Painter } from './TH1Painter.mjs';
Expand Down Expand Up @@ -313,14 +313,14 @@ class THStackPainter extends ObjectPainter {
numhistos = histos ? histos.arr.length : 0;

if (!numhistos) {
const histo = createHistogram(clTH1I, 100);
const histo = createHistogram(clTH1F, 100);
setHistogramTitle(histo, stack.fTitle);
histo.fBits |= kNoStats;
return histo;
}

const h0 = histos.arr[0],
histo = createHistogram((this.options.ndim === 1) ? clTH1I : clTH2I, h0.fXaxis.fNbins, h0.fYaxis.fNbins);
histo = createHistogram((this.options.ndim === 1) ? clTH1F : clTH2F, h0.fXaxis.fNbins, h0.fYaxis.fNbins);
histo.fName = 'axis_hist';
histo.fBits |= kNoStats;
Object.assign(histo.fXaxis, h0.fXaxis);
Expand Down
6 changes: 3 additions & 3 deletions js/modules/hist2d/TMultiGraphPainter.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create, createHistogram, clTH1I, clTH2I, clTObjString, clTHashList, kNoZoom, kNoStats, BIT } from '../core.mjs';
import { create, createHistogram, clTH1F, clTH2F, clTObjString, clTHashList, kNoZoom, kNoStats, BIT } from '../core.mjs';
import { DrawOptions } from '../base/BasePainter.mjs';
import { ObjectPainter } from '../base/ObjectPainter.mjs';
import { FunctionsHandler } from './THistPainter.mjs';
Expand Down Expand Up @@ -175,7 +175,7 @@ class TMultiGraphPainter extends ObjectPainter {
if (!histo || reset_histo || dummy_histo) {
let xaxis, yaxis;
if (this._3d) {
histo = createHistogram(clTH2I, graphs.arr.length, 10);
histo = createHistogram(clTH2F, graphs.arr.length, 10);
xaxis = histo.fXaxis;
xaxis.fXmin = 0;
xaxis.fXmax = graphs.arr.length;
Expand All @@ -189,7 +189,7 @@ class TMultiGraphPainter extends ObjectPainter {
xaxis = histo.fYaxis;
yaxis = histo.fZaxis;
} else {
histo = createHistogram(clTH1I, 10);
histo = createHistogram(clTH1F, 10);
xaxis = histo.fXaxis;
yaxis = histo.fYaxis;
}
Expand Down
4 changes: 2 additions & 2 deletions js/modules/io.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3632,8 +3632,8 @@ class TFile {
* @return {object} - created JavaScript object
* @example
*
* import { httpRequest } from 'http://localhost:8080/jsrootsys/modules/core.mjs';
* import { reconstructObject } from 'http://localhost:8080/jsrootsys/modules/io.mjs';
* import { httpRequest } from 'jsroot/core';
* import { reconstructObject } from 'jsroot/io';
*
* const obj_data = await httpRequest('http://localhost:8080/Files/job1.root/hpx/root.bin', 'buf');
* const si_data = await httpRequest('http://localhost:8080/StreamerInfo/root.bin', 'buf');
Expand Down
22 changes: 16 additions & 6 deletions net/http/src/THttpServer.cxx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,7 +937,8 @@ void THttpServer::ReplaceJSROOTLinks(std::shared_ptr<THttpCallArg> &arg, const s
{"jsroot", "main.mjs"}, {"jsroot/core", "core.mjs"},
{"jsroot/io", "io.mjs"}, {"jsroot/tree", "tree.mjs"},
{"jsroot/draw", "draw.mjs"}, {"jsroot/gui", "gui.mjs"},
{"jsroot/three", "three.mjs"}, {"jsroot/geom", "geom/TGeoPainter.mjs"},
{"jsroot/d3", "d3.mjs"}, {"jsroot/three", "three.mjs"}, {"jsroot/three_addons", "three_addons.mjs"},
{"jsroot/geom", "geom/TGeoPainter.mjs"}, {"jsroot/hpainter", "gui/HierarchyPainter.mjs"},
{"jsroot/webwindow", "webwindow.mjs"}
};

Expand All @@ -953,19 +954,28 @@ void THttpServer::ReplaceJSROOTLinks(std::shared_ptr<THttpCallArg> &arg, const s
}

} else {
TString space_prefix;
auto pspace = p;
while ((--pspace > 0) && (arg->fContent[pspace] == ' ') && (space_prefix.Length() < 20))
space_prefix.Append(" ");

bool first = true;
TString importmap = "<script type=\"importmap\">\n{\n \"imports\": ";
TString importmap = "<script type=\"importmap\">\n";
importmap += space_prefix + "{\n";
importmap += space_prefix + " \"imports\": ";
for (auto &entry : modules) {
importmap.Append(TString::Format("%s\n \"%s\": \"%smodules/%s\"", first ? "{" : ",", entry.first.c_str(), jsroot_prefix.c_str(), entry.second.c_str()));
importmap.Append(TString::Format("%s\n%s \"%s\": \"%smodules/%s\"", first ? "{" : ",", space_prefix.Data(), entry.first.c_str(), jsroot_prefix.c_str(), entry.second.c_str()));
first = false;
}
importmap.Append(TString::Format(",\n \"jsrootsys/\": \"%s\"", jsroot_prefix.c_str()));
importmap.Append(TString::Format(",\n%s \"jsrootsys/\": \"%s\"", space_prefix.Data(), jsroot_prefix.c_str()));

for (auto &entry : fLocations)
if (entry.first != "jsrootsys/")
importmap.Append(TString::Format(",\n \"%s\": \"%s%s\"", entry.first.c_str(), path_prefix.c_str(), entry.first.c_str()));
importmap.Append("\n }\n}\n</script>\n");
importmap.Append(TString::Format(",\n%s \"%s\": \"%s%s\"", space_prefix.Data(), entry.first.c_str(), path_prefix.c_str(), entry.first.c_str()));
importmap.Append("\n");
importmap.Append(space_prefix + " }\n");
importmap.Append(space_prefix + "}\n");
importmap.Append(space_prefix + "</script>\n");

arg->fContent.erase(p, place_holder.length());

Expand Down
5 changes: 2 additions & 3 deletions tutorials/http/custom.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="utf-8">
<title>Custom HTML page for THttpServer</title>

<style>
table, td {
border: 1px solid black;
Expand All @@ -14,7 +13,7 @@
height: 400px;
}
</style>

<!--jsroot_importmap-->
</head>

<body>
Expand Down Expand Up @@ -51,7 +50,7 @@

<script type='module'>

import { httpRequest, redraw, cleanup } from './jsrootsys/modules/main.mjs';
import { httpRequest, redraw, cleanup } from 'jsroot';

document.getElementById('btn_hpx').onclick = function() {
httpRequest("hpx/root.json", 'object')
Expand Down
3 changes: 1 addition & 2 deletions tutorials/http/httptextlog.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
///
/// \author Sergey Linev

import { BasePainter } from '/jsrootsys/modules/main.mjs';
import { addDrawFunc } from '/jsrootsys/modules/draw.mjs';
import { BasePainter, addDrawFunc } from 'jsroot';

/** @summary this function produces url for http request
* @desc here one provides id of last string received with previous request */
Expand Down
Loading
Loading