search

cylynx / motif.gl

Open source, no-code, network visualization tool for graph analysis and investigation
https://demo.cylynx.io
MIT License
123 stars 12 forks source link

showing the wrong graph #192

Closed luizgsbraz closed 3 years ago

luizgsbraz commented 3 years ago

Expected Behavior

After executing the script bellow, when clicking on the maximize button over the second graph (chart2) It should be shown an augmented version of that graph.

from pymotif import Motif
graph1 = Motif(csv_path='graph1.csv', title='Graph 1')      
graph1.state
graph1.plot()
print("click on the tree dots in the left bar ->  click in the maximize button in the right side of chart")
graph2 = Motif(json_path='graph2.json')  
graph2.state
graph2.plot()

Current Behavior

After executing the cells the graphs ARE properly shown!

However, on clicking over the second graph it is shown the first graph instead.

Steps to Reproduce

start jupyter with the pymotif enabled run the script mentioned click on the tree dots on the left of the second graph toshow the maximize button click on the maximize button and it is shown the first graph

Your Environment

$ uname -a
Linux debian 5.10.0-0.bpo.8-amd64 #1 SMP Debian 5.10.46-2~bpo10+1 (2021-07-22) x86_64 GNU/Linux
$ python --version 
Python 3.7.3
$ pip freeze
argcomplete==1.12.3
argon2-cffi==20.1.0
attrs==21.2.0
backcall==0.2.0
bleach==4.0.0
cffi==1.14.6
debugpy==1.4.1
decorator==5.0.9
defusedxml==0.7.1
entrypoints==0.3
importlib-metadata==4.6.4
ipykernel==6.2.0
ipython==7.26.0
ipython-genutils==0.2.0
ipywidgets==7.6.3
jedi==0.18.0
Jinja2==3.0.1
jsonschema==3.2.0
jupyter-client==6.1.12
jupyter-core==4.7.1
jupyterlab-pygments==0.1.2
jupyterlab-widgets==1.0.0
MarkupSafe==2.0.1
matplotlib-inline==0.1.2
mistune==0.8.4
nbclient==0.5.4
nbconvert==6.1.0
nbformat==5.1.3
neo4j==4.3.4
nest-asyncio==1.5.1
networkx==2.6.2
notebook==6.4.3
numpy==1.21.2
packaging==21.0
pandas==1.3.2
pandocfilters==1.4.3
parso==0.8.2
pexpect==4.8.0
pickleshare==0.7.5
pkg_resources==0.0.0
prometheus-client==0.11.0
prompt-toolkit==3.0.19
ptyprocess==0.7.0
pycparser==2.20
Pygments==2.10.0
pymotif==0.0.4
pyparsing==2.4.7
pyrsistent==0.18.0
python-dateutil==2.8.2
pytz==2021.1
pyzmq==22.2.1
Send2Trash==1.8.0
six==1.16.0
terminado==0.11.0
testpath==0.5.0
tornado==6.1
traitlets==5.0.5
typing-extensions==3.10.0.0
wcwidth==0.2.5
webencodings==0.5.1
widgetsnbextension==3.5.1
zipp==3.5.0

Additional Context

$ cat graph1.csv
source,relation,target
COO,reports to,CEO
CFO,reports to,CEO
CTO,reports to,CEO
Head of Accounting,reports to,CFO
Head of Legal,reports to,COO
Director of Marketing,reports to,COO
Director of Sales,reports to,COO
Director of Engineering,reports to,CTO
Marketeer 1,reports to,Director of Marketing
Marketeer 2,reports to,Director of Marketing
Marketeer 3,reports to,Director of Marketing
Salesperson 1,reports to,Director of Sales
Salesperson 2,reports to,Director of Sales
Salesperson 3,reports to,Director of Sales
Engineer 1,reports to,Director of Engineering
Engineer 2,reports to,Director of Engineering
Engineer 3,reports to,Director of Engineering
Lawyer 1,reports to,Head of Legal
Lawyer 2,reports to,Head of Legal
Lawyer 3,reports to,Head of Legal
Accountant 1,reports to,Head of Accounting
Accountant 2,reports to,Head of Accounting
Accountant 3,reports to,Head of Accounting

Also available at: https://medium.com/cylynx/introducing-pymotif-194c74faceae

