Wrapping Cytoscape.js

[aalexei]

First of all thanks for the awesome justpy framework!

How challenging would it be to create a module wrapping Cytoscape.js (https://js.cytoscape.org)?

It can already be used to some extent with run_javascript calls, but it would be much more useful if there was tighter coupling between the data used by cytoscape and python data structures, so for example you could run layout routines and then save the locations to a database.

There is a Vue wrapper at https://github.com/rcarcasses/vue-cytoscape but I'm not sure how up-to-date that is. I have a lot of experience with python but none with Vue.

[elimintz]

Thank you for using justpy!

I took a look and it would not be difficult to create a component to wrap cytoscape, How to do so with examples is explained here: https://justpy.io/tutorial/advanced_components/

Unfortunately, you need to know a little vue, though as you know JavaScript, if you use the examples as templates it should fine.

If you get stuck, let me know and I will help you debug it.

[sandeep-gh]

I have wrapped chartjs (https://github.com/sandeep-gh/justpy-chartjs). Its functional but might have some corner cases. Take a look. I can contribute as well, if needed.

[aalexei]

I finally got some time again to work on this. Have some very early code in https://github.com/aalexei/justpy-cytoscape
I'm stuck on how do I get data from cytoscape back to the server in python? e.g. I can create a graph, move things around, but I don't know how to collect all the new positions to save them. On cytoscape I can use .json() to grab the data.

Got something sort-of running following the signature_pad example but it seems a bit crazy. I created an event 'onJson' which I add to allowed_events then in the js I have

   methods: {
        graph_create() {
            this.elements = this.$props.jp_props.elements;
            var cy = new cytoscape({
                container: document.getElementById(this.$props.jp_props.id.toString()), // container to render in
                elements: this.$props.jp_props.elements,
                style: this.$props.jp_props.graphstyle,
                layout: this.$props.jp_props.layout
            });
            // Register component
            comp_dict[this.$props.jp_props.id] = cy;
            var events = this.$props.jp_props.events;
            var props = this.$props;
            function onJson() {
                    if (events.includes('onJson')) {
                        var data = cy.json();
                        var e = {
                            'event_type': 'onJson',
                            'id': props.jp_props.id,
                            'class_name': props.jp_props.class_name,
                            'html_tag': props.jp_props.html_tag,
                            'vue_type': props.jp_props.vue_type,
                            'page_id': page_id,
                            'websocket_id': websocket_id,
                            'data': data
                        };
                        send_to_server(e, 'event');
                    }
            };

            cy.onJson = onJson;

Now I can listen for 'onJson' events with something like cyto.on('onJson', echo), and trigger the event with await msg.page.cyto.run_method('onJson()', msg.websocket), but this seems very hackish. Is there a better way?

[aalexei]

Ok based on #240 (comment) and https://github.com/elimintz/justpy/blob/8952a952b533172d99a47c4062251a04c3af297c/justpy/templates/main.html
I've added the methods:

    async def run_method_get_output(self, method, websocket):
        # adapted from https://github.com/elimintz/justpy/discussions/240
        self.req_id += 1
        req_id = f'cyto_{self.req_id}'
        self.futures[req_id]= asyncio.get_running_loop().create_future()

        await websocket.send_json(
            {'type': 'run_javascript',
             'data':f"Object({{value:comp_dict['{self.id}'].{method}}})",
             'request_id': req_id,
             'send':True}
        )

        result = await self.futures[req_id]
        return result['value']

    async def handle_page_event(self, msg):
        # adapted from https://github.com/elimintz/justpy/discussions/240
        if msg.event_type != 'result_ready':
            return False
        if not msg.request_id in self.futures:
            return False
        fut = self.futures[msg.request_id]
        self.futures.pop(msg.request_id)
        if not fut.cancelled():
            fut.set_result(msg.result.copy())
        return True

Evaluating Object({{value:comp_dict['{self.id}'].{method}}}) on the js side is perhaps fragile but I'm not sure how else to do it.

So now the page has to have the code wp.on('result_ready', cyto.handle_page_event) but then any of the javascript methods can be called e.g a=await msg.page.cyto.run_method_get_output('zoom()', msg.websocket) and the output gets captured.

[aalexei]

Any advice/criticism for https://github.com/aalexei/justpy-cytoscape most welcome. I've still to try and wrap some of the events.

[aalexei]

Cytoscape events can now be bound. There are a lot of events so might leave it to the user to populate allowed_events with the ones they are interested in.

[aalexei]

Stuck on how to include Cytoscape plugins like ctxmenu.

Would prefer to be able to add them via objects on the python side so the user doesn't have to go in and write js in the module. One problem is that the configuration should allow for the creation of anonymous js functions for callback actions.

e.g. for ctxmenu might want to define

cyto.cxtmenu({
    selector: 'core',

    commands: [
        { content: 'bg',
        select: function(){
            const edata = {
                'event_type': 'ctxmenu',
                'data': 'bg',
                'id': props.jp_props.id,
                'page_id': page_id,
                'websocket_id': websocket_id
            };
            send_to_server(edata, 'event');
        }}
]});

[aalexei]

As a functioning hack, added a plugins list of strings that get evaled on instantiation.

[sandeep-gh]

Hi @aalexei ,

Great work including this. So far I have tried only embedding cytoscope and this work. Will take a look at events later. Two simple comments: 1) You directory structure could be
justpy-cytoscape/jpcytoscape/
and inside this directory add init.py which imports all relevant functions from jpcytoscape.py.
2) On my system cytoscope.js needs to be placed under components directory. Maybe mention that in README/docs.

[aalexei]

Thanks!

Actually I was following the example in https://github.com/sandeep-gh/justpy-chartjs for the layout.

Would be great to have a standard way to include components for JustPy. At the moment it seems you have to place the python and javascript manually.

If the js components where searched for anywhere under the static/ dir, you could create a python directory module as you suggest at the top level in the git repo. So installing a component is simply cloning the git repo to your static dir, and updates would be easy,.

[aalexei]

@elimintz what license would you prefer for components?

[elimintz]

Every author may choose their own license. It is not for me to decide. Go with what works best for you.

[aalexei]

At some point updates to JustPy seem to have broken this code. The issue is related to getting results back from javascript (see 240). That is, what is the proper way to run a javascript function and get the output in justpy?