0

I'm starting to experiment with Flask and Sigma js node graphics and I'm struggling with even displaying the simplest node graph.

The network.json data is taken directly from Sigmajs.org front-page.

The current structure is

enter image description here

I've tried a lot of different approaches and lately I've tried to only follow "Get started tutorial" from Sigmajs.org, which doesn't work.

The code for main routes:

def load_json(): #Function to try and pass json data
    filename = os.path.join(os.path.dirname(__file__), '../static', 'network.json')
    print(filename)
    with open(filename) as node_graph:
        data = json.load(node_graph)
    return data

@bp.route('/')
def index():
    node_data = load_json()
    print(node_data)
    return render_template("index.html", node_data=node_data)

The code for index.html:

<style type="text/css">
#container {
  max-width: 400px;
  height: 400px;
  margin: auto;
}
</style>
<div id="container"></div>
<script src="../static/js/sigma.parsers.json.min.js"></script>
<script src="../static/js/sigma.min.js"></script>
<script src="../static/js/sigma.layout.forceAtlas2.min.js"></script>



<script> 
  sigma.parser.json('../static/network.json', {
    container: 'container',
    settings: {
      defaultNodeColor: '#ec5148'
    }
  });
</script>

Running this does nothing, no error message and especially no node graph. I'm thinking that I'm using an url-path instead of a file-path in the json parser but no luck in fixing that. Any help is appreciated and sorry if this is lacking in necessary information.

Alvarsson
  • 115
  • 3
  • 7
  • 1
    You're trying to load `network.json` in python and pass it to the template, but it's also in the static directory so available for the javascript to load directly. Which of these do you want to do? - I suspect the latter. Try to load `example.com/static/network.json` directly in the browser, then if that doesn't launch diagnose that problem first. You shouldn't be specifying paths in the template like `../static/somewhere`. Generate something like this with `{{ url_for('static'), filename='network.json' }}` which keeps it dynamic. `stigma.js-1.2.1` should probably be in the static folder. – v25 Jan 26 '20 at 20:17
  • The network tab it your browser's dev tools is your friend, to see what's loading properly and what's not. – v25 Jan 26 '20 at 20:17
  • @v25 Thanks, that is correct, the latter is what I'm after. Tried everything you said and when loading `example.com/static/network.json` I get the .json data but alas no graph. – Alvarsson Jan 26 '20 at 21:00
  • you got a github repo with this code ? – v25 Jan 26 '20 at 21:06
  • @v25 Yes, but bare in mind that this isn't the prettiest code haha. [link] (https://github.com/Alvarsson/WideFind) – Alvarsson Jan 26 '20 at 21:14
  • 1
    Thanks, stay tuned, I'll try to log an issue against that repo with some kind of advice :) – v25 Jan 26 '20 at 21:27

0 Answers0