From 9f5951791b5420b2cabbe7cdfe8151ee9f062147 Mon Sep 17 00:00:00 2001 From: jackson Date: Fri, 26 Apr 2024 08:40:51 -0400 Subject: [PATCH] cleaned up code and matched python module structure --- histoqc/ui/__init__.py | 0 histoqc/ui/{app.py => __main__.py} | 11 +- .../static/css/{index.css => image-view.css} | 118 +---------------- histoqc/ui/static/css/scatterplot.css | 68 ++++++++++ histoqc/ui/static/css/style.css | 69 +++++++--- histoqc/ui/templates/index.html | 119 +----------------- 6 files changed, 130 insertions(+), 255 deletions(-) create mode 100644 histoqc/ui/__init__.py rename histoqc/ui/{app.py => __main__.py} (80%) rename histoqc/ui/static/css/{index.css => image-view.css} (57%) create mode 100644 histoqc/ui/static/css/scatterplot.css diff --git a/histoqc/ui/__init__.py b/histoqc/ui/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/histoqc/ui/app.py b/histoqc/ui/__main__.py similarity index 80% rename from histoqc/ui/app.py rename to histoqc/ui/__main__.py index 4cbb22e..8b3d4f9 100644 --- a/histoqc/ui/app.py +++ b/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() + diff --git a/histoqc/ui/static/css/index.css b/histoqc/ui/static/css/image-view.css similarity index 57% rename from histoqc/ui/static/css/index.css rename to histoqc/ui/static/css/image-view.css index 5bcd761..004fcf5 100644 --- a/histoqc/ui/static/css/index.css +++ b/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; diff --git a/histoqc/ui/static/css/scatterplot.css b/histoqc/ui/static/css/scatterplot.css new file mode 100644 index 0000000..de33ded --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/histoqc/ui/static/css/style.css b/histoqc/ui/static/css/style.css index aaf6e0c..a16321f 100755 --- a/histoqc/ui/static/css/style.css +++ b/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; diff --git a/histoqc/ui/templates/index.html b/histoqc/ui/templates/index.html index bf0b36f..c9bfe8a 100644 --- a/histoqc/ui/templates/index.html +++ b/histoqc/ui/templates/index.html @@ -26,125 +26,15 @@ + - - - - @@ -160,7 +50,6 @@ -