Uncaught Error: multiple roots

[AlexisPister]

Hi,

I set up the trrack library fine in my project. However I have some issues in making the trrack-vis library working. I can initiate the visualization and the root node appear, but when I register an action the following way :

provenance.apply(newConstraintAction(newCypher))

with

newConstraintAction = createAction((state, cypher) => {
state.cypher = cypher;
}).setLabel("New constraint");

I get the following error :

Uncaught Error: multiple roots
stratify1 d3-hierarchy.js:753
ProvVis ProvVis.tsx:332
renderWithHooks react-dom.development.js:14985
updateFunctionComponent react-dom.development.js:17356
beginWork react-dom.development.js:19063
callCallback react-dom.development.js:3945
invokeGuardedCallbackDev react-dom.development.js:3994
invokeGuardedCallback react-dom.development.js:4056
beginWork$1 react-dom.development.js:23964
performUnitOfWork react-dom.development.js:22776
workLoopSync react-dom.development.js:22707
renderRootSync react-dom.development.js:22670
performSyncWorkOnRoot react-dom.development.js:22293
(anonymous function) react-dom.development.js:11327
unstable_runWithPriority scheduler.development.js:468
runWithPriority$1 react-dom.development.js:11276
flushSyncCallbackQueueImpl react-dom.development.js:11322
flushSyncCallbackQueue react-dom.development.js:11309
scheduleUpdateOnFiber react-dom.development.js:21893
updateContainer react-dom.development.js:25482
legacyRenderSubtreeIntoContainer react-dom.development.js:26037
render react-dom.development.js:26103
(anonymous function) ProvVisCreator.tsx:43
(anonymous function) ProvenanceCreator.ts:178
executeAction action.ts:115
Reaction@5 index.4ee429df.js:110891
reactionRunner flow.ts:20
(anonymous function) extras.ts:23
runReaction_ reaction.ts:229
runReactionsHelper autorun.ts:63
reactionScheduler1 action.ts:80
runReactions autorun.ts:30
endBatch observable.ts:267
_endAction observablevalue.ts:76
executeAction action.ts:120
index.4ee429df.js:110891
apply ProvenanceCreator.ts:168
apply ProvenanceManager.js:44
addLink AstController.js:80
createNewLink queryGraphPainter.js:167
(anonymous function) GraphCreator.js:154
(anonymous function) d3-selection.js:742
react-dom.development.js:20085The above error occurred in the component: at ProvVis (http://localhost:1234/index.4ee429df.js:115572:24) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
spy.ts:44[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Reaction@5]'
Error: multiple roots at stratify1 (http://localhost:1234/index.4ee429df.js:126025:33) at ProvVis (http://localhost:1234/index.4ee429df.js:115706:26) at renderWithHooks (http://localhost:1234/index.4ee429df.js:147785:24) at updateFunctionComponent (http://localhost:1234/index.4ee429df.js:149674:24) at beginWork (http://localhost:1234/index.4ee429df.js:150792:24) at HTMLUnknownElement.callCallback (http://localhost:1234/index.4ee429df.js:140027:22) at Object.invokeGuardedCallbackDev (http://localhost:1234/index.4ee429df.js:140062:22) at invokeGuardedCallback (http://localhost:1234/index.4ee429df.js:140107:37) at beginWork$1 (http://localhost:1234/index.4ee429df.js:153909:13) at performUnitOfWork (http://localhost:1234/index.4ee429df.js:153165:20) {stack: "Error: multiple roots\n at stratify1 (http://loc…ttp://localhost:1234/index.4ee429df.js:153165:20)", message: "multiple roots"}

I use parcel 2 as a builder and npm. Do you have an idea where this could come from ?

My package.json :

{
"name": "visualqueries",
"version": "1.0.0",
"description": "Social network dynamic query system",
"main": "dist/index.html",
"scripts": {
"test": "cypress open",
"dev": "parcel src/index.html",
"dev2": "parcel src/index.html --dist-dir ./dist-dev --public-url ./",
"build": "parcel build src/index.html",
"build:no-minify": "parcel build src/index.html --no-minify",
"build:no-minify:2": "parcel build src/index.html --no-source-maps --no-scope-hoist && sh build_transform.sh",
"build:no-minify:3": "parcel build src/index.html --public-url ./ --no-source-maps --no-scope-hoist",
"build:no-hoist": "parcel build src/index.html --public-url ./ --no-scope-hoist",
"update": "npm update git+ssh://[email protected]/fekete/cypher-compiler-js.git; npm i git+ssh://[email protected]/fekete/cypher-compiler-js.git",
"parcel-version": "parcel --version"
},
"author": "Alexis Pister",
"license": "ISC",
"dependencies": {
"canvas-lasso": "^1.0.0",
"codemirror": "^5.61.0",
"cypher-compiler-js": "git+ssh://[email protected]/fekete/cypher-compiler-js.git",
"d3": "^6.7.0",
"d3-drag": "^2.0.0",
"d3-selection": "^2.0.0",
"datatables.net": "^1.10.24",
"datatables.net-autofill": "^2.3.9",
"datatables.net-autofill-dt": "^2.3.9",
"datatables.net-buttons": "^1.7.0",
"datatables.net-buttons-dt": "^1.7.1",
"datatables.net-buttons-se": "^1.7.0",
"datatables.net-dt": "^1.10.25",
"datatables.net-jqui": "^1.10.24",
"datatables.net-se": "^1.10.24",
"es6-promise": "^4.2.8",
"flatted": "^3.1.1",
"fomantic-ui": "^2.8.7",
"jquery": "^3.6.0",
"jquery-confirm": "^3.3.4",
"jquery-ui": "^1.12.1",
"jquery-ui-bundle": "^1.12.1-migrate",
"jquery-ui-dist": "^1.12.1",
"jszip": "^3.6.0",
"lasso-canvas-image": "^1.4.2",
"leaflet": "^1.7.1",
"pdfmake": "^0.1.71",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"regenerator-runtime": "^0.13.7",
"sortablejs": "^1.13.0",
"stream": "^0.0.2",
"sweetalert2": "^11.0.18",
"update": "^0.7.4",
"vega": "^5.20.2",
"vega-embed": "^5.1.3",
"vega-lite": "^4.0.0",
"vega-lite-api": "^0.1.0",
"webcola": "^3.4.0"
},
"devDependencies": {
"@visdesignlab/trrack": "^2.0.0-alpha.10",
"@visdesignlab/trrack-vis": "^2.0.0-alpha.12",
"chance": "^1.1.7",
"parcel": "^2.0.0-beta.3.1"
}
}

Thanks