I am trying to build a graphql schema visualizer using something other than viz.js (the library is too large and adds 1MB to the bundle). I was recommended webcola and it seems to be a very powerful library.
I have gotten to a point where the necessary elements are being rendered and linked correctly. My next step is to get the layout right. I would like to do something similar to graphql-voyager (uses viz.js).
Here is a codesandbox of what I have so far:
graphql-diagram
EDIT: My question is, how could I lay out what I have similarly to graphql-voyager? I would like help setting the right constraints and applying whichever algorithm necessary to position the nodes and routing the edges accordingly.
GraphQL Voyager author here :)
Before switching to viz.js we tried lots of other possible solutions for almost a month. Here is the article about our journey: https://medium.freecodecamp.org/how-we-got-1-500-github-stars-by-mixing-time-tested-technology-with-a-fresh-ui-b310551cba22
TL;DR; Graph drawing is rocket-science
Moreover, since Voyager release (2 years ago), we evaluated even more libraries with the exact same result.
As a side project, we are working on the Graphviz fork aggressively shrunk to just meet Voyager requirements. Our end goal is to rewrite the required parts in pure JS and embed it directly into Voyager.
ATM it's in early PoC stage and we are not ready to release it yet.
Related
I have created a slickgrid hierarchy that has only 2 levels. The implementation of the hierarchy follow example 5 (https://6pac.github.io/SlickGrid/examples/example5-collapsing.html). I am using the following fork - http://6pac.github.io/SlickGrid. I want to sort only by the first level and have the children be in the same order. I tried adding the sortable property to the column, but that did not do anything. Any pointers on how to do this, I have no idea where to begin. As always many thanks in advance.
There's couple thing to note about that example you are referencing.
You're on your own in regards to sorting the data in that Example, in short it means you'll have to add your own sorting functions and you'll end up with have to create a lot recursive functions (because hierarchical data is only sortable through recursion)
It would be better to have pre-built to do that kind of work and since I needed that as well, I started a feature change that will eventually be merged into the 6pac/SlickGrid fork, I briefly talk about it in this issue post where you can see an animated gif. But never got time to finish it and I'm also waiting for someone's help to finish it. Unless we merge it has is
The feature I started is this Example from my fork which will eventually be merged. You could use that code and it should work, but you would also require a new SlickGrid Plugin that we created plugins/slick.treeData.js with some helpers for the recursion stuff (remember that sorting tree data with hierarchy requires you to use recursion, fun time that is... if you like pulling your hair)
Or the final option would be to use my other lib Slickgrid-Universal which is a wrapper on top of SlickGrid (so it uses the 6pac/SlickGrid fork and is a dependency). This new lib that I created is framework agnostic (it could be used in any framework) and the sample is written in plain TypeScript (or JavaScript is you wish), there's 2 sample for hierarchical dataset Tree Data with parentId references and Tree Data with hierarchical dataset
what I wanted to add eventually in my lib is to support the SlickGrid built-in Aggregators but never got time to finish it (that is actually the same thing blocking option 2 that I wrote on top).
If you're using other frameworks, I also created 2 other libs Angular-Slickgrid and Aurelia-Slickgrid which have the same feature set as option 3.
So pick your choice from the list, it's not an easy one to work with but these are the current options, obviously the option 1 is the hardest since option 2-3 basically means that I did the work of option 1 already.
The option 2 can be seen in this animated gif
According to the docs I should be able to do this ...
$("#tree").data("kendoTreeView").expand(".k-item");
Great if i want to expand everything, but what if i only want to expand nodes where the property "expanded" in my model items is set to true?
Is there a way i can query the tree based on something in the model then perform an action on all results?
The real answer here is quite long, the short version being as with everything kendo, spend hours with support to be given half the solution and told to write the rest yourself.
I got round this problem by using another library (jslinq) to query the model data.
This is yet another frustrating issue with kendo that really should at the very least be offered as a core part of the heirarchy data source at some basic level (essentially an incomplete implementation).
I am currently using Neo4j Python rest client and I would like to visualise the graph and be able to amend it, add new nodes relationships etc. Also I would like the changes in the neo4j database as well. Is that possible? Also can self-loops be visualised? I have read about D3.js and Neoclipse and Gephi in http://www.neo4j.org/develop/visualize but I am not sure which one to use.
Thanks in advance.
You can manipulate the graph in Neo4J using Cypher, in particular using a the REST API.
Any kind of tool that allows you to interface with Cypher is potentially able to do what you are asking: it is a matter to combine some Cypher queries with the GUI.
Said that, create the right visualization for what you are doing might be tricky and general approach might no satisfy your needs: while Neoclipse can let you manipulate nodes and links in Neo4J (for free) you might want to do in a particular way (for example restricting the choice of editing or the field/properties to be changed).
Linkurious offers a solution to do that as well, but it's a commercial license.
Other solutions such KeyLines, d3.js, sigmaJS let you personalize that experience: note that they will require to create the interface yourself, but the result will be much better in case of a specific product IMHO.
So value your time and requirements and go with the proper solution.
For more tools have a look at the Neo4J visualization page: http://www.neo4j.org/develop/visualize
About self loops:
that's a tricky bit and there is not a right way to do those - imagine a scenario with hunders of multi-selfloops.
Personally I would recommend to NOT draw them on the chart as link/edges, while representing them in some other ways: es. glyphs, notes, bubbles on the node...
I believe the only tool that allows this today is Neoclipse, but I don't think it's updated to use the Labels and Indexing features released in 2.0.
As such, your best bet will be using the Neo4j Browser to visualize and Cypher to mutate your graph. If you want richer functionality and want a fun project to hack on, it shouldn't be super hard to build a basic visualization for Neo that allows mutating the graph. I would have a look at sigma.js: http://linkurio.us/sigma-js-1-0-next-gen-graph-drawing-lib-web/
We would like to generate a PDF document for a single page. While only this link talks about this subject (and the other discussion linked from there), the information given is quite slim.
Could anybody share any success stories made so far including source-code?
Has someone succeeded in using wkhtmltopdf?
(we plan to use Magnolia 4.5.6)
After evaluating both Aspose.pdf (commercial product) and iText, we went to use LaTex. We had quite some specific requirements (e.g. two column layout with footnotes, very large table), which were not possible with the two above mentioned products.
We are very happy with this solution, but there are some things to be noted: first and foremost you leave the JVM, and second LaTex is itself another macro language to be learned. The quality of the outcome is very good, although, and we are very happy with that solution.
wkhtmltopdf is used in another project, and the outcome is also good, for more straight forward formatting.
I need two paginations on one page, is it possible to do this with codeigniter?!? Of course they must operate independently of one another.
Yes and no. If you want two different pagination visuals (customized renderings of the library) then sure. The problem you'll run into is by default the pagination library will pull the current page out of your $ci->uri->segments() list automatically to determine which page to mark as "active".
I do not know of a way to explicitly override this. Perhaps if you made a MY_Pagination that took an additional $config value for current page you could get it to behave like that. I haven't looked at the library's code in a while so you'd have to do some digging.
Honestly though, I'd suggest you build your own, it's not incredibly hard to do some simple math to determine what numbers to link.
Also you'll run into issues with CI's Pagination Library if you want the "current page" part to be NOT the last segment in your url. This may have been fixed lately but last time I looked it was the stop-gap for me using the library all together.
Bottom Line Invest the time in making your own if you want more than it's basic functionality, it's simple enough, just make yours reusable if you can.