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

Can't implement with plain html #34

Open
AK04 opened this issue Jul 23, 2021 · 4 comments
Open

Can't implement with plain html #34

AK04 opened this issue Jul 23, 2021 · 4 comments

Comments

@AK04
Copy link

AK04 commented Jul 23, 2021 •
edited
Loading

So I am getting this console message:

Uncaught TypeError: Cannot read property 'layoutBase' of undefined
    at Object.<anonymous> (cytoscape-cise.js:1209)
    at __webpack_require__ (cytoscape-cise.js:30)
    at Object.<anonymous> (cytoscape-cise.js:3284)
    at __webpack_require__ (cytoscape-cise.js:30)
    at Object.<anonymous> (cytoscape-cise.js:205)
    at __webpack_require__ (cytoscape-cise.js:30)
    at Object.<anonymous> (cytoscape-cise.js:3242)
    at __webpack_require__ (cytoscape-cise.js:30)
    at cytoscape-cise.js:76
    at cytoscape-cise.js:79

I haven't used the cise in the code I provided because it didnt work at all. So I just implemented a small concentric layout example.

This is my code:

<html>
<head>
    <style>
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
   <script  src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.19.0/cytoscape.min.js"></script>
   <script src="https://unpkg.com/layout-base/layout-base.js"></script>
   <script src="./cytoscape-cise.js"></script>
</head>

<body>

    <div id="cy"></div>

    <script>
        var head = 'a';

        var cy = cytoscape({
            container: document.getElementById('cy'), // container to render in

            elements: [ // list of graph elements to start with
                { // node a
                data: { id: head }
                }
            ],

            style: [ // the stylesheet for the graph
                {
                selector: 'node',
                style: {
                    'background-color': '#667',
                    'label': 'data(id)'
                }
                },

                {
                selector: 'edge',
                style: {
                    'width': 1,
                    'line-color': '#ccc',
                    'target-arrow-color': '#ccc',
                    'target-arrow-shape': 'triangle',
                    'curve-style': 'bezier'
                }
                }
            ],

        });

        for(var i=0; i < 10; ++i) {

            cy.add([
                {
                    data: {id: i} ,
                },
                {
                    data: {
                        id: head + i,
                        source: head,
                        target: i
                    }
                }
            ]);

        }

        cy.layout({
            name: 'concentric',
        }).run();

    </script>

</body>

</html>

Can you please help me with this? :)
@AK04
Copy link
Author

AK04 commented Jul 23, 2021

Hi, so I finally found out how to implement in plain html and javascript. I had to find the proper source for the layout-base js file. This is not clearly included in the readme file. Can I change the readme to add the information to make it work on plain html and give a pull request?

@ugurdogrusoz
Copy link
Contributor

Feel free to make pr s to the unstable branch with detailed explanation why.

@smarek
Copy link

smarek commented Aug 5, 2021

Just to chime in, i found way to properly bundle all dependencies for later usage in plain html

I've posted solution in SO here: https://stackoverflow.com/a/65816119/492624

And the build, per current app.jsx (esbuild), can be downloaded here: https://github.com/smarek/cytoscape.bundle.js/tree/esbuild/dist
Similar solution for index.js (webpack), here: https://github.com/smarek/cytoscape.bundle.js/tree/webpack/dist

And indeed, finding proper source for the layout-base and other dependencies, in appropriate version, is not very easy, so I think this is better, as it provides reproducible builds and uses standard esbuild/webpack build-time checks that everything will be available and working together.

hasanbalci added a commit that referenced this issue Oct 14, 2021
@hasanbalci
Update README.md #34
445a000 
Improve explanation for the usage with plain HTML/JS
@hasanbalci
Copy link
Contributor

I improved the explanation in README that explains the usage with plain HTML/JS in develop branch. It will be available in the master branch with the new release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@smarek @ugurdogrusoz @AK04 @hasanbalci