diff --git a/js/syntgraph.js b/js/syntgraph.js
new file mode 100644
index 0000000..ace48ac
--- /dev/null
+++ b/js/syntgraph.js
@@ -0,0 +1,106 @@
+/**
+ * 
+ */
+import {Runtime, Library, Inspector} from "https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/runtime.js";
+import commarc from "https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/index.js";
+
+//import {Runtime, Library, Inspector} from "https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/runtime.js";
+//import commarc from "https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/index.js";
+
+const synttypes=["princ", "subord I","subord II","subord III","coord", "coord I", "coord II","subord IV","subord V","parent",
+	   "coord III", "pcoord", "coord 0", "subord VI", "coord IV", "coord V", "pcoord I","subord VII"]
+
+//var clausecolors=d3.scaleOrdinal(d3.schemeSet1).domain(synttypes)
+
+const maptypes={"Ma": "princ", "SubI": "subord I", "SubII": "subord II", "SubIII": "subord III", "Co": "coord", 
+				"CoI": "coord I", "CoII": "coord II", "SubIV": "subord IV", "SubV": "subord V", "ParentethicalClause": "parent",
+				"CoIII": "coord III", "ParentheticalCo":"pcoord", "PseudoCo": "oord 0", "SubVI": "subord VI" , "CoIV": "coord IV",
+				 "CoV": "coord V", "ParentheticalCoI": "pcoord I", "SubVII": "subord VII"}
+//const structpalette=d3.quantize(d3.interpolateHcl("#4d4193", "#60c96e"), 18)
+const maptypestopalette={"Ma": 0, "SubI": 1, "SubII": 3, "SubIII": 4, "Co": 5, 
+				"CoI": 9, "CoII": 10, "SubIV": 5, "SubV": 6, "ParentethicalClause": 17,
+				"CoIII": 11, "ParentheticalCo":14, "PseudoCo": 16, "SubVI": 7 , "CoIV": 12,
+				 "CoV": 13, "ParentheticalCoI": 15, "SubVII": 8}
+var colorssp = d3.scaleQuantize()
+    .domain([0,17])
+    .range(["#3288bd", "#66c2a5", "#e41a1c", "#4daf4a", "#984ea3", "#d53e4f", "#f46d43", "#ABDDA4", 
+    		"#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", 
+    		"#D53E4F", "#9E0142",  "#e377c2", "#7f7f7f", "#bcbd22"]);
+
+const runtime1 = new Runtime(new Library(name => {
+	console.log('name' +name)
+	  switch (name) {
+	    case "d3@^5.8": return d3;
+	    case "d3@^6.0": return d3;
+	  }
+}));
+	
+	
+
+
+document.addEventListener("dblclick", function(e){
+  const target = e.target.closest("."+formaClass);
+  
+  if(target){
+    
+    var periodograph=document.getElementById("periodograph");
+    
+	if (periodograph!=null){
+		console.log('val '+document.getElementById("periodograph").getAttribute('name'))
+		let showngr=document.getElementById("periodograph").getAttribute('name').split("_")
+		var tmpsent=showngr[0]+"_"+showngr[1]+"_s_"+showngr[2]
+		periodograph.parentNode.removeChild(periodograph);
+		//var sentence = document.getElementsByClassName(lsentid);
+		var sentence = document.getElementsByClassName(tmpsent);
+		for (let i = 0; i < sentence.length; i++) {
+  			sentence[i].classList.remove('font-italic');
+  			sentence[i].style.removeProperty('color');
+  			
+  			sentence[i].classList.remove('font-weight-normal');
+		}
+		if (tmpsent==lsentid)
+			return
+	}
+	
+	var main=runtime1.module(commarc, name => {
+	  
+	  if (name === "sentenceStructArcs") 
+	  	return new Inspector(document.querySelector("#displayinfo"));
+	});
+	main.redefine('width', 600);
+	main.redefine('height', 400);	
+
+	main.redefine("links", d3.csv("https://hdnlab1.isti.cnr.it/d3search/node_modules/commarcdiag/files/parsint_mod_completo_pre_new_4.csv", d3.autoType));
+	
+	if (lisid!=''){
+		console.log('here graph '+lisid+' '+lsentid)
+		main.redefine("lisid", lisid);
+		var collection = document.getElementsByClassName(lsentid);
+		for (let i = 0; i < collection.length; i++) {
+  			//collection[i].classList.add('font-weight-normal');
+  			collection[i].classList.add('font-italic');
+  			//collection[i].classList.add('text-info');
+  			//console.log(collection[i].className)
+  			var synttp=collection[i].className.split(" ")[1]
+  			
+  			console.log(maptypes[synttp]+' '+maptypestopalette[synttp]+', '+colorssp(maptypestopalette[synttp]))
+  			//collection[i].style.color = getColor(maptypes[synttp]);
+  			collection[i].style.color = colorssp(maptypestopalette[synttp]);
+  			//collection[i].style.removeProperty('color');
+		}
+	}
+	else
+		return
+	
+	
+ 
+}
+});
+
+
+
+
+function getColor(cltype){
+	
+	return (clausecolors(cltype))
+}