Merge pull request #143 from paczian/master

bugfixes and pixelpushing
MG-RAST · Sep 27, 2016 · 73c5567 · 73c5567
2 parents 6e1fd63 + 7a902cf
commit 73c5567
Show file tree

Hide file tree

Showing 20 changed files with 373 additions and 106 deletions.
diff --git a/Retina b/Retina
diff --git a/css/mgrast.css b/css/mgrast.css
@@ -157,7 +157,7 @@
 .glow{
   animation: shadowThrob 0.9s 4;
   animation-direction: alternate;
-  -webkit-animation: shadowThrob 0.9s ease-out infinite;
+  -webkit-animation: shadowThrob 0.9s ease-out 6;
   -webkit-animation-direction: alternate;
 }
 @keyframes shadowThrob {
@@ -420,4 +420,9 @@ h5 {
 .thumbnail:active {
     border: 1px inset;
     box-shadow: none;
+}
+
+.recipe {
+    width: 100%;
+    height: 280px;
 }
diff --git a/data/graphs/bar.json b/data/graphs/bar.json
@@ -2,12 +2,14 @@
     "name": "bar",
     "width": 800,
     "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The grouped barchart displays abundances for list of samples grouped by category.</p><p>You can choose to enable / disable <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#normalisation' target=_blank>normalisation</a>, <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#log-10' target=_blank>log scaling</a> and select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.</p><p>Click a category to drill down to the next level. The layout tab has options to adjust the general layout of the graph.",
     "controls": [
-	{ "data":
+	{ "adjust graph data":
 	  [
 	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" },
-	      { "name": "normalize", "type": "bool", "description": "normalize the datasets", "title": "perform normalization", "isDataUpdater": true },
-	      { "name": "log", "type": "bool", "description": "view log base 10 of the data", "title": "perform log10", "isDataUpdater": true }
+	      { "name": "normalize", "type": "bool", "defaultTrue": true, "description": "normalize the datasets", "title": "perform normalization", "isDataUpdater": true },
+	      { "name": "log", "type": "bool", "defaultTrue": false, "description": "view log base 10 of the data", "title": "perform log10", "isDataUpdater": true }
 	  ]
 	},
 	{ "layout":

diff --git a/data/graphs/differential.json b/data/graphs/differential.json
@@ -2,8 +2,10 @@
   "name": "differential",
   "width": 500,
     "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The differential abundance plot displays the <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#log-10' target=_blank>logarithmic</a> abundances of the categories of two samples, each on one axis.</p><p>You can choose which sample is displayed on which axis and select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.",
     "controls": [
-	{ "data":
+	{ "adjust graph data":
 	  [
 	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" },
 	      { "name": "mga", "type": "select", "description": "metagenome a to compare", "title": "metagenome A", "adaptToData": true, "default": 0, "isDataUpdater": true, "values": "name" },

diff --git a/data/graphs/donut.json b/data/graphs/donut.json
@@ -0,0 +1,95 @@
+{
+  "name": "donut",
+  "width": 700,
+    "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The donut-chart shows samples as rims and categories as slices on those rims.</p><p>You can choose to enable / disable <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#log-10' target=_blank>log scaling</a> and select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.</p><p>Click a category to drill down to the next level. The layout tab has options to adjust the general layout of the donut-chart.",
+    "controls": [
+	{ "adjust graph data":
+	  [
+	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" },
+	      { "name": "log", "type": "bool", "defaultTrue": false, "description": "view log base 10 of the data", "title": "perform log10", "isDataUpdater": true }
+	  ]
+	},
+	{ "layout":
+	  [
+	      { "name": "height", "type": "int", "description": "height of the chart", "title": "height" },
+	      { "name": "width", "type": "int", "description": "width of the chart", "title": "width" },
+	      { "name": "items[0].parameters.width", "type": "int", "description": "width of each rim", "title": "rim width" },
+	      { "name": "items[0].parameters.center", "type": "int", "description": "distance from the border to the center", "title": "center point" },
+	      { "name": "items[1].parameters.top", "type": "int", "description": "top margin of the legend", "title": "legend top" },
+	      { "name": "items[1].parameters.left", "type": "int", "description": "left margin of the legend", "title": "legend left" }
+	  ]
+	}
+    ],
+  "items": [
+    {
+      "type": "donutchart",
+      "name": "chart",
+	"parameters": {
+	    "inputType": "matrix",
+            "shiftX": 50,
+            "shiftY": 50,
+            "center": 200,
+            "width": 20,
+            "startAngle": 0,
+            "id": "chart",
+            "groupSettings": {},
+            "data": [],
+	    "click": true
+	},
+	"data": "matrix2donut"
+    },
+    {
+      "type": "legend",
+      "name": "legend",
+	"parameters": {
+	    "inputType": "matrix",
+        "top": 50,
+        "left": 500,
+        "colors": [
+          "#3366cc",
+          "#dc3912",
+          "#ff9900",
+          "#109618",
+          "#990099",
+          "#0099c6",
+          "#dd4477",
+          "#66aa00",
+          "#b82e2e",
+          "#316395",
+          "#994499",
+          "#22aa99",
+          "#aaaa11",
+          "#6633cc",
+          "#e67300",
+          "#8b0707",
+          "#651067",
+          "#329262",
+          "#5574a6",
+          "#3b3eac",
+          "#b77322",
+          "#16d620",
+          "#b91383",
+          "#f4359e",
+          "#9c5935",
+          "#a9c413",
+          "#2a778d",
+          "#668d1c",
+          "#bea413",
+          "#0c5922",
+          "#743411"
+        ],
+        "format": {
+          "fontSize": 12,
+          "fontFamily": "arial",
+          "fontWeight": "normal"
+        },
+        "id": "legend",
+        "groupSettings": {},
+        "data": []
+      },
+      "data": "matrix2rowlegend"
+    }
+  ]
+}
diff --git a/data/graphs/heatmap.json b/data/graphs/heatmap.json
@@ -2,20 +2,18 @@
     "name": "heatmap",
     "width": 600,
     "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The heatmap displays the normalized clustered euklidean distances of the categories across all samples.</p><p>You can select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.</p><p>Click a category to drill down to the next level. The layout tab has options to adjust the color scale and general layout of the heatmap.",
     "controls": [
-	{ "data":
+	{ "adjust graph data":
 	  [
 	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" }
 	  ]
 	},
-	{ "general":
-	  [
-	      { "name": "items[1].parameters.colorscale", "type": "select", "description": "what colors should the heatmap range between?",
-		"title": "heatmap color", "options": [ { "label": "green and red", "value": "green2red" }, { "label": "yellow and blue", "value": "blue2yellow" } ] }
-	  ]
-	},
 	{ "layout":
 	  [
+	      { "name": "items[1].parameters.colorscale", "type": "select", "description": "what colors should the heatmap range between?",
+		"title": "heatmap color", "options": [ { "label": "green and red", "value": "green2red" }, { "label": "yellow and blue", "value": "blue2yellow" } ] },
 	      { "name": "height", "type": "int", "description": "height of the heatmap", "title": "height" },
 	      { "name": "width", "type": "int", "description": "width of the heatmap", "title": "width" },
 	      { "name": "items[0].parameters.base", "type": "int", "description": "width of the row titles", "title": "row title width" },
@@ -145,7 +143,7 @@
 		"direction": "horizontal",
 		"orientation": "top",
 		"labelPosition": "left-bottom",
-		"labelRotation": 270,
+		"labelRotation": 310,
 		"shift": 160,
 		"base": 130,
 		"length": 400,

diff --git a/data/graphs/pca.json b/data/graphs/pca.json
@@ -2,14 +2,18 @@
   "name": "pca",
   "width": 800,
     "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The principle component analysis plots the distances of the samples on two components on the x- and y-axis.</p><p>You can choose to enable / disable <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#normalisation' target=_blank>normalisation</a> and select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.</p><p>You can also choose which <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#pcoa' target=_blank>components</a> to use for x and y axes, the <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#distance-metric' target=_blank>distance metric</a>, and assign a <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadatum</a> to each color and shape.</p><p>The layout tab has options to adjust the general layout of the graph.",
     "controls": [
-	{ "data":
+	{ "adjust graph data":
 	  [
 	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" },
-	      { "name": "pcaa", "type": "select", "description": "set the PCA x-component", "title": "PCA X", "adaptToData": true, "default": 0, "isDataUpdater": true, "values": "counter" },
-	      { "name": "pcab", "type": "select", "description": "set the PCA y-component", "title": "PCA Y", "adaptToData": true, "default": 1, "isDataUpdater": true, "values": "counter" },
+	      { "name": "items[3].parameters.headerAttribute", "type": "select", "description": "metadatum to color by", "title": "color attribute", "adaptToData": true, "default": "project_name", "values": "metadata", "isDataUpdater": true },
+	      { "name": "items[4].parameters.headerAttribute", "type": "select", "description": "metadatum to determine shape", "title": "shape attribute", "adaptToData": true, "default": "biome", "values": "metadata", "isDataUpdater": true },
+	      { "name": "pcaa", "type": "select", "description": "set the principle x-component", "title": "PC X", "adaptToData": true, "default": 0, "isDataUpdater": true, "values": "counter" },
+	      { "name": "pcab", "type": "select", "description": "set the principle y-component", "title": "PC Y", "adaptToData": true, "default": 1, "isDataUpdater": true, "values": "counter" },
 	      { "name": "distance", "type": "select", "description": "method for distance matrix", "title": "distance method", "default": "euclidean", "isDataUpdater": true, "options": [ { "label": "euclidean", "value": "euclidean" }, { "label": "manhattan", "value": "manhattan" }, { "label": "maximum", "value": "maximum" }, { "label": "braycurtis", "value": "braycurtis" }, { "label": "minkowski", "value": "minkowski" } ] },
-	      { "name": "normalize", "type": "bool", "description": "normalize the datasets", "title": "perform normalization", "isDataUpdater": true }
+	      { "name": "normalize", "type": "bool", "defaultTrue": true, "description": "normalize the datasets", "title": "perform normalization", "isDataUpdater": true }
 	  ]
 	},
 	{ "layout":
@@ -19,6 +23,15 @@
 	  ]
 	}
     ],
+    "connections": { "3": { "headerAttribute": [ { "type": "pinned",
+						   "items": [ { "index": 2,
+								"attribute": "colorAttribute" } ] } ]
+			  },
+		     "4": { "headerAttribute": [ { "type": "pinned",
+						   "items": [ { "index": 2,
+								"attribute": "shapeAttribute" } ] } ] 
+			  }
+		   },
   "items": [
     {
       "type": "axis",
@@ -101,31 +114,88 @@
       "data": "matrix2valueY"
     },
     {
-      "type": "plot",
-      "name": "item2",
-      "parameters": {
-        "height": 400,
-        "width": 400,
-        "radius": 4,
-        "shiftX": 50,
-        "shiftY": 50,
+	"type": "plot",
+	"name": "item2",
+	"parameters": {
+	    "colorAttribute": "project_name",
+	    "shapeAttribute": "biome",
+            "height": 400,
+            "width": 400,
+            "radius": 4,
+            "shiftX": 50,
+            "shiftY": 50,
+            "format": {
+		"fill": "white",
+		"stroke": "black",
+		"strokeWidth": 1
+            },
+            "inputType": "plot",
+            "id": "item2",
+            "groupSettings": {},
+            "data": []
+	},
+	"data": "matrix2plot"
+    },
+      {
+      "type": "legend",
+      "name": "legend",
+	"parameters": {
+	    "inputType": "plot",
+	    "legendType": "color",
+	    "headerAttribute": "project_name",
+        "top": 200,
+        "left": 500,
+        "colors": [
+          "#3366cc",
+          "#dc3912",
+          "#ff9900",
+          "#109618",
+          "#990099",
+          "#0099c6",
+          "#dd4477",
+          "#66aa00",
+          "#b82e2e",
+          "#316395",
+          "#994499",
+          "#22aa99",
+          "#aaaa11",
+          "#6633cc",
+          "#e67300",
+          "#8b0707",
+          "#651067",
+          "#329262",
+          "#5574a6",
+          "#3b3eac",
+          "#b77322",
+          "#16d620",
+          "#b91383",
+          "#f4359e",
+          "#9c5935",
+          "#a9c413",
+          "#2a778d",
+          "#668d1c",
+          "#bea413",
+          "#0c5922",
+          "#743411"
+        ],
         "format": {
-          "fill": "white",
-          "stroke": "black",
-          "strokeWidth": 1
+          "fontSize": 12,
+          "fontFamily": "arial",
+          "fontWeight": "normal"
         },
-        "inputType": "plot",
-        "id": "item2",
+        "id": "legend",
         "groupSettings": {},
         "data": []
       },
-      "data": "matrix2plot"
-    },
+      "data": "matrix2plotlegend"
+      },
       {
-      "type": "legend",
-      "name": "legend",
+      "type": "shapelegend",
+      "name": "shapelegend",
 	"parameters": {
-	    "inputType": "matrix",
+	    "inputType": "plot",
+	    "legendType": "shape",
+	    "headerAttribute": "biome",
         "top": 50,
         "left": 500,
         "colors": [
@@ -170,7 +240,7 @@
         "groupSettings": {},
         "data": []
       },
-      "data": "matrix2columnlegend"
+      "data": "matrix2plotlegend"
     }
   ]
 }
diff --git a/data/graphs/pie.json b/data/graphs/pie.json
@@ -2,24 +2,30 @@
   "name": "pie",
   "width": 700,
     "height": 500,
+    "extended": { "adjust graph data": true },
+    "description": "The pie-chart shows the categories of a single sample as slices.</p><p>You can choose to enable / disable <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#log-10' target=_blank>log scaling</a> and select the sample label by <a href='https://github.com/MG-RAST/tech-report/wiki/MG-RAST-glossary#metadata' target=_blank>metadata</a> field.</p><p>Click a category to drill down to the next level. The layout tab has options to adjust the general layout of the pie-chart.",
     "controls": [
-	{ "data":
+	{ "adjust graph data":
 	  [
 	      { "name": "metadatum", "type": "select", "description": "metadatum to name the datasets by", "title": "metadatum", "adaptToData": true, "default": "name", "isDataUpdater": true, "values": "metadata" },
-	      { "name": "log", "type": "bool", "description": "view log base 10 of the data", "title": "perform log10", "isDataUpdater": true }
+	      { "name": "log", "type": "bool", "defaultTrue": false, "description": "view log base 10 of the data", "title": "perform log10", "isDataUpdater": true }
 	  ]
 	},
 	{ "layout":
 	  [
 	      { "name": "height", "type": "int", "description": "height of the chart", "title": "height" },
 	      { "name": "width", "type": "int", "description": "width of the chart", "title": "width" },
-	      { "name": "items[0].parameters.width", "type": "int", "description": "width of each rim", "title": "rim width" },
-	      { "name": "items[0].parameters.center", "type": "int", "description": "distance from the border to the center", "title": "center point" },
+	      { "name": "items[0].parameters.center", "type": "int", "description": "radius of the pie chart", "title": "radius" },
 	      { "name": "items[1].parameters.top", "type": "int", "description": "top margin of the legend", "title": "legend top" },
 	      { "name": "items[1].parameters.left", "type": "int", "description": "left margin of the legend", "title": "legend left" }
 	  ]
 	}
     ],
+    "connections": { "0": { "center": [ { "type": "pinned",
+					"items": [ { "index": 0,
+						     "attribute": "width" } ] } ]
+			  }
+		   },
   "items": [
     {
       "type": "donutchart",
@@ -29,14 +35,14 @@
             "shiftX": 50,
             "shiftY": 50,
             "center": 200,
-            "width": 20,
+            "width": 200,
             "startAngle": 0,
             "id": "chart",
             "groupSettings": {},
             "data": [],
 	    "click": true
 	},
-	"data": "matrix2donut"
+	"data": "matrix2pie"
     },
     {
       "type": "legend",