genenetwork · Alexanderlacuna · Jul 26, 2021 · Aug 3, 2021 · Aug 3, 2021 · Aug 3, 2021
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
@@ -72,6 +72,16 @@ <h1>Correlation Matrix</h1>
 </form>
 <br>
 {% if pca_works == "True" %}
+
+<div style="margin:20px;">
+  {%include 'scree_plot.html'%}
+</div>
+
+<div style="margin:20x;">
+   {%include 'test_loading_plot.html'%}
+</div>
+
+
 <h2>PCA Traits</h2>
 <div style="margin-bottom: 20px; overflow:hidden;">
 <table id="pca_table" class="table-hover table-striped cell-border" id='trait_table' style="float: left;">

diff --git a/wqflask/wqflask/templates/scree_plot.html b/wqflask/wqflask/templates/scree_plot.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title></title>
+</head>
+
+<body>
+    <div id="scree_graph" style="width:700px;height:600px;"></div>
+</body>
+<script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
+<script>
+
+
+js_data = {{ js_data | safe }}
+
+let {x_vals,y_vals} = js_data["scree_plot_data"]
+
+let layout = {
+    title: {
+        text: "<b>Scree Plot</b>",
+        font: {
+            "size": 24,
+            "family": "Arial"
+        }
+    },
+
+    yaxis: {
+        // range: [-1, 100],
+        title: {
+            text: "Percent of total variance %",
+            font: {
+                "size": 18
+            }
+        }
+    },
+    xaxis: {
+        title: {
+            text: 'PCA Components',
+            font: {
+                "size": 18,
+                "color": ""
+            }
+        }
+    }
+}
+
+let data = [{
+    x: x_vals.slice(0,5),
+    y: y_vals.slice(0,5),
+    marker: {
+
+        color: 'rgb(17, 157, 255)',
+        size: 5,
+        line: {
+            color: 'rgb(255, 0, 0)',
+            width: 3
+        }
+    }
+
+}]
+
+
+
+let configs = (filename, format,modebar=true) => {
+
+    //  customize download icon
+    return {
+        displayModeBar: modebar, 
+        scrollZoom: false,
+        toImageButtonOptions: {
+            format, // can modify this to png, svg, jpeg, webp
+            filename,
+            height: 600,
+            width: 700,
+            scale: 1
+        }
+    }
+
+}
+
+
+
+let scree = document.getElementById('scree_graph');
+Plotly.newPlot(scree, data, layout, configs("scree_plot", "svg"));
+</script>
+
+</html>
diff --git a/wqflask/wqflask/templates/test_loading_plot.html b/wqflask/wqflask/templates/test_loading_plot.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title></title>
+</head>
+<body>
+
+	<div id="loadings_plot"></div>
+
+</body>
+
+<script type="text/javascript">
+
+
+
+
+let  {traits}  = {{js_data|safe }}
+let {test_pca_loading}= {{js_data |safe}}
+let [loading_1,loading_2] = test_pca_loading.slice(0,2)
+
+
+let loading_data = loading_1.map((val,i)=> {
+  return  {
+    x: [0,val],
+    y: [0,loading_2[i]],
+    mode: 'lines+markers+text',
+    text : ['', traits[i]],
+    textposition: 'top',
+    name : traits[i],
+    marker: {
+    color: 'rgb(0, 0, 255)',
+    size: 8,
+  },
+    line: {
+    color: 'rgb(255, 0, 0)',
+    width: 1.3
+  }
+  }
+});
+
+let loading_layout = {
+
+
+ title : {
+   text :  "<b>Factor Loadings Plot</b>",
+   font : {
+    "size" :24,
+    "family":"Arial"
+   }
+ }, 
+  height: 600,
+  width: 900,
+  showlegend: false,
+  xaxis: {
+    title: 'Factor (1)',
+    showgrid: true,
+    zeroline: false,
+    showline : true 
+  },
+  yaxis: {
+    title: 'Factor (2)',
+    showline: true,
+    zeroline:false,
+    showgrid:true
+  },
+};
+
+Plotly.newPlot('loadings_plot', data = loading_data,layout = loading_layout);
+
+</script>
+</html>