erkal / kite Goto Github PK
View Code? Open in Web Editor NEWAn interactive visualization tool for graph theory
Home Page: https://erkal.github.io/kite
License: MIT License
An interactive visualization tool for graph theory
Home Page: https://erkal.github.io/kite
License: MIT License
Hey Erkal, it was great to see this project - one of the largest/most complex apps I've seen using elm-geometry
! Looks like you've used quite a bit of different functionality from a range of modules too, which is cool too see.
A couple very minor things I noticed when browsing through the code:
Main.elm
, I think fromEdgeMidpointToLabelMidpoint
can be simplified slightly - you should be able to replace Direction2d.toVector |> Vector2d.scaleBy labelDistance
with just Vector2d.withLength labelDistance
. (Direction2d.toVector
is there as an escape hatch but there are usually nicer approaches.)edgeIdsIntersectiongLineSegment
in GraphFile.elm
, it should be possible to replace the case
expression inside the intersects
function with just LineSegment2d.intersectionPoint l1 l2 /= Nothing
.Would love to hear about things that you found difficult or awkward when using the package, or any annoying functionality gaps - either here or as new feature requests on the elm-geometry
repo. Let me know!
Kite allows an optional GitHub access token to be provided to avoid rate limits. this token is passed to the API via a query string, but that approach has been deprecated.
i received an email that said
Please use the Authorization HTTP header instead, as using the
access_token
query parameter is deprecated and will be removed July 1st, 2020.
so we just need to switch to using the Authorization
header.
idea: since there will undoubtedly be graphviz properties that aren't first-class properties in Kite, we could hold these extraneous properties in a Dict String String
. that way, we should be able to import a .dot
file and then export an equivalent .dot
, without losing those properties.
i haven't looked at how feasible this is at an implementation level. maybe it complicates things more than it's worth.
Originally posted by @brandly in #4 (comment)
This bug causes crashes, when vertices overlap.
The crashes can be observed with the developer tools of the browser.
This happens, in particular, when the user clicks without any mouse movement, for example after refreshing the page.
This also causes the loss of user data in local storage, when the user saves after a crash.
Hi @erkal ! The improvements in kite since i first saw it are amazing! what a good work!
I have some questions:
When i scroll with two fingers in mac i can zoom-in-out, but if i scroll with mouse-wheel nothing happens, should it scroll, how could i contribute to make this more seamless?
Vertex/Edge preferences that are slide type (Radius, thickness, Opacity, etc) look like they do not have a number representation, so is difficult to duplicate the settings, could i contribute to provide a number like representation (like in the case of gravity-X-Y)?
I found myself going to Vertex/Edge preferences a lot, but i couldn't find a hotkey to focus, i have to mouse-travel to the property, is there a hotkey?
Can i make a workflow ? maybe with a script? for example, after i made a Vertex, i would like to focus on the Label.
Is documentation somewhere provided? thanks to the meetup in Berlin and the videos i found it easy to work with, but its a complex tool, maybe there're more hidden behaviors i don't know.
The launch app in the Readme file is somehow broken? i just can't do anything with it.
Is there any exporting formats like SVG or something ?
I thinks thats all for now, i've not only been able to communicate complex ideas with kite but i've been able to iterate a lot on those ideas that usually the lack of tooling makes it laborious to refine to, thanks a lot for this project ๐
graphs are created with Kite and serialized/exported in DOT. a DOT file can be imported into a Kite graph i.e. a GraphFile
is produced from DOT
:
kite/src/GraphFile/DotLang/Decode.elm
Lines 15 to 16 in a5c8fd6
i assume this is true currently, but any graph should be able to be exported into DOT and then re-imported, creating the same graph as before.
(graph |> toDot |> fromDot) == graph
however, it seems like DOT produced by other programs, despite describing some graph with nodes and edges, can get imported as any empty graph with no nodes or edges.
to guarantee all exported graphs can be re-imported, fuzz testing is probably a good approach. generate random graphs and make sure that toDot >> fromDot
effectively does nothing.
if we have that guarantee, we can extend the fromDot
functionality to handle a wider variety of Dot
. i think the main issue is that Dot
represents the syntax AST of a DOT file. nodes and edges can be described in a few different ways, and i think fromDot
only looks for the places that toDot
uses.
we've talked about #7 before. i think it's a good goal, but we can't guarantee that fromDot >> toDot
is a no-op. we're definitely not producing the same String
of Dot.
i'm mainly dumping my thoughts out here, because i think it's a really useful improvement, but i don't want to do it yet lol
i'm unable to import large elm project, at least without providing a github token. for example, importing the dependency graph for stil4m/elm-syntax
causes a rate limit error before all the files have been fetched.
currently, the only way to know what happened is by looking in the dev tools. it'd be nice if we reported/displayed errors in this situation.
EDIT: just to confirm, providing a github token gets past the rate limit. the error message should point you towards getting a token of your own.
looks like the error is swept under the rug with Result.withDefault GF.default
Lines 672 to 675 in a5c8fd6
any ideas how to display this feedback? i mention this problem and proposed a "toast" system, which we'd have to build out. maybe that's worth doing. maybe there's something else we should do.
i just pushed an update. i was hoping to import a DOT file produced by another program, and i realized the parser doesn't support the leading strict
keyword!
https://package.elm-lang.org/packages/brandly/elm-dot-lang/1.1.3
Very cool tool! I've been using online graphviz projects like https://dreampuf.github.io/ for many uses, but I would like more interactivity, such as what you provide.
I saw a plan for exporting different formats, but how about import DOT format? Or at least have a DOT editor. I find it easier to create graphs (especially when I want to specify labels/colors/etc) that way. Also, most graph libraries can export to different formats such as DOT (this is true for the elm graph library too - I'm the one who originally added it!).
Thanks for considering this feature, and great work!
judging by the dependency graph, they aren't in use! i'm under the impression this is due to migrating to DOT as the serialization format.
i generally tear these vestiges out, since they will remain in git's history if they're ever needed again. if you're on board, i could send a PR to fix a few of these issues i've opened. have a good one!
Hi,
I'm discovering Kite and it's a really nice tool!
I wanted to use it to visualize my project dependencies (https://github.com/loicknuchel/schema-viz) but I got an error: Repo not found. Is it a private repo? Use an access token!
My project is public and I tried with a token, but without any success.
Do you know what could be the problem ?
hey! i found and fixed a bug in elm-dot-lang
. this affects DotLang.toString
.
p.s. i made a CLI to help with generating those SVG dependency graphs, like we have in this repo!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.