CODEWITHSUNDEEP
javascripthtmljsononmouseoveralchemy
Andrea Perelli
Andrea Perelli

Reputation: 186

Alchemy onMouseOver doesn't work

I'm working with alchemy.js to show a graph. The problem is that I can't display the "onMouseOver" caption of the graph's node. In the console there are some errors. Here output:

enter image description here

here the code:

   <html>
<head>
    <link rel="stylesheet" href="../css/style.css"/>
</head>
<body class="ng-scope">
<div class="alchemy" id="alchemy" style="margin-left: 50% !important;"></div>
<script src="../prova/vendor.js"></script>

<script src="../prova/alchemy.min.js"></script>

<script type="text/javascript">
     var config = {
            // SOURCE GRAPH
            dataSource: '../prova.json',

         "nodeStyle":{
      "all":{
         "radius":10, 
         "color":"RED",
          "borderColor":"none",
         "captionColor":"#FFFFFF",
         "captionBackground":null,
         "captionSize":12,
         "selected":{
            "color":"#FFFFFF"

         },
         "highlighted":{
            "color":"#EEEEFF",
             "borderColor":"none"
         },
         "hidden":{
            "color":"none",
            "borderColor":"none"
         }
      },
      "microRNA":{
          "radius":10, 
         "color":"#EF5350",
          "borderColor":"none",
         "captionColor":"#000000",
         "captionBackground":null,
         "captionSize":12,
         "selected":{
            "color":"#000000",
            "borderColor":"none"
         },
         "highlighted":{
            "color":"#D50000"
         },
         "hidden":{
            "color":"none",
            "borderColor":"none"
         }

      },
             "Target":{
          "radius":10, 
         "color":"#2196F3",
                 "borderColor":"none",
         "captionColor":"#000000",
         "captionBackground":null,
         "captionSize":12,
         "selected":{
            "color":"#000000",
            "borderColor":"none"
         },
         "highlighted":{
            "color":"#1A237E"
         },
         "hidden":{
            "color":"none",
            "borderColor":"none"
         }
      },
         "person":{
          "radius":10, 
         "color":"#4CAF50",
             "borderColor":"none",
         "captionColor":"#000000",
         "captionBackground":null,
         "captionSize":12,
         "selected":{
            "color":"#000000",
            "borderColor":"none"
         },
         "highlighted":{
            "color":"#1B5E20"
         },
         "hidden":{
            "color":"none",
            "borderColor":"none"
         }
      }

   },


  nodeTypes: {"type":
                ["movie",
                 "award",
                 "person"]
               },

  rootNodeRadius: 30,


  showControlDash: true,
  showStats: true,
  nodeStats: true,
  showFilters: true,
  nodeFilters: true,

  captionToggle: true,
  edgesToggle: true,
  nodesToggle: true,
  toggleRootNotes: false,

  zoomControls: true,

            //FORCE THINGS
            forceLocked: true,

            // DIRECTION OF THE EDGES
            directedEdges: false,

            // HOW TO VISUALIZE

            //nodeCaption: function(node) { // TO PRINT MORE "THINGS"
            //    return ""+ node.type + " ("+ node.id+ ")"  ;
            //},


            //edgeCaption: 'target',
            //nodeMouseOver: function(node) {
            //return ""+node.type + node.id+"";
            //}

};

alchemy.begin(config);

</script>
</body>
</html>

if I comment out this function:

//nodeMouseOver: function(node) {
    //return ""+node.type + node.id+"";
//}

I have the same result. Someone know where I wrong?

Upvotes: 0

Views: 324

Answers (1)

Andrea Perelli
Andrea Perelli

Reputation: 186

I "solved" making a thing " not very good ": (I putted html inside javascript)

<html>
<head>
    <title>Show Graph</title>
    <link rel="stylesheet" href="../css/style.css"/>
</head>

<body class="ng-scope" ng-app="site">

 <!--  DIV CHE CONTIENE IL RISULTATO DEL MOUSE OVER DEL NODO/ARCO-->
<div id="info"> </div>

 <!-- DIV CHE CONTIENE LA BARRA DEL "NODE TYPE FILTER" -->
<div id="legenda">  </div>

 <!-- DIV CHE STAMPA IL GRAFO-->
<div class="alchemy" id="alchemy" style="margin-left: 50% !important;"></div>

 <!--DIPENDENZE ALCHEMY  -->
<script src="../js/vendor.js"></script>

 <!-- ALCHEMY-->
<script src="../js/alchemy.min.js"></script>

 <!-- NOSTRA FUNZIONE-->
<script type="text/javascript">
    // HTML CHE GENERA LA BARRA DEL "NODE TYPE FILTER" INIETTATO NEL DIV
document.getElementById("legenda").innerHTML = "<div id='divisore'><img src='../rosso.png'> Target &nbsp;&nbsp;&nbsp;&nbsp;</img><img src='../blu.png'>  microRNA &nbsp;&nbsp;&nbsp;&nbsp; </img><input  id='inpuno' type='text' placeholder='node type filter'>  <button  type='submit' onclick=copyToTextarea(); id='pulsante'> Change </button><h5 id='istruzioni'>- Click and drag to move the graph</h5><h5 id='istruzioni' >- Slide with two fingers up and down to zoom in or zoom out the graph</h5></div> ";

