helikarlab / ccnetviz Goto Github PK

OS: MacOS High Sierra 10.13.1
Browser: Firefox Quantum 58.0.2 (64-bit)

Following I have attached the screenshot of the result I obtained by running the "basic example" mentioned in the /README.md documentation file of the project.

Please note that no nodes and arrows are visible. As a result, there is no distinction between the source and the target nodes.

In addition to it, I tried zooming to the very large level. The exclamation mark (!) was just being visible as a single straight vertical line.

When you download a .png file of the graph, downloaded image gets blurred.It would be a great idea if we can download a .jpg file of it with better quality and resolution.

Having trouble using multi-level graphs for latest build.

For the following code, I am not getting any error for the gibberish 'file paths' supplied into the styling options of the ccNetViz object.

var graph = new ccNetViz(document.getElementById('container'), {
      styles: {
        node: { texture: "ccnetviz/ cabbsd sjdbds kjvsjkjssadb images/node.png", label: { hideSize: 16 } }, // <-- This is just gibberish file path
        edge: { arrow: { texture: "ccnetviz/imagescsnk /arrow.png" } } // <-- Here again a gibberish file path is supplied.
      }});

You can observe in the following screenshot that we are not receiving any error in console for any gibberish file path supplied to those arguments. Simply no nodes and arrows are drawn in the graph.

Possible Solution: Stackoverflow link
Will require discussion on the consequences

The links are broken maybe?

1. Performance benchmark
   -- rendering time, layout computation time for various networks of increasing sizes
   -- see https://github.com/HelikarLab/ccNetViz/tree/master/src/layout for all implemented layouts
   -- see https://github.com/HelikarLab/ccNetViz/tree/master/examples/data for graphs ~( you can even add / create new ones )
2. Feature comparison table that would illustrate how ccNetViz fits in with other network visualization tools (layouts, node/edge coloring etc. )

The performance benchmark would be done for the same net visualization tools that would be compared in the feature comparison table.

Software to compare ccNetViz against:
slim D3 plot of the implemented layouts. (I can implement this)
Cytoscape.JS
SigmaJS
JSNetworkX
other possible softwares

We can have the navbar at the top for better UX and also make it stick at the top or we can add a bottom to top button instead of it.
this will make the site more attractive and user friendly.
please give some reviews for this @saskaale .

I think to generalize the code standard and white spacing we could add prettier. I could do that if needed. Open to suggestions!

Implement color animation and speed control.

Doing benchmark for performance with animation and without animation.

Implement BVH-Tree if needed.

We can add a dark mode option as in it the images would be displayed nicely.

Openning this ticket as a feature request for the refractor of the multilevel graph nodes.

DESIRED BEHAVIOR

• The changing of the levels would be based on the zoom level instead of the click on the node.

POSSIBLE IMPLEMENTATIONS

1. SHOWING/HIDING nodes according to their levels (PREFERED)

   • the nodes would have the integer variable associated to their "level"
     • show only nodes with one level according to the zoom

   CHALLENGES
   - maintain graph layout in the nested levels

2. REDRAWING THE GRAPH (through set() method) according to the zoom level
   CHALLENGES
   - maintaining continuous zoom while REDRAWING (calling set()) the graph with the big subgraph

Create example in the example directory and in the github pages

this example would show the feature of the ability to set custom color and image for the node

user would be able to choose from

• one color picker for the color of the nodes
• list of predefined images for the node

