TypeError: funcs.grx is not a function in TH2Painter

mvala commented 1 year ago

I am getting following error

mvala commented 1 year ago

One can reproduce it in file https://eos0.ndmspc.io/eos/ndmspc/scratch/hProjMap.root with object hProjMap

linev commented 1 year ago

Which jsroot version? With master I cannot reproduce the problem

linev commented 1 year ago

Also branches 7.3 and 7.4 are working for me

mvala commented 1 year ago

I am using jsroot bundle, 7.4.2 10/08/2023. I can also reproduce it only time from time randomly.

I don't understand why it is failing at

         res.grx[i] = funcs.grx(x);

https://github.com/root-project/jsroot/blob/master/modules/hist2d/THistPainter.mjs#L2218C36-L2218C36

mvala commented 1 year ago

I do

const rootFile = await openFile(fileName);
        console.log(rootFile)
        if (rootFile) {
            const proj = await rootFile.readObject(projName);
            if (proj) {
                console.log(proj)
                if (ok) ok(proj)
            } else {
                if (fail) fail(rootFile, null)
            }
        }

And later i do redraw() on proj object

linev commented 1 year ago

If you doing update - are you sure that update/redraw not called before original drawing is completed?

In worse case it can happen that drawing and update are interfere with each other

mvala commented 1 year ago

In my case it might happen. Is there a way to block or find out when drawing is completed?

linev commented 1 year ago

You can use promise object which is returned by draw and redraw functions. It resolved when this action is completed.

mvala commented 1 year ago

I do it like this

const painter = await redraw("jsroot_histo", histogram, "colz");

Is it ok?

linev commented 1 year ago

const painter = await redraw("jsroot_histo", histogram, "colz");

It should be ok. But if you configure timer and it may trigger update in-between? I will try to reproduce problem myself.

linev commented 1 year ago

Strange, for me it works with 10 independent udates like:

      import { openFile, redraw } from '../modules/main.mjs';
      let file = await openFile('../../files/hProjMap.root');
      let obj = await file.readObject('hProjMap;1');
      for (let n = 0; n < 10; ++n)
         setInterval(async () => {
            await redraw('drawing', obj, 'colz');
         }, 20);

Actually, there is internal JSROOT protection to avoid concurrency when doing updates. Are you calling any other methods with that HTML element?

mvala commented 1 year ago

I will have a look. It might be that react is changing some html elements when object is added to be drawn. I will try to debug this.

mvala commented 1 year ago

I can reproduce it and here is my output. Hope it helps

linev commented 1 year ago

Can you show exact place in your code where drawing is updated? Is it the same place where first drawing is performed?

linev commented 1 year ago

Can it be that in-between some other object is drawn on this html element?

mvala commented 1 year ago

https://gitlab.com/ndmspc/ndmspc-web-example/-/blob/24-create-hmap-file-via-job/src/components/Ndmspc/Canvas/JsrootCanvas.jsx#L21

linev commented 1 year ago

You are using draw at this place. Is it intentionally?

mvala commented 1 year ago

I was testing it with draw and redraw.

linev commented 1 year ago

But this is the only place where it drawn?

It would be really nice if you can provide content of the histogram which makes error. Can you call toJSON(obj) function from JSROOT and do console.log. I can only suspect that some fancy axis configuration makes problem, but I cannot reproduce it.

I also can create debug branch and put log output in several "dangerous" places. Can you run your code with such debug branch?

mvala commented 1 year ago

I am using jsroot from npm. So if you can make some debug tag in npm, i can use it.

mvala commented 1 year ago

This one is probably better

