How to embed Argo Lite into static webpages with programmatically generated graphs? about argo-graph-lite HOT 11 CLOSED

Got it! I think something like SigmaJS might suit your needs better if the graphs are small directed graphs. Argo Lite is designed to be an exploration tool and we haven't invested in building APIs to be used programmatically, although it's technically possible with some integration work, you might find it easier to use a library like Sigma.

For some background, you can build Argo Lite to "a bunch of JS and CSS files" by going through the development guide and deployment guide. Use npm build will generate a directory of the bundled JS/CSS/HTML that can be hosted statically. Currently Argo Lite does not import GEXF files by URL, but a similar feature exists for Argo Lite snapshots, an example is https://poloclub.github.io/argo-graph-lite/#https://argo-graph-lite.s3.amazonaws.com/lesmiserables.json where you can include a URL after the # to a publicly available Argo Lite snapshot file (which is a JSON file). At this point we don't have a public API for converting GEXF to Argo Lite Snapshot, although you can find this section of the code at here.

from argo-graph-lite.

As with most of modern frontend JavaScript, you need to host on an http server (localhost, eg. Python's SimpleHTTPServer, Apache, Nginx, or the simpler solution like now.sh or surge.sh that works like Github pages). I recommend https://surge.sh/

This is a standard React App so reference https://github.com/facebook/create-react-app for the associated workflow. The file:// protocol doesn't work for JavaScript apps like this so it must be hosted on http or https to link correctly. When we develop React apps, we used the scripts that come with the create-react-app toolchain (they are bundled with npm in package.json where npm start starts the dev hot-reload server and npm serve starts a simple http server that serves the built and optimized bundle. Refer to React documentation for more, most of the modern frontend framework works in a similar fashion.) If you are hosting multiple such apps together, you probably have to set some parameters in package.json before building, so that the local paths do not collide.

If you are new to React and client-side JavaScript, reading the React official website can clear up many questions. Though I think for your particular app, you don't have to change the client-side Argo Lite code that much although you can certainly customize some links and hide some buttons. If you are building a prototype, you can use the publicly available Argo Lite to get started. If you need enterprise production quality (as I noticed that you are building a Salesforce app), you need to host your own Argo Lite somewhere since our public instance is a best-effort service with no SLO. As mentioned earlier, we haven't designed Argo Lite to be used in enterprise apps programmatically and the embedding feature is mostly for blogs, interactive notebooks and academic articles, so you might have to write some integration and customize a little bit. I suggest forking it on Github if you want to make such customization.

from argo-graph-lite.

Hi! In order to embed Argo Lite into your web app/SPA app, you can use an iframe. You can generate the code of an iframe by using the Graph->Publish Snapshot menu for a particular graph snapshot. Or you can simply create an iframe for https://poloclub.github.io/argo-graph-lite/

If you are using plain HTML, iframe will work directly. If you are using React/JSX or other frameworks, you might have alternative ways to create iframe components. Either way, you can configure the width and height by changing the respective attribute on the iframe.

Note that Argo Lite will start with "embedded widget mode" when you embed it in an iframe, users can expand the full UI or open in a new tab with the menu buttons on the top right conner of the widget.

from argo-graph-lite.

(The method above is the quick and easy option. If you want to host your own instance of Argo-lite instead of linking your iframe to our free public instance, here is a guide for doing that)

from argo-graph-lite.

Thanks @RSLi for helping out.

1. When I use the Iframe option is there an URL param to pass a Gephi XML for display?
2. When your say in your repo that the visualizer is browser based doesn't that mean I can use it solely client-side? I really had a hard time understanding why there is Heroku mentioned and how you Github Pages Version works.

from argo-graph-lite.

To explain both questions, you are right in saying that Argo-Lite's visualization/import/computation is purely client-side (it's a React app) and can be used without any backend. You can use our Github Page version or host your static site. The Heroku part is referring to the free (and optional) snapshot sharing service we are providing (explained in the guide linked above), which allows users to share their graph snapshots on our server so that everyone can access with a URL/permalink/iframe.

