Trying to get a visualization of my DB neo4j (angular and vis.js)

Projects & Collaboration
1

Hello everyone,

I apologize for my English, but I've encountered an issue with my project. I'm trying to visualize my database, and while my console returns the correct data types and they are well-stocked, I'm unable to display a graph on my webpage. It would be incredible if you could help me with this! (i use angular )

Thank you!

service: import { visu } from './visu/visu.component';

import { Injectable } from 'Aangular/core';
import * as neo4j from 'neo4j-driver';

AInjectable({
providedIn: 'root'
})
export class Neo4jService {
driver: any;

    constructor() {
      this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'Password'));
    }
    
  
    getDriver() {
      return this.driver;
    };

}

visu.component:

// TypeScript
import {
Component,
OnInit,
AfterViewInit,
ElementRef,
ViewChild,
} from '@angular/core';
import { FormsModule } from 'Aangular/forms';
import { CommonModule } from 'Aangular/common';
import { Neo4jService } from '../service';
import { DataSet, Network } from 'vis-network/standalone/esm/vis-network';

AComponent({
selector: 'app-visu',
templateUrl: './visu.component.html',
styleUrls: ['./visu.component.scss'],
standalone: true,
imports: [FormsModule, CommonModule],
})
export class visu implements OnInit, AfterViewInit {
AViewChild('mynetwork', { static: false }) networkContainer!: ElementRef;

  command = '';
  neoResults: any;
  driver: any;
  data: any;
  network: any;

  constructor(private service: Neo4jService) {
    this.driver = this.service.getDriver();
  }

  ngOnInit() {
    let session = this.driver.session();
    // Utilisez la session pour exécuter des commandes Cypher...
    console.log(this.data)
  }
  ngAfterViewInit() {
    this.network = new Network(
      this.networkContainer.nativeElement,
      this.data,
      {}
    );
    console.log('network after init:', this.network);
  }

  executeCypherCommand() {
    let session = this.driver.session();
    session.run(this.command).then((result: { records: any }) => {
      this.neoResults = result.records;
      console.log(this.neoResults);
      window.localStorage.setItem('data', JSON.stringify(this.neoResults));
      session.close();

      // Préparez les nouvelles données pour le graphique.
      let nodes = new DataSet<any>([]);
      let edges = new DataSet<any>([]);
      this.neoResults.forEach((record: any) => {
        // Ajoutez vos nœuds et vos arêtes ici.
      });
      this.data = {
        nodes: nodes,
        edges: edges,
      };

      // Mettez à jour le graphique.
      if (this.network) {
        console.log('data: ', this.data)
        this.network.setData(this.data);
        console.log('network after setData:', this.network);
      } else {
        console.log('network is undefined!');
      }
    });
  }
}

visu.html :


<input [(ngModel)]="command" placeholder="Enter Cypher command">
<button (click)="executeCypherCommand()">Execute

Neo4j Graph

MATCH (p:Person)-[r:OWNS]->(a:Animal) RETURN p, r, a

Thanks to the one who will help me :open_hands: (can't put @ the forum think i tag someone so i put a A )

2

Okay, I've resolved my issue. Here is the code to achieve this:

// TypeScript
import {
Component,
OnInit,
AfterViewInit,
ElementRef,
ViewChild,
} from 'Aangular/core';
import { FormsModule } from 'Aangular/forms';
import { CommonModule } from 'angular/common';
import { Neo4jService } from '../service';
import { DataSet, Network } from 'vis-network/standalone/esm/vis-network';

AComponent({
selector: 'app-visu',
templateUrl: './visu.component.html',
styleUrls: ['./visu.component.scss'],
standalone: true,
imports: [FormsModule, CommonModule],
})
export class visu implements OnInit, AfterViewInit {
AViewChild('mynetwork', { static: false }) networkContainer!: ElementRef;

command = '';
neoResults: any;
driver: any;
data: any;
network: any;

constructor(private service: Neo4jService) {
this.driver = this.service.getDriver();
}

ngOnInit() {
let session = this.driver.session();
// Utilisez la session pour exécuter des commandes Cypher...

// Préparez les données initiales pour le graphique.
let nodes = new DataSet<any>([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' },
  { id: 4, label: 'Node 4' },
  { id: 5, label: 'Node 5' }
]);
let edges = new DataSet<any>([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 }
]);
this.data = {
  nodes: nodes,
  edges: edges,
};

}

ngAfterViewInit() {
this.network = new Network(
this.networkContainer.nativeElement,
this.data,
{}
);
console.log('network after init:', this.network);
}

executeCypherCommand() {
let session = this.driver.session();
session.run(this.command)
.then((result: { records: any }) => {
this.neoResults = result.records;
console.log(this.neoResults);
window.localStorage.setItem('data', JSON.stringify(this.neoResults));
session.close();

  // Préparez les nouvelles données pour le graphique.
  let nodes = new DataSet<any>([]);
  let edges = new DataSet<any>([]);

  this.neoResults.forEach((record: any) => {
    // Ajoutez vos nœuds et vos arêtes ici.
    record._fields.forEach((field: any) => {
      if (field.start && field.end) {
        // Vérifiez si l'arête existe déjà.
        if (!edges.get(field.start.low + '-' + field.end.low)) {
          edges.add({
            id: field.start.low + '-' + field.end.low,
            from: field.start.low,
            to: field.end.low
          });
        }
      } else if (field.identity) {
        // Vérifiez si le nœud existe déjà.
        if (!nodes.get(field.identity.low)) {
          nodes.add({
            id: field.identity.low,
            label: field.labels[0]
          });
        }
      }
    });
  });

  this.data = {
    nodes: nodes,
    edges: edges,
  };

  // Mettez à jour le graphique.
  if (this.network) {
    console.log('data: ', this.data)
    this.network.setData(this.data);
    console.log('network after setData:', this.network);
  } else {
    console.log('network is undefined!');
  }
});

}
}