This feature is already implemented in the library ( https://github.com/HelikarLab/ccNetViz/blob/master/examples/label_styling.html#L150-L151 ), just the example is missing

The graphs on the ccNetViz website, along with cell collective are not being rendered properly on the browser. The issue is with hardware acceleration when rendering such graphs. Sometimes the operating systems have low compatibility with certain hardware.

Current Operating System: Linux Mint 19 Tara
GPU: Nvidia GTX 1050

The links are broken i.e they give 500 internal error in the examples of README.md

Since we now have automated testing, it's time to keep the npm packages updated with maybe greenkeeper or dependabot . @saskaale views?

Current implementations of client-side generation of SDF coded character sprite-sheets has some references to old libraries and function that are not required anymore. They were not deleted but simply ignored at run-time. There is a scope for improvement of the code.

Examples:

• PBFs and shelf-pack libraries are not requried anymore.
• Code which utilizes unused libraries can be removed e.g. glyphs.js file
• Naming conventions can be further improved to make process seem less complex and more intuitive

References:

• Code files: /src/texts/sdf/
• Publication: "Felzenszwalb & Huttenlocher; 2012; Distance Transforms of Sampled Functions"
• Code example: mapbox code example

This project currently lacks proper versioning, change logs and releases. This can be easily achieved using standard-version which uses Semantic Versioning and Conventional Commits. The only requirement being that all commits are made with the conventional commits format. I can help set it up with a PR.

Code written in #22 is good enough to make things work. But to make it crisp, easy to understand and more DRY. We can

• use a single worker file (can be named wrapper.worker.js file)
• import every layout computation file in it
• Transfer the switch case statement from layout.js file to wrapper worker file to decide which layout to use

Although this is not the super best technique to do this because there will be two entry files into the layout computation. One will be layout.js and the other will be wrapper.worker.js.

A much more advanced version of doing this would be to even merge those two files into one if it does not make the code super-complicated.

Description

User is supposed to provide the layout name to the library manually like:

graph.set(nodes, edges, "force"); .

Leaving responsibility to the user to provide the correct layout name against in the configuration file could be a bad practice. If the layout name is not correct, library throws an error as below:

Possible fixes:

1. stop the execution of library by throwing a proper error that will guide user to fix the name
2. choose render a chosen default layout
3. We can do both

Corresponding code files: Code file 1 and Code File 2

For the current "styles" configuration of interactivity_hover.html , i.e.

styles: {
        node: { texture: "images/node_bw.png", label: { hideSize: 16 } },
        edge: { arrow: { texture: "images/arrow.png" } },
        edgeHover: {
          color: "rgb(0, 0, 255)"
        },

On hovering over the edges once , all the label disappears , subsequently on moving to a node changes label of two nodes with same text and third node as empty, on changing font module to sdf type ,

styles: {
        node: { texture: "images/node_bw.png", label: { hideSize: 16, font:{ type: "sdf" } } },
        edge: { arrow: { texture: "images/arrow.png" } },
        edgeHover: {
          color: "rgb(0, 0, 255)"
        }, 

it doesn't work.

i had a 2000 nodes and 4000 edges relation chart with force layout; and the edge cover each other.
will ccNetViz offer layout like this https://observablehq.com/@d3/force-directed-tree?collection=@d3/d3-force .
or can you tell me how to get this by force layout.
-from ccNetViz fans its amazing!

write demo example for support download image

there is already implemented function supporting export of base64 image text which you can reuse - https://github.com/HelikarLab/ccNetViz/blob/master/src/ccNetViz.js#L618-L622 . This function needs to be also documented in Readme.md.

And Many nodes display a different label than the actual label.

Create automated script which would make sure that the builded library would be always up the date.

fix all the erroneous example pages

The current code is already verified against a lot of test cases which includes consideration of

• Scale of graph
• Font-families
• Characters
• Font-sizes
• Font-weight
• Font-style
• Alignment

But considering the number of test cases possible, I believe there is still a scope for bugs. If any potential bug is found or even it is under suspicion, Please feel free to give me a mention or even better generate a pull request.

In the above example, most of the labels are not clearer or merge into one another, apart from zooming , magnifying the node label on hover to see it clearly that could be disabled or enabled using the ccNetViz API would be a good feature I guess.

All examples in the README return 500

I could do this if wanted!

Unless the font-size supplied to the algorithm is a multiple of 4, the rendering algorithm is showing weird elongation of labels with multiple horizontal straight line artifacts as shown in the image below.

where the expected behavior was as follows:

A quick fix was applied in the spriteGenrator.js [Link] by rounding off the font-size supplied to the nearest multiple of 4, but the case requires more investigation and a proper fix.

This command would internally

1. run the simple web server ( for example https://www.npmjs.com/package/http-server ) and
2. Open browser window with examples directory ( parameter -o in the http-server package )

additional work required:

• add simple index page into the examples directory whichs allows users to redirect to each example
• document these steps needed for showing in the Readme.md page
  a) download with git clone
  b) yarn install
  c) yarn build
  d) yarn start

