plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
483 stars 68 forks source link

v2.0 has demo target missing #113

Open biskit opened 1 year ago

biskit commented 1 year ago

v1.2.1 has "demo": "cross-env NODE_ENV=development webpack-serve webpack.config.js --open --open-path demo.html"

v2.0 does not. pls add this target for noobs to test your demo out

btw, the demo with "preset" somehow finds position x:0, y:0 to be at middle left than top left corner

alexcjohnson commented 1 year ago

demo went away when we switched from webpack to microbundle in #99 - @akx how hard would it be to restore that functionality?

akx commented 1 year ago

I think just npm build, then open demo.html...

biskit commented 1 year ago

tried that, don't work

console throws logs

akx commented 1 year ago

@biskit Hm – works on my machine (though sorry, it's npm run build – I'm used to yarn build):

git clean -fdx . && npm ci && npm run build && open demo.html

et voilà! Screen Shot 2023-02-10 at 10 16 32

biskit commented 1 year ago

does not work...

did this

bxs:rc2.0 bs$ yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ run-s build build:docgen
yarn run v1.22.19
$ microbundle --globals=react=React,cytoscape=cytoscape,prop-types=PropTypes
Build "react-cytoscapejs" to dist:
       1956 B: react-cytoscape.js.gz
       1763 B: react-cytoscape.js.br
       1530 B: react-cytoscape.modern.js.gz
       1373 B: react-cytoscape.modern.js.br
       1909 B: react-cytoscape.module.js.gz
       1727 B: react-cytoscape.module.js.br
      2.04 kB: react-cytoscape.umd.js.gz
      1.85 kB: react-cytoscape.umd.js.br
✨  Done in 3.82s.
yarn run v1.22.19
$ react-docgen src/component.js --pretty -o dist/react-cytoscape.docgen.json
✨  Done in 0.52s.
✨  Done in 5.21s.
bxs:rc2.0 bs$ yarn build
yarn run v1.22.19
$ microbundle --globals=react=React,cytoscape=cytoscape,prop-types=PropTypes
Build "react-cytoscapejs" to dist:
       1956 B: react-cytoscape.js.gz
       1763 B: react-cytoscape.js.br
       1530 B: react-cytoscape.modern.js.gz
       1373 B: react-cytoscape.modern.js.br
       1909 B: react-cytoscape.module.js.gz
       1727 B: react-cytoscape.module.js.br
      2.04 kB: react-cytoscape.umd.js.gz
      1.85 kB: react-cytoscape.umd.js.br
✨  Done in 3.87s.
bxs:rc2.0 bs$ open demo.html 

got errors in console:


Download the React DevTools for a better development experience: https://fb.me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq [react-dom.development.js:25129:19](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Loading failed for the <script> with source “file:///Users/bs/github.com/rc2.0/node_modules/cytoscape/dist/cytoscape.min.js”. [demo.html:9:1](file:///Users/bs/github.com/rc2.0/demo.html)
Uncaught TypeError: l.default is not a constructor
    componentDidMount component.js:61
    React 17
    <anonymous> demo.html:86
[component.js:61:27](file:///Users/bs/github.com/rc2.0/src/component.js)
Uncaught TypeError: this._cy is undefined
    componentWillUnmount component.js:96
    React 26
    <anonymous> demo.html:86
[component.js:96:4](file:///Users/bs/github.com/rc2.0/src/component.js)
The above error occurred in the <o> component:
    in o (created by TestComponent)
    in TestComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. [react-dom.development.js:19662:15](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Uncaught undefined [react-dom.development.js:11239:9](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
The above error occurred in the <o> component:
    in o (created by TestComponent)
    in TestComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. [react-dom.development.js:19662:15](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Uncaught undefined [react.development.js:2210:11](file:///Users/bs/github.com/rc2.0/node_modules/react/umd/react.development.js)
Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
    <anonymous> file:///Users/bs/github.com/rc2.0/demo.html:81
[demo.html:81:21](file:///Users/bs/github.com/rc2.0/demo.html)

​```
akx commented 1 year ago

@biskit When you run yarn, it will warn you (at least my yarn warns me) that

warning: package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

And indeed, if you build the package with yarn, it currently will cause the errors you're seeing.

Please use npm.

biskit commented 1 year ago

i deleted the lock file did a clean yarn install/build and it still caused errors

however, doing npm install; npm run build; open demo.html works

thanks