#Graphviz react code
Unfortunately, we were affected by cognitive bias: old code is bad code. Especially if it was written by tech giants such as AT&T Labs (the place where Unix and the C and C++ languages were born). Graphcool, Neo4j) and it was featured on GraphQL Europe, so not only 1600 stars confirm that :) Lessons learned “If I have seen a little further it is by standing on the shoulders of giants.” - Issac Newtonĭon’t judge code by it’s age. UPDATE: since the time article was submitted, the project has been adopted by the companies in the field (e.g. And yes, the Graphviz code is so huge we split it into a separate 2MB file. Yes, we packed all this mess as a NOT PURE ? React/Redux component. Yes, we wrote a few hundred lines of ugly DOM manipulations. Much better! And less than a day of coding ?.Īdding a bit of color, a logo, loading animation, a few more useful features and here we are: The final result What if we were to take the output from Graphviz (which is just plain SVG) and sprinkle it with some CSS and JS? A little more research made me give up: apparently, visualizing graphs is rocket-science (even when you have a Master’s degree in applied math).Īnd then it dawned on us. Zero success :(Īs a last resort, I even tried to hack cytoscape.js to produce a readable result. We even bothered a few SVG gurus we knew. It appeared that there is no way for cytoscape.js to have edges that don’t cross nodes. See for yourself: Visualised graph using Cytoscape.jsĪnd that was without even displaying all that many details on the graph! What a mess!Īlthough the code was much cleaner, the end-result was much worse compared to the original tool. What a great result!Īfter a week of intensive coding, the result was less than satisfying. It was written in the lovely JavaScript and even supported running CSS-like selectors on the graph itself. How could we use something from 2000? We are hipsters for God’s sake! ReactJS, D3, webpack, TypeScript, PostCSS - that is what we work with! Not with tools written in old-fashioned C ?.Īfter a little research, we found the best library for the task- Cytoscape.js.
After some research, an interesting tool caught our eyes - GraphQL Visualizer. My friend and I (we call ourselves -s) were looking for an idea for a project around GraphQL (a query language for APIs developed by Facebook). We used TypeScript, React, Redux, webpack and even PostCSS but this is NOT yet another article about them. People loved the slick UI, interactive features, and animations. Surprisingly, it got to the first page of Hacker News and GitHub trending and gained 1,000+ stars in the first few days. By Roman Hotsiy How we got 1,500 GitHub stars by mixing time-tested technology with a fresh UI Photo credit: Recently we released an open-source tool called GraphQL Voyager.
0 kommentar(er)