{"_typename":"TH2D","fUniqueID":0,"fBits":50331656,"fName":"hProjMap","fTitle":"","fLineColor":602,"fLineStyle":1,"fLineWidth":1,"fFillColor":0,"fFillStyle":1001,"fMarkerColor":1,"fMarkerStyle":1,"fMarkerSize":1,"fNcells":144,"fXaxis":{"_typename":"TAxis","fUniqueID":0,"fBits":50331648,"fName":"pt","fTitle":"pt","fNdivisions":510,"fAxisColor":1,"fLabelColor":1,"fLabelFont":42,"fLabelOffset":0.004999999888241291,"fLabelSize":0.03500000014901161,"fTickLength":0.029999999329447746,"fTitleOffset":1,"fTitleSize":0.03500000014901161,"fTitleColor":1,"fTitleFont":42,"fNbins":10,"fXmin":0,"fXmax":10,"fXbins":[0,1,2,3,4,5,6,7,8,9,10],"fFirst":0,"fLast":0,"fBits2":0,"fTimeDisplay":false,"fTimeFormat":"","fLabels":null,"fModLabs":null,"regular":false},"fYaxis":{"_typename":"TAxis","fUniqueID":0,"fBits":50331648,"fName":"mult","fTitle":"mult","fNdivisions":510,"fAxisColor":1,"fLabelColor":1,"fLabelFont":42,"fLabelOffset":0.004999999888241291,"fLabelSize":0.03500000014901161,"fTickLength":0.029999999329447746,"fTitleOffset":0,"fTitleSize":0.03500000014901161,"fTitleColor":1,"fTitleFont":42,"fNbins":10,"fXmin":0,"fXmax":100,"fXbins":[0,10,20,30,40,50,60,70,80,90,100],"fFirst":0,"fLast":0,"fBits2":0,"fTimeDisplay":false,"fTimeFormat":"","fLabels":null,"fModLabs":null,"regular":false},"fZaxis":{"_typename":"TAxis","fUniqueID":0,"fBits":50331648,"fName":"zaxis","fTitle":"","fNdivisions":510,"fAxisColor":1,"fLabelColor":1,"fLabelFont":42,"fLabelOffset":0.004999999888241291,"fLabelSize":0.03500000014901161,"fTickLength":0.029999999329447746,"fTitleOffset":1,"fTitleSize":0.03500000014901161,"fTitleColor":1,"fTitleFont":42,"fNbins":1,"fXmin":0,"fXmax":1,"fXbins":[],"fFirst":0,"fLast":0,"fBits2":0,"fTimeDisplay":false,"fTimeFormat":"","fLabels":null,"fModLabs":null},"fBarOffset":0,"fBarWidth":1000,"fEntries":100,"fTsumw":0,"fTsumw2":0,"fTsumwx":0,"fTsumwx2":0,"fMaximum":-1111,"fMinimum":-1111,"fNormFactor":0,"fContour":[],"fSumw2":[],"fOption":"","fFunctions":{"_typename":"TList","fUniqueID":0,"fBits":50397184,"name":"","arr":[{"fUniqueID":0,"fBits":0,"_typename":"TPaletteAxis","fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fFillColor":0,"fFillStyle":0,"fX1":0,"fX2":1,"fY1":0,"fY2":1,"fX1NDC":0.905,"fY1NDC":0.1,"fX2NDC":0.945,"fY2NDC":0.9,"fBorderSize":1,"fInit":1,"fShadowColor":0,"fCornerRadius":0,"fOption":"brNDC","fName":"TPave","fAxis":{"fUniqueID":0,"fBits":0,"_typename":"TGaxis","fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX1":0,"fX2":1,"fY1":0,"fY2":1,"fTextAngle":0,"fTextSize":0.03500000014901161,"fTextAlign":11,"fTextColor":1,"fTextFont":42,"fChopt":"+","fFunctionName":"","fGridLength":0,"fLabelColor":1,"fLabelFont":42,"fLabelOffset":0.005,"fLabelSize":0.035,"fName":"","fNdiv":12,"fTickSize":0.02410480349344978,"fTimeFormat":"","fTitle":"","fTitleOffset":1,"fTitleSize":0.03500000014901161,"fWmax":100,"fWmin":0,"fLineSyle":1},"fH":null},{"fUniqueID":0,"fBits":0,"_typename":"TPaveStats","fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fFillColor":0,"fFillStyle":1000,"fX1":0,"fX2":1,"fY1":0,"fY2":1,"fX1NDC":0.78,"fY1NDC":0.6950000000000001,"fX2NDC":0.98,"fY2NDC":0.935,"fBorderSize":1,"fInit":1,"fShadowColor":1,"fCornerRadius":0,"fOption":"brNDC","fName":"stats","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLabel":"","fLongest":27,"fMargin":0.05,"fLines":{"name":"TList","arr":[{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"hProjMap","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0},{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"Entries = 100","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0},{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"Mean x = 5.000","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0},{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"Mean y = 50.00","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0},{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"Std Dev x = 2.872","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0},{"fUniqueID":0,"fBits":0,"fName":"","fTitle":"Std Dev y = 28.72","_typename":"TLatex","fTextAngle":0,"fTextSize":0,"fTextAlign":12,"fTextColor":1,"fTextFont":42,"fLimitFactorSize":3,"fOriginSize":0.04,"fLineColor":1,"fLineStyle":1,"fLineWidth":1,"fX":0,"fY":0}],"opt":["","","","","",""],"_typename":"TList"},"fOptFit":0,"fOptStat":1111,"fFitFormat":"","fStatFormat":"","fParent":null}],"opt":["",""]},"fBufferSize":0,"fBuffer":[],"fBinStatErrOpt":0,"fStatOverflows":2,"fScalefactor":1,"fTsumwy":0,"fTsumwy2":0,"fTsumwxy":0,"fArray":[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0]}

mvala commented 1 year ago

But this is the only place where it drawn?

Yes

linev commented 1 year ago

I am using jsroot from npm. So if you can make some debug tag in npm, i can use it.

Can it work without npm? I do not like to put some debug version in official repository.

linev commented 1 year ago

Data in histogram is really very primitive and I see no reason why it can fail. There is one place in code where all graphical functions for axes are created and also one other place where functions are cleaned-up for next update. I want to put debug output there and see if there are any kind of strange effects.

mvala commented 1 year ago

I found out that yes i can. Is this master?

jsroot bundle, dev 8/09/2023

linev commented 1 year ago

By the way - it is not good style to rename y-axis name to "mult". Please keep name "yaxis" as is - in ROOT code there are places where this name directly checked. JSROOT should not be affected.

linev commented 1 year ago

Is this master?

Yes, it is master I build today. I will add several comments into dev branch soon.

mvala commented 1 year ago

By the way - it is not good style to rename y-axis name to "mult". Please keep name "yaxis" as is - in ROOT code there are places where this name directly checked. JSROOT should not be affected.

Ok

mvala commented 1 year ago

Is this master?

Yes, it is master I build today. I will add several comments into dev branch soon.

Ok. Let me know when ready

mvala commented 1 year ago

Also when doing only redraw i see some times

pad drawing is not completed when cleanup is called

Is there a way to find out if i should use draw or redraw?

linev commented 1 year ago

pad drawing is not completed when cleanup is called

It is exactly interference between consequent calls.

Means next draw (or redraw) called before previous is completed. One need to add simple protection from outside - like:

if (globalThis.flag) return;
globalThis.flag = true;
await redraw(...)
globalThis.flag = false;

linev commented 1 year ago

Can you try now dev branch?

I pushed commit with debug output

linev commented 1 year ago

https://github.com/root-project/jsroot/commit/631aa9851d8e7c3fbc124db4da1d131387398023

mvala commented 1 year ago

Sorry for delay, but i was at workshop.

12:53:13.624 <empty string> ProjectionInit.jsx:133:12
12:53:13.625 null MainContent.jsx:101:12
12:53:13.627 <empty string> ProjectionInit.jsx:133:12
12:53:13.628 null MainContent.jsx:101:12
12:53:13.639 WebSocketService rerender WebSocketService.jsx:58:12
12:53:13.640 Zmq2wsSubscriptionService rerender Zmq2wsSubscriptionService.jsx:111:12
12:53:13.665 WebSocketService rerender WebSocketService.jsx:58:12
12:53:13.665 Zmq2wsSubscriptionService rerender Zmq2wsSubscriptionService.jsx:111:12
12:53:13.665 tcp://ndmspc-sample-slsr-6846df5b8c-k4zfv:41000 ProjectionInit.jsx:133:12
12:53:13.665
Object { name: "myAnalysis", description: "", file: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/hMap.root", obj: "hMap", projection: "pt_mult", projections: {…} }
MainContent.jsx:101:12
12:53:13.677 tcp://ndmspc-sample-sls-submitter-service:41000 ProjectionInit.jsx:133:12
12:53:13.677
Object { name: "myAnalysis", description: "", file: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/hMap.root", obj: "hMap", projection: "pt_mult", projections: {…} }
MainContent.jsx:101:12
12:53:13.879 First block is 1024 bytes but browser does not provides access to header - try to read full file 2 localhost:5173:2367:25
12:53:13.924
Object { _typename: "TFile", fEND: 4229, fFullURL: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/pt_mult/hProjMap.root", fURL: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/pt_mult/hProjMap.root", fAcceptRanges: false, fUseStampPar: "stamp=1694688793808", fFileContent: {…}, fMaxRanges: 200, fDirectories: [], fKeys: (2) […], … }
histogram.jsx:28:16
12:53:13.929
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
histogram.jsx:32:24
12:53:13.938
Object { _typename: "TFile", fEND: 4229, fFullURL: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/pt_mult/hProjMap.root", fURL: "https://eos0.ndmspc.io/eos/ndmspc/scratch/ndmspc/demo/phi/pt_mult/hProjMap.root", fAcceptRanges: false, fUseStampPar: "stamp=1694688793746", fFileContent: {…}, fMaxRanges: 200, fDirectories: [], fKeys: (2) […], … }
histogram.jsx:28:16
12:53:13.940
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
histogram.jsx:32:24
12:53:13.970 Hide canvas while geometry too small w=1145 h=0 
JsrootCanvas@http://localhost:5173/src/components/Ndmspc/Canvas/JsrootCanvas.jsx:21:29
div
FlexItem@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:21652:143
div
Flex@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:21642:251
NdmspcCanvas@http://localhost:5173/src/components/Ndmspc/Canvas/NdmspcCanvas.jsx:24:29
div
AutoSizeComponent@http://localhost:5173/src/components/Common/AutoSizeComponent.jsx:19:34
div
GridItem@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:22049:139
div
Grid@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:22030:110
NdmspcWorkspace@http://localhost:5173/src/components/Ndmspc/Workspace/NdmspcWorkspace.jsx:64:9
div
DrawerContentBody@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9752:7
div
div
DrawerMain@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9719:7
DrawerContent@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9732:7
div
Drawer@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9661:9
div
FlexItem@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:21652:143
div
Flex@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:21642:251
NdmspcMainContent@http://localhost:5173/src/components/Ndmspc/Base/MainContent.jsx:26:34
div
DrawerContentBody@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9752:7
div
div
DrawerMain@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9719:7
DrawerContent@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9732:7
div
Drawer@http://localhost:5173/node_modules/.vite/deps/chunk-FNJTLEBD.js?v=989d094a:9661:9
NdmspcAppMain@http://localhost:5173/src/components/Ndmspc/Base/AppMain.jsx:32:47
NdmspcApp
App localhost:5173:2367:25
12:53:13.979 pad drawing is not completed when cleanup is called localhost:5173:2367:25
12:53:13.980 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    cleanFrameDrawings TFramePainter.mjs:2374
    cleanup TFramePainter.mjs:2417
    cleanup TPadPainter.mjs:252
    cleanup TPadPainter.mjs:252
    cleanup TCanvasPainter.mjs:52
    cleanup ObjectPainter.mjs:1619
    cleanup ObjectPainter.mjs:1619
    redraw draw.mjs:488
    drawHisto JsrootCanvas.jsx:68
    JsrootCanvas JsrootCanvas.jsx:23
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
12:53:13.980 cleanup grx in the frame TFramePainter.mjs:2335:14
12:53:13.981 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    cleanFrameDrawings TFramePainter.mjs:2374
    cleanup TFramePainter.mjs:2417
    cleanup ObjectPainter.mjs:1619
    cleanup ObjectPainter.mjs:1619
    redraw draw.mjs:488
    drawHisto JsrootCanvas.jsx:68
    JsrootCanvas JsrootCanvas.jsx:23
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
12:53:13.981 cleanup grx in the frame TFramePainter.mjs:2335:14
12:53:13.983 Hide canvas while geometry too small w=1145 h=0 localhost:5173:2367:25
12:53:13.992 WebSocketService rerender WebSocketService.jsx:58:12
12:53:13.992 Zmq2wsSubscriptionService rerender Zmq2wsSubscriptionService.jsx:111:12
12:53:13.993 failure, should not happen localhost:5173:2367:25
12:53:13.997 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    createXY TFramePainter.mjs:1835
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    redraw draw.mjs:490
    drawHisto JsrootCanvas.jsx:68
    JsrootCanvas JsrootCanvas.jsx:23
    React 13
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
12:53:13.997 cleanup grx in the frame TFramePainter.mjs:2335:14
12:53:13.998 Calling createXY TFramePainter.mjs:1837:14
12:53:13.998 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    createXY TFramePainter.mjs:1919
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    redraw draw.mjs:490
    drawHisto JsrootCanvas.jsx:68
    JsrootCanvas JsrootCanvas.jsx:23
    React 13
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
12:53:13.998 Assign frame.grx function TFramePainter.mjs:1920:14
12:53:14.015 WebSocketService rerender WebSocketService.jsx:58:12
12:53:14.015 Zmq2wsSubscriptionService rerender Zmq2wsSubscriptionService.jsx:111:12
12:53:14.016 Uncaught (in promise) TypeError: funcs.grx is not a function
    prepareDraw THistPainter.mjs:2215
    drawBinsColor TH2Painter.mjs:1117
    draw2DBins TH2Painter.mjs:2443
    pr TH2Painter.mjs:3104
    promise callback*draw2D/< TH2Painter.mjs:3104
    promise callback*draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    promise callback*_drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    redraw draw.mjs:490
    drawHisto JsrootCanvas.jsx:68
    JsrootCanvas JsrootCanvas.jsx:23
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
THistPainter.mjs:2215:28

linev commented 1 year ago

Looks like two parallel drawing happens at the time. These are messages:

pad drawing is not completed when cleanup is called

and

failure, should not happen

Did you try to protect calls with globalThis.flag?

mvala commented 1 year ago

My current source code of drawHisto function : https://gitlab.com/ndmspc/ndmspc-web-example/-/blob/9072ab401919df8ce5c90e43ba72eed2b6d15afa/src/components/Ndmspc/Canvas/JsrootCanvas.jsx#L63

and output (it was drawn 2 times). On first it is ok on second it is not

11:47:07.529 Current histogram: JsrootCanvas.jsx:24:12
11:47:07.529
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
JsrootCanvas.jsx:25:12
11:47:07.530 isDrawing [enter drawHisto]: false JsrootCanvas.jsx:64:12
11:47:07.530 isDrawing [before draw]: false using draw JsrootCanvas.jsx:77:12
11:47:07.531 Current histogram: JsrootCanvas.jsx:24:12
11:47:07.531
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
JsrootCanvas.jsx:25:12
11:47:07.531 isDrawing [enter drawHisto]: false JsrootCanvas.jsx:64:12
11:47:07.531 isDrawing [before draw]: false using draw JsrootCanvas.jsx:77:12
11:47:07.570 console.trace() TFramePainter.mjs:2334:14
    cleanXY TFramePainter.mjs:2334
    createXY TFramePainter.mjs:1835
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:426
    (Async: promise callback)
    draw draw.mjs:426
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 13
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:07.571 console.trace() TFramePainter.mjs:1919:14
    createXY TFramePainter.mjs:1919
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:426
    (Async: promise callback)
    draw draw.mjs:426
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 13
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:07.593 isDrawing [after draw]: false 2 JsrootCanvas.jsx:82:12
11:47:14.576 Current histogram: JsrootCanvas.jsx:24:12
11:47:14.576
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
JsrootCanvas.jsx:25:12
11:47:14.578 isDrawing [enter drawHisto]: false JsrootCanvas.jsx:64:12
11:47:14.578 isDrawing [before draw]: false using draw JsrootCanvas.jsx:77:12
11:47:14.583 Current histogram: JsrootCanvas.jsx:24:12
11:47:14.583
Object { _typename: "TH2D", fUniqueID: 0, fBits: 50331656, TestBit: TestBit(f), InvertBit: InvertBit(f), fName: "hProjMap", fTitle: "", fLineColor: 602, fLineStyle: 1, fLineWidth: 1, … }
JsrootCanvas.jsx:25:12
11:47:14.584 isDrawing [enter drawHisto]: false JsrootCanvas.jsx:64:12
11:47:14.584 isDrawing [before draw]: false using redraw JsrootCanvas.jsx:77:12
11:47:14.585 pad drawing is not completed when cleanup is called localhost:5173:2367:25
11:47:14.585 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    cleanFrameDrawings TFramePainter.mjs:2374
    cleanup TFramePainter.mjs:2417
    cleanup TPadPainter.mjs:252
    cleanup TPadPainter.mjs:252
    cleanup TCanvasPainter.mjs:52
    cleanup ObjectPainter.mjs:1619
    cleanup ObjectPainter.mjs:1619
    redraw draw.mjs:488
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:14.586 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    cleanFrameDrawings TFramePainter.mjs:2374
    cleanup TFramePainter.mjs:2417
    cleanup ObjectPainter.mjs:1619
    cleanup ObjectPainter.mjs:1619
    redraw draw.mjs:488
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:14.595 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    cleanXY TFramePainter.mjs:2334
    createXY TFramePainter.mjs:1835
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:14.596 console.trace() localhost:5173:2367:25
    overrideMethod (index):2367
    createXY TFramePainter.mjs:1919
    drawAxes THistPainter.mjs:1150
    draw2D TH2Painter.mjs:3104
    (Async: promise callback)
    draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    (Async: promise callback)
    _drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
11:47:14.618 isDrawing [after draw]: false JsrootCanvas.jsx:82:12
11:47:14.623 Uncaught (in promise) TypeError: funcs.grx is not a function
    prepareDraw THistPainter.mjs:2215
    drawBinsColor TH2Painter.mjs:1117
    draw2DBins TH2Painter.mjs:2443
    pr TH2Painter.mjs:3104
    promise callback*draw2D/< TH2Painter.mjs:3104
    promise callback*draw2D TH2Painter.mjs:3097
    callDrawFunc TH2Painter.mjs:3132
    _drawHist THistPainter.mjs:2328
    promise callback*_drawHist THistPainter.mjs:2311
    draw TH2Painter.mjs:283
    performDraw draw.mjs:378
    draw draw.mjs:391
    redraw draw.mjs:490
    drawHisto JsrootCanvas.jsx:78
    JsrootCanvas JsrootCanvas.jsx:26
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38
THistPainter.mjs:2215:28

linev commented 1 year ago

But how it can be - I see twice isDrawing [before draw]: false, but only then isDrawing [after draw].

It should not happen.

mvala commented 1 year ago

Let me improve this flag

mvala commented 1 year ago

I found out that react in dev mode with StrictMode is rendering twice component. So it is fixed from my side.

root-project / jsroot

TypeError: funcs.grx is not a function in TH2Painter #263