From be18b9db7411bfdde90893ce415dda9be89f88d8 Mon Sep 17 00:00:00 2001 From: Brigitte Hofmeister Date: Mon, 14 Nov 2016 11:00:39 -0500 Subject: [PATCH] updated formatting for dialog...dialog not functional though --- css/main.css | 52 +++++++- js/View/Dialog/NucleotideDensityDialog.js | 146 ++++++++++++++++++++-- js/View/Track/NucleotideDensity.js | 3 + 3 files changed, 193 insertions(+), 8 deletions(-) diff --git a/css/main.css b/css/main.css index ea1777f..e27cfbe 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,4 @@ +/*@import url("../../../src/dojox/widget/ColorPicker/ColorPicker.css");*/ div.nuc-dens-sublabel { z-index: 10; @@ -16,5 +17,54 @@ div.nuc-dens-sublabel.last { div#nuc-dens-parameters{ border-bottom: 1px solid lightgray; - padding-bottom: 3px; + padding-bottom: 5px; +} + +/* dialog table options */ + +table#nuc-dens-tbl{ + border-collapse: collapse; + margin-top: 3px; +} +#nuc-dens-tbl th{ + font-weight: bold; + padding-right: 5px; + padding-left: 3px; +} + +td#nuc-dens-tbl-clrtype span{ + margin: 0px 1px 0px 3px; +} +td.nuc-dens-tbl-ctx-col div.dijitTextBox { + width: 75px; + background: white; +} + +td.nuc-dens-tbl-clr-col div.dijitTextBox { + width: 75px; + background: white; +} +td.nuc-dens-tbl-ctx-col{ + padding: 1px 3px 1px 0px; +} +td.nuc-dens-tbl-clr-col{ + border-left: 1px solid black; + padding-left: 3px; +} + +td.nuc-dens-tbl-ctx-col div.dijitTextBox input.nuc-dens-tbl-txt{ + padding-bottom: 1px; + width: 50px; +} +td.nuc-dens-tbl-clr-col div.dijitTextBox input.nuc-dens-tbl-txt{ + width: 75px; +} + +.nuc-dens-tbl-txt{ + border: none; +} + +.nuc-dens-tbl-clr-view{ + height: 16px; + width: 75px; } diff --git a/js/View/Dialog/NucleotideDensityDialog.js b/js/View/Dialog/NucleotideDensityDialog.js index 3bf5f79..0939f5c 100644 --- a/js/View/Dialog/NucleotideDensityDialog.js +++ b/js/View/Dialog/NucleotideDensityDialog.js @@ -1,20 +1,42 @@ define([ 'dojo/_base/declare', + 'dojo/_base/array', + 'dojo/_base/lang', 'dojo/dom-construct', + 'dojo/dom-style', 'dojo/on', + "dojo/domReady!", + 'dojo/request/script', 'dijit/focus', 'dijit/form/NumberSpinner', 'dijit/form/Button', - 'JBrowse/View/Dialog/WithActionBar' + 'dijit/form/RadioButton', + 'dijit/form/ValidationTextBox', + 'dijit/form/TextBox', + "dijit/InlineEditBox", + 'JBrowse/View/Dialog/WithActionBar', + 'dojox/widget/ColorPicker', + 'NucleotideDensityPlugin/View/ColorHandler' ], function( declare, + array, + lang, dom, + domStyle, on, + domReady, + dojoScript, focus, NumberSpinner, Button, - ActionBarDialog + dijitRadioButton, + ValidationTextBox, + TextBox, + InlineEditBox, + ActionBarDialog, + ColorPicker, + ColorHandler ) { return declare(ActionBarDialog, { title: 'Set Nucleotide Density Track Options', @@ -23,6 +45,11 @@ function( this.windowSize = args.windowSize || 100; this.windowDelta = args.windowDelta || 10; this.browser = args.browser; + this.contexts = args.contexts | []; + this.colors = args.colors; + this.colorType = ColorHandler.getColorType(this.colors); + this.singleColor = this.colorType === 'single' ? this.colors : ''; + this.randomColors = args.randomColors; this.setCallback = args.setCallback || function() {}; this.cancelCallback = args.cancelCallback || function() {}; }, @@ -30,12 +57,16 @@ function( _fillActionBar: function(actionBar) { new Button({ label: 'OK', - onClick: dojo.hitch(this, function() { + onClick: lang.hitch(this, function() { var windowSize = +this.windowSizeSpinner.getValue(); var windowDelta = +this.windowDeltaSpinner.getValue(); if (isNaN(windowSize) || isNaN(windowDelta)) { return; } + var returnCtx = array.map(this.contextInputs, function(input){ + return input.value.toUpperCase(); + }); + //console.log(returnCtx); this.setCallback && this.setCallback(windowSize, windowDelta); this.hide(); }) @@ -43,7 +74,7 @@ function( new Button({ label: 'Cancel', - onClick: dojo.hitch(this, function() { + onClick: lang.hitch(this, function() { this.cancelCallback && this.cancelCallback(); this.hide(); }) @@ -56,12 +87,16 @@ function( var topPane = dom.create('div',{id:'nuc-dens-parameters'}); this._createTopPane(topPane); - + // bottom pane with nucleotide contexts + var bottomPane = dom.create('div',{id:'nuc-dens-contexts'}); + this._createBottomPane(bottomPane); this.set('content', [ - topPane + topPane, + bottomPane ]); this.inherited(arguments); + dojoScript.get('plugins/NucleotideDensityPlugin/js/View/jscolor.js'); }, _createTopPane: function(obj){ @@ -85,9 +120,106 @@ function( dom.create('br',{},obj); }, + _createBottomPane: function(obj){ + var thisB = this; + var tblo = dom.create('table',{id:'nuc-dens-tbl'}, obj); + var widths = [75, 100, 100]; + for(var i=0;i<3; i++){ + dom.create('col',{width:widths[i]+'px'},tblo); + } + var tbl = dom.create('tbody',{},tblo); + dom.create('tr',{innerHTML:'Color'}, tbl); + var row, data1, data2, data3; + + // row of radio buttons to determine color type + row = dom.create('tr', {}, tbl); + data1 = dom.create('th',{innerHTML: "Sequence
Context", rowspan:2}, row); + data2 = dom.create('td',{id:'nuc-dens-tbl-clrtype', className: 'nuc-dens-tbl-clr-col', colspan: 2}, row); + var types = ['random','single','individual']; + array.forEach(types, function(t){ + var btn = new dijitRadioButton({ + checked: t === thisB.colorType, + value: t, + name: 'nuc-dens-tbl-clrtype-btn', + /*className: 'nuc-dens-tbl-clrtype-btn'*/ + }); + btn.onClick = lang.hitch(thisB, '_setColorType', btn); + dom.create('span',{innerHTML:t}, data2); + data2.append(btn.domNode); + + }); + // text box for single color + row = dom.create('tr', {}, tbl); + //data1 = dom.create('td',{}, row); + data2 = dom.create('td',{colspan: 2, className:'nuc-dens-tbl-clr-col'}, row); + var clrtext = new TextBox({ + name: 'nuc-dens-sngl-clr', + className: 'nuc-dens-tbl-txt', + id: 'nuc-dens-sngl-clr-txt', + value: thisB.singleColor + }); + clrtext.placeAt(data2); + dom.create('td',{}, row); + + // row of contexts with color + var cnt = 0; + thisB.contextInputs = []; + thisB.colorInputs = []; + thisB.inputCounts = []; + array.forEach(thisB.contexts, function(ctx){ + row = dom.create('tr',{id:'nuc-dens-tbl-row-'+cnt, className: 'nuc-dens-tbl-row'}, tbl); + + // context + data1 = dom.create('td', {className: 'nuc-dens-tbl-ctx-col'},row); + var txt = new ValidationTextBox({ + // name: ''+cnt, + className: 'nuc-dens-tbl-txt', + id: 'nuc-dens-tbl-ctx-txt-'+cnt, + value: ctx, + regExpGen: function(){return '[ACGTURYSWKMBDHVNacgturyswkmbdhvn]*'}, + invalidMessage: 'Not valid nucleotide sequence' + }); + txt.placeAt(data1); + + thisB.contextInputs.push(txt); + + // color input text box + data2 = dom.create('td',{className: 'nuc-dens-tbl-clr-col'}, row); + var clrHex = ColorHandler.getConfigColor(ctx, thisB.contexts, thisB.colors, thisB.randomColors); + var clr = new TextBox({ + className: 'nuc-dens-tbl-txt', + id: 'nuc-dens-tbl-clr-txt-'+cnt, + value: clrHex, + //style: 'width:75px;', + }); + clr.placeAt(data2); + thisB.colorInputs.push(clr); + + // color preview + var t = dom.create('td',{},row); + data3 =dom.create('div', {style: 'background-color:'+clrHex+';', className: 'nuc-dens-tbl-clr-view', id: 'nuc-dens-tbl-clr-view-'+cnt}, t); + + thisB.inputCounts.push(cnt); + cnt++; + + }); + }, + + _setColorType: function(input){ + var singleId = 'nuc-dens-sngl-clr-txt'; + var colorTxtId = 'nuc-dens-tbl-clr-txt-'; + //console.log(input.value); + // handle random + + // handle single + + // handle indiv + + }, + hide: function() { this.inherited(arguments); - window.setTimeout(dojo.hitch(this, 'destroyRecursive'), 500); + window.setTimeout(lang.hitch(this, 'destroyRecursive'), 500); } }); }); diff --git a/js/View/Track/NucleotideDensity.js b/js/View/Track/NucleotideDensity.js index c99971a..fee7960 100644 --- a/js/View/Track/NucleotideDensity.js +++ b/js/View/Track/NucleotideDensity.js @@ -222,6 +222,9 @@ function( }, windowSize: track.config.windowSize, windowDelta: track.config.windowDelta, + contexts: track.config.context, + colors: track.config.colors, + randomColors: track.randomColors }).show(); } });