$ cat graph2.json | jq .
{
  "data": [
    {
      "nodes": [
        {
          "id": "COO",
          "value": "COO",
          "name": "COO"
        },
        {
          "id": "CEO",
          "value": "CEO",
          "name": "CEO"
        },
        {
          "id": "CFO",
          "value": "CFO",
          "name": "CFO"
        },
        {
          "id": "CTO",
          "value": "CTO",
          "name": "CTO"
        },
        {
          "id": "Head of Accounting",
          "value": "Head of Accounting",
          "name": "Head of Accounting"
        },
        {
          "id": "Head of Legal",
          "value": "Head of Legal",
          "name": "Head of Legal"
        },
        {
          "id": "Director of Marketing",
          "value": "Director of Marketing",
          "name": "Director of Marketing"
        },
        {
          "id": "Director of Sales",
          "value": "Director of Sales",
          "name": "Director of Sales"
        },
        {
          "id": "Director of Engineering",
          "value": "Director of Engineering",
          "name": "Director of Engineering"
        },
        {
          "id": "Marketeer 1",
          "value": "Marketeer 1",
          "name": "Marketeer 1"
        },
        {
          "id": "Marketeer 2",
          "value": "Marketeer 2",
          "name": "Marketeer 2"
        },
        {
          "id": "Marketeer 3",
          "value": "Marketeer 3",
          "name": "Marketeer 3"
        },
        {
          "id": "Salesperson 1",
          "value": "Salesperson 1",
          "name": "Salesperson 1"
        },
        {
          "id": "Salesperson 2",
          "value": "Salesperson 2",
          "name": "Salesperson 2"
        },
        {
          "id": "Salesperson 3",
          "value": "Salesperson 3",
          "name": "Salesperson 3"
        },
        {
          "id": "Engineer 1",
          "value": "Engineer 1",
          "name": "Engineer 1"
        },
        {
          "id": "Engineer 2",
          "value": "Engineer 2",
          "name": "Engineer 2"
        },
        {
          "id": "Engineer 3",
          "value": "Engineer 3",
          "name": "Engineer 3"
        },
        {
          "id": "Lawyer 1",
          "value": "Lawyer 1",
          "name": "Lawyer 1"
        },
        {
          "id": "Lawyer 2",
          "value": "Lawyer 2",
          "name": "Lawyer 2"
        },
        {
          "id": "Lawyer 3",
          "value": "Lawyer 3",
          "name": "Lawyer 3"
        },
        {
          "id": "Accountant 1",
          "value": "Accountant 1",
          "name": "Accountant 1"
        },
        {
          "id": "Accountant 2",
          "value": "Accountant 2",
          "name": "Accountant 2"
        },
        {
          "id": "Accountant 3",
          "value": "Accountant 3",
          "name": "Accountant 3"
        }
      ],
      "edges": [
        {
          "relation": "reports to",
          "source": "COO",
          "target": "CEO",
          "key": 0,
          "id": "DOOdJjWwtD"
        },
        {
          "relation": "reports to",
          "source": "CFO",
          "target": "CEO",
          "key": 0,
          "id": "ah4xnNHaK_"
        },
        {
          "relation": "reports to",
          "source": "CTO",
          "target": "CEO",
          "key": 0,
          "id": "QJdLI0zp2P"
        },
        {
          "relation": "reports to",
          "source": "Head of Accounting",
          "target": "CFO",
          "key": 0,
          "id": "EKh12ADpKQ"
        },
        {
          "relation": "reports to",
          "source": "Head of Legal",
          "target": "COO",
          "key": 0,
          "id": "AM3ortDeGg"
        },
        {
          "relation": "reports to",
          "source": "Director of Marketing",
          "target": "COO",
          "key": 0,
          "id": "kPQ_GCEJxE"
        },
        {
          "relation": "reports to",
          "source": "Director of Sales",
          "target": "COO",
          "key": 0,
          "id": "EtN-LsSR58"
        },
        {
          "relation": "reports to",
          "source": "Director of Engineering",
          "target": "CTO",
          "key": 0,
          "id": "Cx2j6x58j_"
        },
        {
          "relation": "reports to",
          "source": "Marketeer 1",
          "target": "Director of Marketing",
          "key": 0,
          "id": "Cua3ITerwE"
        },
        {
          "relation": "reports to",
          "source": "Marketeer 2",
          "target": "Director of Marketing",
          "key": 0,
          "id": "kZgu7mrboh"
        },
        {
          "relation": "reports to",
          "source": "Marketeer 3",
          "target": "Director of Marketing",
          "key": 0,
          "id": "djjCLc8w86"
        },
        {
          "relation": "reports to",
          "source": "Salesperson 1",
          "target": "Director of Sales",
          "key": 0,
          "id": "o--W7DFAtx"
        },
        {
          "relation": "reports to",
          "source": "Salesperson 2",
          "target": "Director of Sales",
          "key": 0,
          "id": "vYhj2DMXwP"
        },
        {
          "relation": "reports to",
          "source": "Salesperson 3",
          "target": "Director of Sales",
          "key": 0,
          "id": "F6xwt0aXcg"
        },
        {
          "relation": "reports to",
          "source": "Engineer 1",
          "target": "Director of Engineering",
          "key": 0,
          "id": "JFlSRZyXt_"
        },
        {
          "relation": "reports to",
          "source": "Engineer 2",
          "target": "Director of Engineering",
          "key": 0,
          "id": "Pgyx_NNPRgz"
        },
        {
          "relation": "reports to",
          "source": "Engineer 3",
          "target": "Director of Engineering",
          "key": 0,
          "id": "75BRbSrYNv3"
        },
        {
          "relation": "reports to",
          "source": "Lawyer 1",
          "target": "Head of Legal",
          "key": 0,
          "id": "3O3r0hUfbKI"
        },
        {
          "relation": "reports to",
          "source": "Lawyer 2",
          "target": "Head of Legal",
          "key": 0,
          "id": "FI20aZJh91G"
        },
        {
          "relation": "reports to",
          "source": "Lawyer 3",
          "target": "Head of Legal",
          "key": 0,
          "id": "2e78tHJN-vR"
        },
        {
          "relation": "reports to",
          "source": "Accountant 1",
          "target": "Head of Accounting",
          "key": 0,
          "id": "qAHJJDzA17X"
        },
        {
          "relation": "reports to",
          "source": "Accountant 2",
          "target": "Head of Accounting",
          "key": 0,
          "id": "ZuIgsfVCzcg"
        },
        {
          "relation": "reports to",
          "source": "Accountant 3",
          "target": "Head of Accounting",
          "key": 0,
          "id": "ZI5J0Rq7egl"
        }
      ],
      "metadata": {
        "title": "The Graph",
        "fields": {
          "nodes": [
            {
              "name": "id",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            },
            {
              "name": "value",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            },
            {
              "name": "name",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            }
          ],
          "edges": [
            {
              "name": "relation",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            },
            {
              "name": "source",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            },
            {
              "name": "target",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            },
            {
              "name": "key",
              "format": "",
              "type": "integer",
              "analyzerType": "INT"
            },
            {
              "name": "id",
              "format": "",
              "type": "string",
              "analyzerType": "STRING"
            }
          ]
        },
        "key": "iPASLXxXk",
        "groupEdges": {
          "toggle": false,
          "availability": false
        }
      }
    }
  ],
  "style": {
    "layout": {
      "type": "radial",
      "unitRadius": 100,
      "linkDistance": 200,
      "focusNode": "COO",
      "preventOverlap": true,
      "strictRadial": true,
      "workerEnabled": true
    },
    "nodeStyle": {
      "color": {
        "id": "fixed",
        "value": "#66c2a5"
      },
      "size": {
        "id": "fixed",
        "value": 20
      }
    },
    "edgeStyle": {
      "width": {
        "id": "fixed",
        "value": 1
      }
    }
  }
}

Detailed Description

It is enough.

Possible Implementation

No suggestions.

luizgsbraz commented 3 years ago

details:

maxbug

timlrx commented 3 years ago

This is because we call requestFullScreen on the container returned by the following line. In the jupyter notebook scenario there will be multiple containers with the same Id, so I think it just takes the first. We can look into scoping the fullscreen specific for that particular container.

timlrx commented 3 years ago

Fixed in #195 and latest version published to npm and pip

luizgsbraz commented 3 years ago

0.0.5 version solved the issue! Thansk @CodesAreHonest and @timlrx !