search

neo4j-contrib / neo4j-guides

Tooling to create Neo4j Browser Guides from AsciiDoc Content
33 stars 30 forks source link

Grid layout in asciidoc Neo4j guides #8

Closed dhimmel closed 8 years ago

dhimmel commented 8 years ago

I've made a little guide for Hetionet v1.0. Here is the asciidoc:

== Hetionet in Neo4j

=== Hetionet v1.0

Hetionet is a network of biology, disease, and pharmacology. Knowledge from millions of biomedical studies over the last half century have been encoded into a single hetnet. Version 1.0 contains 47,031 nodes of 11 types and 2,250,197 relationships of 24 types.

We created link:https://github.com/dhimmel/hetionet[Hetionet] v1.0 for link:https://thinklab.com/p/rephetio[Project Rephetio] — where we systematically looked at why drugs work and predicted new uses for existing drugs.

=== Neo4j

Neo4j is a database designed for hetnets (graphs with multiple node or relationship types). You're currently interacting with Hetionet through the Neo4j Browser, which provides a web interface to the database. This is a read-only instance, so you can't modify the network. However, you can run query and and explore the network. See the next slide for an example query.

=== Metagraph

The metagraph shows the data model (schema) for Hetionet v1.0.

image::https://github.com/dhimmel/rephetio/raw/8881d5d45bff2ca9ea6cadca43ace6c5e8022ea9/figure/metagraph.png[float=right]

== Random relationships

The following query retrieves a random relationship of each type. The query goes through every relationship and thus may take several seconds.

//setup
[source,cypher]
----
MATCH ()-[r]->()
WITH type(r) AS rel_type, collect(r) AS rels
WITH rel_type, rels, toInt(rand() * size(rels)) AS idx
RETURN rel_type, rels[idx] AS example
----

== Style

Execute this command to load the hetionet style. Once the style is loaded, the node coloring in the browser will match metagraph from earlier in this guide. This command only needs to be run once per web browser.

//setup
[source]
----
:style http://localhost:7474/guides/graphstyle.grass
----

After converting to HTML (using run.sh) and hosting via the guide-extension, I played it in my browser. See:

hetionet-guide

I'm looking to apply a grid layout, so each subheading in the image above gets its own column. Is there a way to achieve this using the asciidoc format?

Also, where can I find the source of the builtin guides (for example :play cypher)? This way I can see how different features are implemented.

dhimmel commented 8 years ago

I'm looking to apply a grid layout, so each subheading in the image above gets its own column. Is there a way to achieve this using the asciidoc format?

I've inserted the raw HTML to achieve the Boostrap grid layout. For example:

++++
<div class="col-lg-3 ng-scope">
++++

=== Hetionet v1.0

Hetionet is a network of biology, disease, and pharmacology. Knowledge from millions of biomedical studies over the last half century have been encoded into a single hetnet. Version 1.0 contains 47,031 nodes of 11 types and 2,250,197 relationships of 24 types.

We created link:https://github.com/dhimmel/hetionet[Hetionet] v1.0 for link:https://thinklab.com/p/rephetio[Project Rephetio] — where we systematically looked at why drugs work and predicted new uses for existing drugs.

++++
</div>
++++

where can I find the source of the builtin guides

To view the HTML of builtin guides, I've been playing them and then using the Chrome "Inspect" feature to see the source.

dhimmel commented 8 years ago

where can I find the source of the builtin guides

I figured this out. If you download neo4j and navigate to the lib directory, there should be a file named neo4j-browser-1.1.6.jar (version info will change). Unzip this jar, and inside browser/content/guides contains the HTML for all builtin guides. browser/content/help contains help tutorials, which seem to me to be identical to guides, besides that they are executed using :help rather than :play.

In Neo4j 3.0.3 Community, here's a list of all of the available guides:

dhimmel commented 8 years ago

Closing this issue because I'm happy with the raw HTML solution.