search

cayleygraph / cayley

An open-source graph database
https://cayley.io
Apache License 2.0
14.81k stars 1.25k forks source link

Improve Frontend #361

Closed viztastic closed 4 years ago

viztastic commented 8 years ago

Hi @barakmich

Vision: Let's make Cayley more approachable for novices whilst also allowing "experts" to not feel "babied" in the environment.

Some thoughts I wanted the team's buy-in on before submitting PRs:

Front-end Architecture

Basically: Integrate documentation produced in Phase 3 into the UI.

Thoughts? I have availability over the next 3-4 weeks to make this happen (I am currently in between roles).

fselcukcan commented 8 years ago

If it were React.js I would be in, too. Do you know React.js? I can give what I have there.

viztastic commented 8 years ago

Hi @isikfsc,

Very kind of you to offer. Unfortunately I don't! Having said that, I'm sure a pair of front-end hands will come in handy regardless.. we could potentially divvy up some of the theming.

Heck.. we could potentially produce two sets of UI, one in react and one in Angular?!? Allowing devs to build on top of which ever they choose.. maybe overkill, thinking out loud.

fselcukcan commented 8 years ago

Hi @viztastic. nice thoughts, either way I would be glad if I can help. I will follow the progress and see what I can do after that. I use Cayley and it would be an honour to help develop it. See what happens.

barakmich commented 8 years ago

@viztastic Absolutely! I grant you carte blanche on the frontend. As you can tell from the current frontend, I'm much better at building databases than writing interfaces.

Feel free to throw out everything that currently exists. If you need anything other than "static" and "templates", go for it -- another notion (if you're going for Angular, which seems fine) is to just have a "frontend/" folder that gets served at the root.

Also feel free to start with a functionality subset. The visualizations are fun, but toys. Real ones would be nice, but should be better designed, so feel free to drop compatibility there and write something better (perhaps the better thing is worth a design bug)

As for the training content, that would likewise be awesome. I'm (usually) around IRC if you'd like clarification on points, or examples. Also perhaps worth spinning out into their own tracking bugs.

I'd say go ahead and start in exactly these phases.

The most important thing about the UI is that it's a client-side app that only needs to talk to the HTTP API. And if that needs extending (which it may) we can figure that out as we go along. But I think phase one, simply a query editor in a modern webapp sense, would be fantastic.

In other words, I would love the help, and I could probably even wrangle a code review from some of my closer-at-hand Angular devs.

oren commented 8 years ago

Just to get inspired, you should look at the Neo4j interface. I believe they use D3 for visualization. Here is a demo of it: https://www.youtube.com/watch?v=wVkKWODHTHQ

PaulCapestany commented 8 years ago

@viztastic @isikfsc do either of you have any opinions on Vue.js, and whether or not it might also be a good candidate to improve Cayley's frontend?

I've only recently been diving into frontend web stuff again—experimented with a bunch of different frameworks (including React and Angular)... however, Vue has left me the most impressed by far. IMO it doesn't have nearly as high a learning curve, doesn't seem to box you in, and is also still very powerful. I've really been digging it.

RE: state-based views, Vuex is Vue's version of a Flux-inspired application state manager, so that angle would be covered. Also, I've been doing some personal projects integrating Vuex/Vue with PouchDB for easily saving said state to localStorage (and/or syncing server-side as well)..

Again, frontend web stuff isn't necessarily my forte, but figured I'd throw my hat into the ring!

PaulCapestany commented 8 years ago

Oops, probably should have included this in my last post:

Vue.js comparison vs. — Angular | React | Ember | Polymer | Riot

fselcukcan commented 8 years ago

hi @PaulCapestany, though I have no experience in Vue.js, it should not be very difficult. I have just skimmed over the link you have posted a little bit. The thing resolves to use what you know best, unless it is really to the suitable tool for job at hand. So, if someone need to collaborate we should pick one with more or less most common tool to leverage the goods of collaboration. Maybe as viztastic has meant, lets have different front ends if we cannot collaborate due to framework differences, why not?

fselcukcan commented 8 years ago

@oren, Neo4j web client seems nice really. The visualisations of graph seems the most difficult part from my perspective, a good library for that would keep a lot of time, or take the hard way just implement ui components in good shape and color and stickers on them to represent vertices and edges, and so far shy labels in results, and there is also a query shape in current ui.

@viztastic @PaulCapestany what do you think for visual graphs?

viztastic commented 8 years ago

@barakmich @isikfsc Great to hear. I'm going to pull together a schema for how we can develop training content and maybe we can put it out to the Cayley user base to help populate it while we do the front-end work in parallel.

I'll also, as you requested Barak, organise for front-end to be consolidated in a front-end directory.

I will keep you posted.

jcmartins commented 8 years ago

I think Angular is good idea because the grafana project ( www.grafana.org ) have a good performance and they are using angular..

And please use version Angular 2

ehartford commented 8 years ago

OrientDB has a good frontend too (called "Studio") http://orientdb.com/docs/2.0/orientdb-studio.wiki/Home-page.html

oharlem commented 8 years ago

Totally cannot agree on Material: slow & super buggy. Even after going live, being at 1.0.5, they have 1487 issues open. OK, even w/o issues, Material does not provide any specific UX advantages that Cayley would benefit from.

Agree with @ehartford about Orient as one of UX examples. I've been using Orient for more than one year and their Studio, i.e its visualization part is quite decent. While there's definitely a way for improvement, it feels very natural and convenient.

And yes, Angular (version 2) is the way to go.

halflings commented 8 years ago

This page from Neo4j gives some resources that could be useful for query result visualization (like Alchemy.js) : http://neo4j.com/developer/guide-data-visualization/

vsantosu commented 8 years ago

Hello everyone, just a suggestion for the graph visualization. Use Sigma.js instead of D3 or viz.js. It is way more scalable and fast, it also uses webgl when possible so you can manage pretty big graphs(being there done that).

rusenask commented 8 years ago

Sigma.js looks nice!

pinghe commented 8 years ago

+1 sigma.js

PaulCapestany commented 8 years ago

RE: graph visualization libraries, while I don't have any preferences, I figured I should mention VivaGraphJS, which claims to be the "the fastest graph drawing javascript library" (don't have personal experience with it yet though).