// NOSTRA VARIABILE DI CONFIGURAZIONE

    var config = {
        // file json da dove prendiamo i dati
        dataSource: '../prova.json',

        // stile dei nodi,
        "nodeStyle": {
            "all": {
                "radius": 10,
                "color": "GREEN",
                "borderColor": "none",
                "captionColor": "#FFFFFF",
                "captionBackground": null,
                "captionSize": 12,
                "selected": { // se selezionato
                    "color": "#FFFFFF",

                },
                "highlighted": {  // mouse over
                    "color": "#EEEEFF",
                    "borderColor": "none"
                },
                "hidden": { // nascosto
                    "color": "none",
                    "borderColor": "none"
                }
            },
            "Target": {
                "radius": 15,
                "color": "#EF5350",
                "borderColor": "none",
                "captionColor": "#000000",
                "captionBackground": null,
                "captionSize": 12,
                "selected": { // se selezionato
                    "color": "#000000",
                    "borderColor": "none"
                },
                "highlighted": { // mouse over
                    "color": "#D50000"
                },
                "hidden": { // nascosto
                    "color": "none",
                    "borderColor": "none"
                }
            },
            "microRNA": {
                "radius": 15,
                "color": "#2196F3",
                "borderColor": "none",
                "captionColor": "#000000",
                "captionBackground": null,
                "captionSize": 12,
                "selected": { // se selezionato
                    "color": "#000000",
                    "borderColor": "none"
                },
                "highlighted": { // mouse over
                    "color": "#1a2691"
                },
                "hidden": { // nascosto
                    "color": "none",
                    "borderColor": "none"
                }
            },

        },
        // filtro base sui nodi
        nodeTypes: {
            "type": ["microRNA",
                    "Target"]
        },



        // radius del nodo root
        rootNodeRadius: 30,


        showControlDash: true,
        showStats: true,
        nodeStats: true,


        showFilters: true,
        nodeFilters: true,
        edgeFilters: false,

        captionToggle: true,
        edgesToggle: true,
        nodesToggle: true,
        toggleRootNotes: false,

        zoomControls: true,

        // Definisce  la distanza di zoom che l'utente sarà in grado di ingrandire e ridurre
        scaleExtent:[9.9, 4.4],

        // effetto grafico
        forceLocked: true,

        // archi diretti
        directedEdges: false,



        // possiamo settare l'attributo
        nodeCaption: "id",
        edgeCaption: "",


        // FUNZIONE che stampa a video i dati dei nodi
        // funziona anche con mouseover cambiando nodeClick con nodeMouseOver
        "nodeClick": function (node) {
            if(node._properties.type == "microRNA") {
                document.getElementById("info").innerHTML = "<h2>Informazioni sul nodo microRNA selezionato</h2>" + "Id: " + node._properties.id + "<br>" + "Species: " + node._properties.species + "<br>" + "Name: " + node._properties.name + "<br>" + "Accession: " + node._properties.accession + "<br>" + "Mirbase_link: " + node._properties.mirbase_link + "<br><br>";

                return node._properties.type;
            }
            else{
                document.getElementById("info").innerHTML = "<h2>Informazioni sul nodo Target selezionato</h2>" + "Id: " + node._properties.id + "<br>" + "Species: " + node._properties.species + "<br>" + "Name: " + node._properties.name + "<br>" + "Geneid: " + node._properties.geneid + "<br>" + "ncbi_link: " + node._properties.ncbi_link+ "<br>" + "ens_code: " + node._properties.ens_code + "<br><br>";

                return node._properties.type;
            }
        },

        // FUNZIONE che stampa a video i dati degl'archi

        "edgeClick": function (edge) {

            document.getElementById("info").innerHTML = "<h2>Informazioni sull' arco selezionato</h2>"  + "Source: " + edge._properties.source + "<br>" + "Targer: " + edge._properties.target + "<br>" + "Score: " + edge._properties.score + "<br>" + "source_microrna: " + edge._properties.source_microrna + "<br>" + "Name: " + edge._properties.name + "<br>" + "source_target: " + edge._properties.source_target + "<br><br>";

            return edge._properties.source;
        },



    };

       alchemy.begin(config);

    // funzione che copia il dall'input form e
 function copyToTextarea(){

         var a = document.getElementById("inpuno").value;
         document.getElementById('li-microRNA').innerHTML= a;
         document.getElementById('li-microRNA').id= "li-"+a;
         document.getElementById('li-'+a).setAttribute("name",a);
         // stat
         document.getElementById('li-microRNA').innerHTML= a;
         document.getElementById('li-microRNA').id= "li-"+a;
                                    }
</script>

</body>
</html>

I couldn't solve a different way because seems that alchemy project is died. Thank you at all.

Upvotes: 0

Related Questions