Coder Social home page Coder Social logo

apcj / arrows Goto Github PK

View Code? Open in Web Editor NEW
349.0 349.0 114.0 346 KB

JavaScript library for drawing diagrams of small graphs, using D3 to generate SVG. Useful for explaining Neo4j graph modelling concepts in presentations and blogs.

Home Page: http://www.apcjones.com/arrows/

JavaScript 46.13% CSS 1.49% HTML 52.38%

arrows's People

Contributors

apcj avatar jexp avatar laeg avatar pmobrien avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

arrows's Issues

Boolean and integer values are exported as strings

Hello,

I'm trying to save boolean and integer values as parameters' values but when cypher is generated, the tool manage them as strings encapsulated into single quotes.

Inside a node, in property text area I am writing:

property: true

and in the export cypher textarea the tool outputs:

{property:'true'}

Recursive rels?

Hi Alistair - this is still one of the best tools out there for creating readable graph schemas -- would it be possible to add support for diagramming recursive relationships?

Thanks

Michael

Import from Markup?

The markup export is really great - seems like a dump of the internal state. Would it be possible to add an import markup so you can resume work on a previous figure?

Squares?

Its awsome!!!
can you allow squares or triangles to be creates?

Import Cypher

In the same way as the Export Cypher, it would be interesting to have a Import Cypher to create nodes and relationships

Maintenance of large graphs using "Arrows"

A large knowledge graph, in our case a medical knowledge graph, may often need small improvements.
An interactive visual interface like "arrows" would be very useful.

  • Navigate in the knowledge graph and select view. Display this selection in arrows mode.
  • Make some interactive adaptations in "arrows" mode. Add nodes and relationships. Modify parameters.
  • Save the modifications back in the database. One user at a time or ideally according to ACID principles.

"Export SVG" errors on Chrome browser

The Arrow Tool is a great visual graph editor, which appears to work fine with Safari, but when I try to use the 'export svg' function with Chrome, I receive the following error message:

error on line 1 at column 17: Attribute xmlns redefined

Licence

Is this repository under the default no-licence-no-right-to-use-anywhere conditions?

Integration of "arrows" ad "neovis", persistent visual properties of logical attributes

At one side "arrows" is very easy to manage parameters of nodes and relationships, like size, thickness, colour, ... although only for individual cases of the current node or edge.
At the other side in "neovis" the value of a parameter can control the appearance of all nodes and relations having this specific parameter or type.
A persistent table should convert logical attributes of a project into the associated visual aspect.
For example if a relation has an attribute meaning high importance this edge should always looks thicker. Or if a node has a type meaning "Problem" this node should always appear in red. The relative priority of this Problem could be represented by the size of these nodes.

Instructions on UI

I went to Michael Hunger's blog for instructions, however perhaps the UI could show them, or include a help option?

  • create new nodes with (+ Node)
  • drag relationships out of the halo of a node
    ** either to an empty space for a new node or centered over an existing one to connect them
  • double click nodes and relationships to edit them, set names and properties (in a `key: “value” syntax)

Importing markup with certain characters breaks UI interactions

If I import the following markup, the UI interactions for dragging nodes breaks. That is, once I click the node, it is stuck to my cursor until I refresh the page.

<ul class="graph-diagram-markup" data-internal-scale="1" data-external-scale="1">
   <li class="node" data-node-id="1" data-x="-2004.7363147735596" data-y="-1026.3858366012573">
      <span class="caption">Dataset File</span>
      <dl class="properties">
         <dt>uuid</dt>
         <dd>"cefc4ef8-3ba5-45e9-b616-b1bf9523ff7e"</dd>
         <dt>templateVersion</dt>
         <dd>"0.1"</dd>
         <dt>creation</dt>
         <dd>"2003-11-24T08:15:00Z"</dd>
         <dt>fileName</dt>
         <dd>"funkystuff.xls"</dd>
         <dt>importStartRow</dt>
         <dd>3</dd>
         <dt>startTimeZone</dt>
         <dd>UTC−06 CST Central Standard Time (North America)</dd>
         <dt>endTimeZone</dt>
         <dd>UTC−05 EST Eastern Standard Time (North America)</dd>
      </dl>
   </li>
</ul>

However, if I strip the special characters from the startTimeZone and endTimeZone props, everything works as expected:

<ul class="graph-diagram-markup" data-internal-scale="1" data-external-scale="1">
   <li class="node" data-node-id="1" data-x="-2004.7363147735596" data-y="-1026.3858366012573">
      <span class="caption">Dataset File</span>
      <dl class="properties">
         <dt>uuid</dt>
         <dd>"cefc4ef8-3ba5-45e9-b616-b1bf9523ff7e"</dd>
         <dt>templateVersion</dt>
         <dd>"0.1"</dd>
         <dt>creation</dt>
         <dd>"2003-11-24T08:15:00Z"</dd>
         <dt>fileName</dt>
         <dd>"funkystuff.xls"</dd>
         <dt>importStartRow</dt>
         <dd>3</dd>
         <dt>startTimeZone</dt>
         <dd>UTC 06 CST Central Standard Time North America</dd>
         <dt>endTimeZone</dt>
         <dd>UTC 05 EST Eastern Standard Time North America</dd>
      </dl>
   </li>
</ul>

Interestingly, if I import the functioning markup, I can add those special characters back in with the graphical editor and everything still works as expected. That seems to imply that something is breaking upon import of markup with those characters.

I'm using Chrome v69.0.3497.100 (current), but I see the same behavior in Safari.

Bugged SVG?

Hi,

The graph is rendered nicely in the browser, but if i download the svg and open it with any program (like inkscape) all nodes are completely filled with black color, making the all labels unreadable

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.