Getting the following errors while importing ccNetViz (latest version from the github repo) in ReactJS (Using eslint, create-react-app configuration):

to be done enabling dispatching the layout computation WebWorker thread

Note - This should also enable intermediate nodes.

I have found this Github Library. This seems to be a better and improved version of SDF algorithm we are using.

We have to check the compatability and try incorporating this algorithm in our implementation.

Unlike the graphs produced using cytoscape.js when we try to zoom on a particular element by hovering the mouse over it and using mousewheel to zoom on it. The element pans away and we have to find it by manually panning to it.

This will create problems when we will try to find tiny elements in large graphs. Also, since our library is unique in supporting large graphs really well. This will be an important issue.

For Example (Steps for Reproduction) :

Step 1: Please go to this Official Example of ccNetViz library.

Step 2: Place your mouse pointer over the node number 8 and try zooming to a large extent. You will find that the focus shift aways from the node 8 and we got zoomed to some irrelevant space.

Screenshots:

Before zooming

After zooming

For comparision:

Refer this Cytoscape Example. and place mouse pointer on some node and try zooming. You won't find the viewport loosing its focus on mouse pointer.

The nodes should not be black marks

Firefox version: 61.0.1 (64-bit)

Error Message: "Error: WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of level_base are not all positive."

OS: MacOS

Setup: local php server from cli. Example = sdf.html

Notes: This does not happen if cache is disabled from developer-tools. Not sure about the behavior in production.

Nodes written is hidden

code :

Expected Behavior
It should be not hidden and displayed either on the top or on the bottom.

While attempting to try this example - http://helikarlab.github.io/ccNetViz/examples/interactivity_hover.html I get graph.reflow is not a function.

Assuming an edge-to-edge is nothing but an edge-to-an-intermediate node, Could force-directed-layout then ensure that the edges are spaced proportionally with this assumption in mind? I believe, currently it doesnt.

Webpack v4 is now supported by the closure-webpack-plugin.

We can remove the custom node script in build.js to substitute it with usage of this plugin. This will help clean up the code and make build process possibly more efficient.

Under current configuration, the files in lib, ccNetViz.js and ccNetViz.js.map will be auto formatted. But it should keep in built condition.

Write example for support context menu.

Basic iIde how to make is style div element to look like browser context menu.
Once user would right-click on the graph there would be call for the find() method. for nearby area (let's say 10px) If the area contains the node, look if the node has property for context menu, if yes then show the context menu with specified context.

At the beginning I'd start with the raw html ( string / element ) as parameter to the context menu context.

e.g.:

nodes = [{
label: "node_1
},
{
label: "node_with_context,
contextMenu: HTML_STRING_or_HTML_ELEMENT
},
]

Create a plugin which allow the user to do animate the image on top of the edge.

THE GENERAL IDEA:

• render the moving image on top of the existing edge
• implement in similar was as a edge plugin:
  -https://github.com/HelikarLab/ccNetViz/tree/master/plugins/animation-line

CODING CHALLENGES

• improve the current layer plugin system (Shader) so it would support the insertion of the custom Shader infront or after the existing one
  • https://github.com/HelikarLab/ccNetViz/blob/master/src/layer/index.js#L435-L437

POSSIBLE IMPLEMENTATION
for the discussion

In the documentation file /README.md. Maybe there is a simple spelling error or in the latest build, we have missed the minified compilation of the source code.

Please refer the code below:

README.md

<!-- Basic Example -->

...
... 
<style type="text/css">
    #container {
      width: 500px;
      height: 500px;
    }
  </style>
  <script src="dist/ccNetViz.min.js" ></script>     <!-- ERROR -->
</head>
<body>
  <canvas id="container"/>
...
...