cleaned up code and matched python module structure

histoqc/ui/app.py → histoqc/ui/__main__.py

@@ -2,17 +2,13 @@
 import argparse
 import os
 
-from HQC_html import html
+from histoqc.ui.HQC_html import html
 
 app = Flask(__name__)
 app.register_blueprint(html)
 app.logger_name = 'flask'
 
-# resultsfilepath = "/data/jjaco34/histoqc_results/tsv_run_no_exceptions/results_clean.tsv"
-# app.config['data_directory'] = os.path.dirname(resultsfilepath)
-# app.config['results_filename'] = os.path.basename(resultsfilepath)
-
-if __name__ == '__main__':
+def main():
     parser = argparse.ArgumentParser(prog="histoqc.ui",description="launch server for result viewing in user interface")
     parser.add_argument('--port', '-p', type=int, default=5000, help='Specify the port [default:5000]')
     parser.add_argument('resultsfilepath', type=str, help='Specify the full path to the results file. The user must specify this path.')
@@ -26,4 +22,7 @@
     app.logger.info('Starting Flask app')
     app.run(host='0.0.0.0', port=args.port, debug=True, threaded=True)
 
+if __name__ == '__main__':
+    main()
+
 

histoqc/ui/static/css/index.css → histoqc/ui/static/css/image-view.css

@@ -1,84 +1,3 @@
-/* :root {
-	--selected-color: orangered;
-	--foreground-color: #007bff;
-	--background-color: #ddd;
-}
-
-html, body {
-	line-height: 1; 
-}
-
-th {
-	font-weight: normal;
-} */
-
-/* .px-md-4 {
-	padding-left: 30px!important;
-	padding-right: 30px!important;
-}
-
-.btn-outline-secondary {
-	border-width: 1.5px;
-}
-
-.m-container {
-	border-width: 1px;
-	border-radius: 5px;
-	border-color: #eee;
-}
-
-#dataset-tag {
-	display: none;
-	color: #aaa;
-}
-
-#view-mngmt-btn-group {
-	display: none;
-}
-
-#table-btn,
-#chart-btn,
-#image-btn {
-	width: 80px;
-}
-
-.view-enabled {
-	display: inline-block;
-	color: #212529;
-	background-color: #f8f9fa;
-	border-color: #f8f9fa;
-}
-
-.view-disabled {
-	display: inline-block;
-	color: #212529;
-	background-color: transparent;
-	border-color: #efefef;
-}
-
-#view-mngmt-btn-hidden {
-	display: none;
-}
-
-#upload-button {
-	margin-top: 15%;
-}
-
-#upload-input,
-#cf-input {
-	display: none;
-}
-
-#table-view {
-	display: none;
-	height: 230px;
-}
-
-#chart-view {
-	display: none;
-	height: 330px;
-} */
-
 #image-view {
 	display: none;
 }
@@ -116,53 +35,18 @@ th {
 }
 
 .control-group {
-	position: fixed;
+	position: relative;
 	padding-left: 0px;
 	padding-top: 0px;
-/*	padding-left: 0.5rem;
-	padding-top: 0.5rem;
-*/	/*width: 100%;*/
 	z-index: 1;
 	opacity: 0.9;
 	height: 20px;
 }
 
-/* img view */
-/*#exit-image-select-view-btn,
-#img-select-button {
-	position: fixed;
-	padding-left: 15px;
-	padding-top: 15px;
-	z-index: 1;
-}
-*/
 #exit-image-select-view-btn {
 	display: none;
 }
 
-/*#img-select,
-#comparison-select,
-#chart-select,
-#chart-sort-btn,
-#vis-switch-btn {
-	border-width: 1.5px;
-	height: 40px;
-	color: #898f94;
-	border-color: #898f94;
-	text-shadow: 0.5px 0.5px 1px #000;
-	font-size: 18px;
-}
-*/
-/*#img-select:hover,
-#comparison-select:hover,
-#chart-select:hover,
-#chart-sort-btn:hover,
-#vis-switch-btn:hover {
-	background-color: #898f94;
-	color: #fff;
-}
-*/
-
 #overview-gallery {
 	height: 100%;
 	display: flex;

histoqc/ui/static/css/scatterplot.css

@@ -0,0 +1,68 @@
+#lasso-canvas {
+    z-index: 2;
+    cursor: crosshair;
+  }
+
+#highlighted-canvas {
+    z-index: 1;
+    cursor: grab;
+}
+
+#axis-svg {
+    z-index: 0;
+}
+
+.control-group-element {
+    margin-left: 15px;
+    padding-left: 3px;
+    padding-right: 3px;
+    border: 1px solid black;
+    border-color: #000;
+    border-radius: 2px;
+}
+
+
+#scatter-parent {
+    position: relative;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+.tick line {
+    opacity: 0.2;
+}
+
+.tooltip {
+    box-sizing: border-box;
+    position: absolute;
+    display: none;
+    top: 0;
+    left: -100000000px;
+    padding: 8px 12px;
+    font-family: sans-serif;
+    font-size: 12px;
+    color: #333;
+    background-color: #fff;
+    border: 1px solid #333;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 2;
+    opacity: unset;
+}
+
+#scatter-mode-selector * {
+    margin: 0px 2px 0px 2px;
+}
+
+#scatter-mode-selector{
+    padding: 3px;
+    margin: 3px;
+    border: 1px solid black;
+    border-radius: 3%;
+    border-width: 1px;
+}

histoqc/ui/static/css/style.css

@@ -1,10 +1,56 @@
+body,
+html {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-size: 12px;
+  background-color: aliceblue;
+}
+
 body {
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-  margin: 24px;
-  background: #fcfcfc;
-  line-height: 1.45em;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+.plot {
+  position: absolute;
+}
+
+.card-header {
+  padding: 5px;
+}
+
+#scatter-card {
+  height: 25vh;
+  width: 15vw;
+}
+
+#parcoords-card {
+  height: 25vh;
+}
+
+#overview-gallery-card {
+  height: 45vh;
+}
+
+#plot-canvas {
+  z-index: 0;
+
+}
+
+#grid {
+  height: 15vh;
+}
+
+.slick-pager {
+  height: 100%;
+}
+
+.popover-header {
+  margin: 0;
 }
+
 a {
   color: #555;
 }
@@ -21,13 +67,7 @@ ul {
 p {
   width: 560px;
 }
-pre {
-  color: #444;
-  font-family: Ubuntu Mono, Monaco, monospace;
-  padding: 4px 8px;
-  background: #f2f2f2;
-  border: 1px solid #ccc;
-}
+
 h1 small {
   font-weight: normal;
   font-size: 0.5em;
@@ -49,11 +89,6 @@ input {
 }
 
 /*SlickGrid */
-#grid {
-  width: 100% !important;  /* vs jquery resizable */
-  height: 437px;
-  margin-top: 4px;
-}
 .slick-header-column {
   font-weight:bold;
   cursor: move;