Also, here's a link that lists/compares a bunch of the major JS graph visualization libraries out there: http://anvaka.github.io/graph-drawing-libraries/#/all

anvaka commented 8 years ago

Thanks for mentioning VivaGraphJS, @PaulCapestany. It is the fastest library on my tests indeed, but sigma has a huge community behind it and much better documentation. So, definitely consider using it too.

I've just finished rewriting my hobby website which visualizes "customers who bought this also bought" graphs from amazon's product advertising API. I want to chime in and share lessons I learned in hope that it can be useful here.

Website demo

image

It's written in vue.js. A line between product A and B means that customers who bought A also bought B. Try it on mobile too - it should be optimized for tiny touch screens and larger desktops

Behind the scene

The rendering is done by plain SVG code. I'm not using vue to render svg itself, since in my tests nothing beats native DOM operations. That said, vue.js is very open to DOM interaction, so almost effortlessly I integrated it with the graph rendering. I'm using a local message passing mechanism (ngraph.events) for interaction between renderer and a store. The synergy is amazing.

Future consideration

SVG is nice if you have complex UI, similar to the one demoed in the Neo4j video.

It does become major bottleneck when you need to render more than 4k DOM elements. At that point I'd consider switching to WebGL renderer.

Here is a demo how to build one: ngraph.pixel - it uses the same fast layout, but in this case the rendering is done by THREE.js. Out of the box you can expect to render up to 20k data points with ngraph.pixel.

To get to the hundreds of thousands a paradigm shifts is required: Check Code Galaxies for example.

Happy to provide more info and help. Please feel free to ask any questions either here or via my personal email.

robertmeta commented 8 years ago

I am considering moving this to the feature request forum, but due to its length and thoroughness have doubts -- has any actual work taken place on this? Anything happened that makes this a feature implementation and not feature request?

iddan commented 5 years ago

Hey there! I am considering building a nicer frontend React for Cayley. Is it interesting?

dennwc commented 5 years ago

@iddan It's more than interesting! :) We had a prototype built some time ago, but it's unfinished. Feel free to reuse or drop any parts of it, but it may give a good reference for what we wanted for the new UI.

iddan commented 4 years ago

I started working on it: https://github.com/iddan/cayley-ui I use:

dennwc commented 4 years ago

Awesome, thanks @iddan! :)

iddan commented 4 years ago

You can now test the new UI by going to https://cayley-ui.netlify.com/ and run a local Cayley instance.

iddan commented 4 years ago

The web interface is now developed at: https://github.com/cayleygraph/web

dennwc commented 4 years ago

Great! Let's close this one and track issues in the new repo.