I see that you are trying to share a graph (Gephi XML/GEXF file) by encoding it in a URL? This is an idea that we have thought about, but URLs in browsers have different length limits so we haven't implemented this feature. Though it would be useful for small graphs indeed.

I'm interested in learning more about your use case, so we can gauge whether this is a good feature for us to implement. For now, you can import your GEXF in Argo Lite, and use the snapshot publishing feature to generate a URL/iframe. If you want to do this programmatically (eg. your SPA is generating graphs dynamically) there isn't an off-the-shelf solution yet. It's possible to follow the deployment guide linked above and customize Argo Lite for your use case. I can give better suggestions if you are willing to describe your use case a bit more.

from argo-graph-lite.

I am planning to embed the Argo Lite Explorer into a Salesforce app to display the dependencies of the customer server. There I could render the GEXF as a URL or a File and planned to embed the explorer on a web page with purely statically server JS and HTML.

The pages in Salesforce are either classic Server Server Pages or true Web Components but no external frameworks as React work there.

I expected Argo to be a bunch of JS and CSS files but as I understand it's not. 3
My other idea was not about passing the GEXF context as part of an URL param. I wanted to pass a URL to the generated GEXF files.

from argo-graph-lite.

@RSLi that helps a lot. Sigma is not enough. I really need the exploration features. But I can happily try to use NPM to statically build it. The Snapshot format in JSON is even better to pass in data. Is the JSON format documented anywhere?

from argo-graph-lite.

A quick way to get started is by using the "Graph->Save Snapshot" menu button to get a serialized/stringified JSON snapshot. I suggest using the built in CORD-19 sample graph, which also demonstrates the use of node attributes. You can easily examine the fields by using something like Chrome Dev Tool or VSCode.

The code related to snapshot saving and loading is here, which is being updated in a backward-compatible way as we introduce more features. But for basic graphs, the most important is the rawGraph field to populate nodes and edges and node attributes. Most of the other fields are related to visual and style (overrides and global) configurations. And you can ignore fields such as positions.

(Caveats related to node attributes: Argo Lite always computes pagerank and degree during the normal import process, but would not recompute them when the input is a snapshot. You can compute the actual degree and pagerank yourself if you wish, or supply a dummy value. If you are interested in where Argo Lite is computing these attributes, refer to the GEXF import code snippet I linked in my last reply. Another caveat is that you will notice that all our sample snapshots have both "node_id" and "id" attribute for every node. I believe only "id" is actually needed while "node_id" is from an earlier version, but I can't remember right off my head, so you can test by retaining both of them and then try removing one if you wish.)

Argo Lite allows CORS traffic, so it's OK if you serve your JSON under a different origin as long as the server side enables CORS. (eg. My sample Les Miserables link above serves the JSON on AWS S3 and sets the link to public. You can use this same JSON as an example, though this snapshot doesn't use all the features available so I still recommend you look at the CORD-19 dataset or import a graph from CSV or GEXF yourself to generate a snapshot.)

@FZ2000 @aupadhayay3 consider writing some documentation including a barebone example snapshot.

from argo-graph-lite.

@RSLi This is what npm build is producing. When I open index.html in the browser I get a blank screen. :-(
argo-lite.zip

The browser console shows:
Loading failed for the <script> with source “file:///argo-graph-lite/static/js/2.0695f089.chunk.js”. index.html:1:1
Loading failed for the <script> with source “file:///argo-graph-lite/static/js/main.eaba623b.chunk.js”. index.html:1:1
Loading failed for the <script> with source “https://www.googletagmanager.com/gtag/js?id=UA-151873458-1”.

from argo-graph-lite.

In the end I didn't use Argo for my use case. So closing this.

from argo-graph-lite.