diff --git a/README.md b/README.md index 3eddc3e..13e6aaa 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ You need to include the following dependencies: 'node_modules/bootstrap/dist/js/bootstrap.min.js' 'node_modules/select2/select2.js' 'node_modules/jquery-ui-dist/jquery-ui.min.js' - 'node_modules/fabric/dist/fabric.js' + 'node_modules/svgjs/dist/svg.js' 'node_modules/clipboard/dist/clipboard.min.js' 'node_modules/plate-map/dist/package/js/plate-map.min.js' ``` @@ -83,7 +83,7 @@ You need to include the following dependencies: ## Quick start Embed code similar to the below to add the plate layout tool to your project: ```html -
+
``` The source file `src/js/example.js` (shown below) initializes the plate layout tool. See Configurations Options for all available settings. **Note** that this source file is not included in the npm package, but it is available on @@ -91,8 +91,8 @@ the Github repository. ```js window.onload = function() { //Define fields to hold data - var fields = { - Volume: { + let fields = [ + { required: true, id: 'volume', name: 'Volume', @@ -101,27 +101,27 @@ the Github repository. units: ["uL", "mL"], defaultUnit: "uL" }, - Polymerase: { + { required: true, id: 'pol', name: 'Polymerase', type: 'multiselect', placeHolder: "Polymerase", - options: { - 'Taq 1': { + options: [ + { id: '234', - name: 'Taq 1' + text: 'Taq 1' }, - 'Taq 2': { + { id: '123', - name: 'Taq 2' + text: 'Taq 2' } - } + ] } - }; + ]; // Define presentation attributes - var attributes = { + let attributes = { presets: {// Define quick pick of different combinations of checked fields "preset 1": ['volume', 'pol'], "preset 2": ["pol"] @@ -135,7 +135,8 @@ the Github repository. }; // Main function - $("#my-plate-layout").plateLayOut({ + let widget = $("my-plate-map"); + widget.plateMap({ numRows: 8, numCols: 12, readOnly: false, // optional @@ -150,7 +151,7 @@ the Github repository. }); //You can trigger the load of plateData at any time, //including initializing, using the getPlates method - $("#my-plate-layout").plateLayOut("getPlates", plateData); + widget.plateMap("getPlates", plateData); } ``` @@ -166,14 +167,14 @@ Every time after mouse up event on canvas, selectedWells function will be trigge # Major Functions The following functions may be called at any time to interact with the UI. -Typically you will invoke these functions using `$("#mylayout").plateLayOut("function", ...args)` form. +Typically you will invoke these functions using `$("#mylayout").plateMap("function", ...args)` form. -## getPlates(data) +## loadPlate(data) This function may be called at any time to load data. Well data should be passed in the following form: ```js -{ - derivative: { - "0": { //row-major index of well +data = { + wells: { + "A1": { //address of well wellData: { field_1: "value 1", field_2: "value 2", @@ -188,7 +189,7 @@ This function may be called at any time to load data. Well data should be passed }, { multiplex_field: "multiplex field1 id2", - subfield_1: "value 3" + subfield_1: "value 3", subfield_2: "value 4" } ], @@ -205,7 +206,6 @@ This function may be called at any time to load data. Well data should be passed } ] - } } }, @@ -216,52 +216,42 @@ This function may be called at any time to load data. Well data should be passed "field_4", "field_5", "field_6", + "field_6_multiplex_field1", //activate checkbox for subfield "field_7", ], - selectedAreas: [ //min and max rows and columns, inclusive - { - minRow: 0, - maxRow: 3, - minCol: 2, - maxCol: 3 - } - ], - focalWell: { // position of current focal well - row: 0, - col: 2 - } + selectedAddresses: ["A1", "A2", "A3"] } ``` -## createObject() -Calling this function will return the current state of the plate-map, in the form as passed into `getPlates`. +## getPlate() +Calling this function will return the current state of the plate-map, in the form as passed into `loadPlate`. ```js -$("#my-plate-layout").plateLayOut("createObject") +$("#my-plate-map").plateMap("getPlate") ``` ## isReadOnly() This function will disable editing of the plates, set `flag` to true for read only mode and set `flag` to false to disable read only mode ```js -$("#mylayout").plateLayOut("isReadOnly", flag) +$("#mylayout").plateMap("isReadOnly", flag) ``` ## isDisableAddDeleteWell() This function will disable adding and removing the existing wells. Set `flag` to true will set the current state of the plate as reference and remove the ability to add and remove wells. `defaultFields` can be specified for setting default values to existing empty wells (`defaultFields` format: `{fieldId1: val1, fieldId2: val2, ...}`) ```js -$("#mylayout").plateLayOut("isDisableAddDeleteWell", flag, defaultFields) +$("#mylayout").plateMap("isDisableAddDeleteWell", flag, defaultFields) ``` -## getSelectedObject() -Calling this function will return the derivative of the current selected wells on the plate +## setSelectedAddresses() +Calling this function will set the input address as selected wells on the plate, `addresses` is a list of addresses + (example: ['A1', 'A2', ...]) ```js -$("#my-plate-layout").plateLayOut("getSelectedObject") +$("#my-plate-map").plateMap("setSelectedAddresses", addresses) ``` -## setSelectedWell() -Calling this function will set the input address as selected wells on the plate, `address_list` is a list of addresses - (example: ['A1', 'A2', ...]) +## getSelectedAddresses() +Calling this function will return the addresses of selected wells on the plate, as in `setSelectedAddresses` ```js -$("#my-plate-layout").plateLayOut("setSelectedWell", address_list) +$("#my-plate-map").plateMap("getSelectedAddresses") ``` # Data Types @@ -277,7 +267,7 @@ save the value. Numeric fields may optionally allow for units. You can specify the default unit if desired, otherwise the first unit will be used. ```js -Volume: { +some_numeric_field = { required: true, id: 'volume', name: 'Volume', @@ -285,21 +275,21 @@ Volume: { placeholder: "Volume", units: ["uL", "mL"], defaultUnit: "uL" -} +}; ``` see the units in the above object. Units will be a seperate dropdown and will be placed over the text box where we enter speed data. when numeric field is used as a sub field for multiplex field, if the numeric field has multiplex units, the set up of the field will become: ```js -condition_amt: { +some_multiplex_numeric_field = { required: false, id: 'raw_value', name: 'Amount', type: 'numeric', hasMultiplexUnit: true, units: ["unit1", "unit2", "unit3", "unit4", "unit5", "unit6"] -} +}; ``` Note that `units` attribute is a list of all the possible options for `condition_amt` field. More examples at the end of the page @@ -310,7 +300,7 @@ Name says it all, Just brought the select2 to show it. ## Select Selected single option using select2 dropdown.Options field lists options in order. ```js -Polymerase: { +some_select_field= { required: true, id: 'pol', name: 'Polymerase', @@ -319,33 +309,33 @@ Polymerase: { options: [ { id: '234', - name: 'Taq 1' + text: 'Taq 1' }, { id: '123', - name: 'Taq 2' + text: 'Taq 2' } ] -} +}; ``` ## Multiselect Select multiple options using select2 picker. Options field lists options in order. ```js -Polymerase: { +some_multiselect_field = { required: true, - id: 'pol', - name: 'Polymerase', - type: 'multiselect', + id: "pol", + name: "Polymerase", + type: "multiselect", placeHolder: "Polymerase", options: [ { - id: '234', - name: 'Taq 1' + id: "234", + text: "Taq 1" }, { - id: '123', - name: 'Taq 2' + id: "123", + text: "Taq 2" } ] } @@ -359,55 +349,49 @@ specify sub fields, components of multiplexFields can be any of the basic field ### Example 1: multiplex field without sub field multiplex units ```js -Amplicon: { +some_multiplex_field = { required: true, - id: 'amplicon_id', + id: "amplicon_id", name: "Amplicon", type: "multiplex", options: [ - { - id: 'a', - text: 'amplicon_a' - }, - { - id: 'b', - text: 'amplicon_b' - } + {id: "a", text: "amplicon_a"}, + {id: "b", text: "amplicon_b"} ], - multiplexFields: { - template_ngul: { + multiplexFields: [ + { required: true, - id: 'template_ngul', - name: 'template conc', - type: 'numeric', - defaultUnit: 'ng/ul' + id: "template_ngul", + name: "template conc", + type: "numeric", + defaultUnit: "ng/ul" }, - primer_umolarity: { + { required: true, - id: 'primer_umolarity', - name: 'Primer conc', - type: 'numeric', + id: "primer_umolarity", + name: "Primer conc", + type: "numeric", placeHolder: "Primer", - units: ['uM (final)', "unit1"], - defaultUnit: 'uM (final)' + units: ["uM (final)", "unit1"], + defaultUnit: "uM (final)" }, - probe_umolarity: { + { required: true, - id: 'probe_umolarity', - name: 'Probe conc', - type: 'numeric', + id: "probe_umolarity", + name: "Probe conc", + type: "numeric", placeHolder: "Probe", - defaultUnit: 'uM (final)' + defaultUnit: "uM (final)" }, - dilution_factor: { + { required: true, - id: 'dilution_factor', - name: 'Dilution factor', - type: 'numeric', + id: "dilution_factor", + name: "Dilution factor", + type: "numeric", placeHolder: "Dilution factor", - defaultUnit: 'X' + defaultUnit: "X" } - } + ] } ``` see the example above, Amplicon is a multiplex field contains sub fields: template concentration, primer concentration, @@ -415,49 +399,49 @@ probe concentration and dilution factor. ### Example 2: multiplex field with multiplex unit sub fields ```js -experimental_conditions: { +some_multiplex_field = { required: false, - id: 'experimental_conditions', + id: "experimental_conditions", name: "Experimental Conditions", type: "multiplex", placeHolder: "Experimental Conditions", options: [ { id: "a", - unitOptions: {raw_value: ["unit1", "unit2"]}, + unitOptions: {"raw_value": ["unit1", "unit2"]}, text: "experimental condition1" }, { id: "b", - unitOptions: {raw_value: ["unit3", "unit4"]}, + unitOptions: {"raw_value": ["unit3", "unit4"]}, text: "experimental condition2" }, { id: "c", - unitOptions: {raw_value: ["unit5", "unit6"]}, + unitOptions: {"raw_value": ["unit5", "unit6"]}, text: "experimental condition3" } ], - multiplexFields: { - condition_amt: { + multiplexFields: [ + { required: false, - id: 'raw_value', - name: 'Amount', - type: 'numeric', - units: ["unit1", "unit2", "unit3", "unit4", "unit5", "unit6"] + id: "raw_value", + name: "Amount", + type: "numeric", + units: ["unit1", "unit2", "unit3", "unit4", "unit5", "unit6"], hasMultiplexUnit: true }, - is_modulator: { + { required: false, - id: 'is_modulator', - name: 'Is Additive', - type: 'select', + id: "is_modulator", + name: "Is Additive", + type: "select", options:[ - {id:'a',text: 'Is Modulator'}, - {id:'b',text: 'Not Modulator'} + {id:"a", text: "Is Modulator"}, + {id:"b", text: "Not Modulator"} ] } - } + ] } ``` In this case `experimental_conditions` is a multiplex field with subfields `condition_amt` and `is_modulator`. @@ -577,7 +561,7 @@ npm run build.package ``` ## Add External Dependencies -If you want to external dependencies to the Plate-Layout tool, you can follow the next steps: +If you want to external dependencies to the PlateMap tool, you can follow the next steps: - Install the npm dependency: ```bash @@ -586,7 +570,7 @@ If you want to external dependencies to the Plate-Layout tool, you can follow th - In the gulpfile.js, add the new dependency path(s) to the constant PATH under the dependencies key. For example, if your dependency has just a javascript distribution file `dist/js/index.js`, the PATH constant in the gulpfile.js should look like this: -```js +``` const PATH = { source: { app: {...}, diff --git a/dist/css/plate-map.css b/dist/css/plate-map.css index 9e96d3a..3b858f9 100644 --- a/dist/css/plate-map.css +++ b/dist/css/plate-map.css @@ -382,6 +382,10 @@ background-color: white; } +.plate-setup-bottom-table tr.selected td { + background-color: lightblue; +} + .plate-setup-color-text { font-size: 14px; border: none; @@ -500,3 +504,72 @@ input.invalid { margin-top: -44px; z-Index: 99999 !important; } + +.plate-setup-canvas-container > svg { + cursor: pointer; +} + +.plate-setup-canvas-container > svg text { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.plate-setup-canvas-container > svg * { + vector-effect: non-scaling-stroke; +} + +.plate-setup-canvas-container .rowHead text, .colHead text { + font-size: 13px; + font-family: sans-serif, Arial; + font-weight: bold; + text-anchor: middle; + dominant-baseline: central; +} + +.plate-setup-canvas-container .tile .highlight { + fill: none; +} + +.plate-setup-canvas-container .tile .well { + stroke: gray; + stroke-width: 0.5; +} + +.plate-setup-canvas-container .tile .fill .center, .plate-setup-canvas-container .tile .fill .center_incomplete { + fill: white; + stroke: gray; + stroke-width: 0.5; +} + +.plate-setup-canvas-container .tile:not(.incomplete) .fill .center_incomplete { + display:none; +} + +.plate-setup-canvas-container .tile.incomplete .fill .center { + display:none; +} + +.plate-setup-canvas-container .tile .fill .label { + font-size: 13px; + font-family: sans-serif, Arial; + text-anchor: middle; + dominant-baseline: central; +} + +.plate-setup-canvas-container .tile.incomplete .fill .label { + fill: red; +} + +.plate-setup-canvas-container .tile.selected .highlight { + fill: lightblue; +} + +.plate-setup-canvas-container .tile.empty .fill { + display: none; +} + +.plate-setup-canvas-container .tile:not(.empty) .well { + display: none; +} diff --git a/dist/css/plate-map.min.css b/dist/css/plate-map.min.css index d9733d7..72f24e2 100644 --- a/dist/css/plate-map.min.css +++ b/dist/css/plate-map.min.css @@ -1,2 +1,2 @@ -.plate-setup-container{width:1024px;height:768px;position:relative}.plate-setup-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;flex-direction:column;background-color:#f5f5f5}.plate-setup-top-section{height:540px;top:0;left:0;right:0;position:absolute}.plate-setup-top-left{width:674px;top:0;bottom:0;position:absolute}.plate-setup-top-right{left:674px;top:0;bottom:0;right:0;position:absolute}.plate-setup-overlay-container{height:32px;top:10px;left:16px;right:16px;position:inherit;background-color:#464646;border-radius:4px;display:flex;justify-content:space-between;align-items:baseline;vertical-align:middle}.plate-setup-overlay-radio-container{width:32px;height:32px}.plate-setup-overlay-text-container{color:#fff;font-size:12px;line-height:30px;height:32px;margin:2px 8px;flex:1 1 auto}.plate-setup-overlay-bottom-button-container,.plate-setup-overlay-button-container{flex:0 0 auto;display:flex;flex:1 1 0}.plate-setup-button{height:23px;font-size:12px;border:none;background-color:#fff;border-radius:4px;margin-right:4px;flex:1 0 0;white-space:nowrap}.plate-setup-clicked-button{height:23px;font-size:12px;border:none;background-color:#7fffd4;border-radius:4px;margin-right:4px;flex:1 0 0;white-space:nowrap}.plate-setup-canvas-container{top:52px;left:16px;right:16px;bottom:10px;position:absolute}.plate-setup-tab-container{position:absolute;top:10px;left:10px;bottom:10px;right:10px;background-color:#fff;border:solid 1px #e1e1e1}.plate-setup-tab-head{left:0;right:0;height:23px;border-bottom:solid 1px #e1e1e1;background-color:#f5f5f5;display:flex}.plate-setup-tab{height:23px;background-color:#ebebeb;border-right:solid 1px #e1e1e1;cursor:pointer;font-size:10px;text-align:center;padding:5px;box-sizing:border-box;flex:1 1 auto;white-space:nowrap;overflow:hidden}.plate-setup-tab:last-child{border-right:none}.plate-setup-tab-selected{height:24px;background-color:#fff;color:#00506e;flex-shrink:0}.plate-setup-tab-data-container{left:0;right:0;height:442px;border-bottom:solid 1px #e1e1e1;position:absolute}.plate-setup-data-div{top:0;left:0;bottom:0;right:0;position:absolute;background-color:#fff;overflow:auto}.plate-setup-well-attr-container{top:472px;left:0;right:0;height:20px;box-sizing:border-box;padding:0 16px;color:#00506e;text-align:center;position:absolute;font-size:10px}.plate-setup-preset-container{top:490px;left:0;right:0;height:22px;position:absolute;box-sizing:border-box;padding:0 16px;text-align:center;display:flex;justify-content:center}.plate-setup-preset-tab{display:inline-block;flex-basis:50px;padding:0 5px;margin:0 1px;height:20px;background-color:#fff;border:solid 1px #e1e1e1;border-radius:4px;cursor:pointer;font-size:10px;text-align:center}.plate-setup-preset-tab-selected{display:inline-block;flex-basis:50px;padding:0 5px;margin:0 1px;height:20px;background-color:#e1e1e1;border:solid 1px #e1e1e1;border-radius:4px;cursor:pointer;font-size:11px;text-align:center;color:#00506e}.plate-setup-preset-tab-div{padding-top:3px}.plate-setup-tab-default-field{display:flex;padding:10px 16px 0 16px}.plate-setup-tab-field-left-side{width:32px;padding-top:16px}.plate-setup-tab-field-right-side{flex:1}.plate-setup-tab-name{font-size:12px;display:inline-block;line-height:16px}.plate-setup-tab-name-singleSelect{font-size:12px;margin-top:5px}.plate-setup-tab-name-missing{height:20px;font-size:12px;background:red}.plate-setup-tab-field-container,.plate-setup-tab-field-container-singleSelect{width:100%;display:flex}.plate-setup-tab-field-container .select2-selection--multiple .select2-selection__choice{white-space:normal}.plate-setup-tab-input,.plate-setup-tab-multiplex-single-select-field,.plate-setup-tab-select-field{height:28px;flex:1 1 auto;width:30px;margin:auto}.plate-setup-tab-multiselect-field{min-height:28px;flex:1 1 auto;width:30px}.plate-setup-tab-label-select-field,.plate-setup-tab-unit{width:130px;overflow:hidden;text-overflow:ellipsis;height:28px;box-sizing:border-box;padding-left:5px}.plate-setup-tab-unit{line-height:26px;color:#444;white-space:nowrap}.plate-setup-tab-check-box{cursor:pointer;border:1px solid gray;display:inline-block;height:16px;width:16px;text-align:center;line-height:16px}.plate-setup-bottom-control-container{top:0;left:0;right:0;height:32px;background-color:#464646;position:absolute;display:flex;justify-content:space-between;align-items:baseline;vertical-align:middle}.plate-setup-bottom-container{top:540px;left:0;right:0;bottom:0;position:absolute;background-color:#e1e1e1}.plate-setup-bottom-table-container{top:32px;left:0;bottom:0;right:0;position:absolute;overflow:auto}.plate-setup-bottom-table{font-size:14px;border-collapse:collapse;width:100%}.plate-setup-bottom-table thead th{position:sticky;position:-webkit-sticky;top:0;z-index:999;background-color:#fff;background-clip:padding-box}.plate-setup-bottom-table thead th:before{content:'';position:absolute;left:0;top:-1px;width:100%;border-top:solid #c2c2c2 1px}.plate-setup-bottom-table thead th:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;border-bottom:solid #c2c2c2 1px}.plate-setup-bottom-table th{border:solid #c2c2c2 1px;padding:5px 10px;font-weight:700;font-size:12px;text-align:left}.plate-setup-bottom-table td{border:solid #c2c2c2 1px;padding:5px 10px;background-color:#fff}.plate-setup-color-text{font-size:14px;border:none;border-radius:4px;padding:3px 15px;background-color:#fff;margin-right:4px}.plate-setup-bottom-id{font-family:sans-serif;width:40px;text-align:center;background-image:linear-gradient(to right,rgba(255,255,255,.3),transparent)}input.invalid{background-color:pink}.plate-setup-remove-all-button-container{text-align:left}.plate-setup-remove-all-button{width:100%;font-size:12px;text-overflow:ellipsis;text-align:left;white-space:nowrap;border:1px solid #aaa;border-radius:4px;margin-top:2px;color:#444;background-color:#fff;background-image:linear-gradient(to top,#eee 0,#fff 50%)}.plate-modal{display:none;position:fixed;z-index:2000;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.plate-modal-content{font-size:14px;background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888}.plate-modal-content>*{width:100%}.dialog-buttons{margin-top:10px;display:inline-block;text-align:right}.dialog-buttons button{margin-left:4px}.plate-popout-table{border-collapse:collapse;width:100%;border:1px solid #000;padding:5px}.plate-popout-th{text-align:left;background-color:#fff;color:#000;font-size:12px;border:1px solid #000;padding:5px}.plate-popout-tr:hover{background-color:#f5f5f5;border:1px solid #000;padding:5px}.plate-popout-td{text-align:left;font-size:11px;border:1px solid #000;padding:5px}.plate-field-warning-image{vertical-align:baseline;margin:0 0 0}.pop-out-text{position:fixed;display:none;background:#fff;border:1px solid;float:left;margin-top:-44px;z-Index:99999!important} -/*# sourceMappingURL=plate-map.min.css.map */ \ No newline at end of file +.plate-setup-container{width:1024px;height:768px;position:relative}.plate-setup-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;flex-direction:column;background-color:#f5f5f5}.plate-setup-top-section{height:540px;top:0;left:0;right:0;position:absolute}.plate-setup-top-left{width:674px;top:0;bottom:0;position:absolute}.plate-setup-top-right{left:674px;top:0;bottom:0;right:0;position:absolute}.plate-setup-overlay-container{height:32px;top:10px;left:16px;right:16px;position:inherit;background-color:#464646;border-radius:4px;display:flex;justify-content:space-between;align-items:baseline;vertical-align:middle}.plate-setup-overlay-radio-container{width:32px;height:32px}.plate-setup-overlay-text-container{color:#fff;font-size:12px;line-height:30px;height:32px;margin:2px 8px;flex:1 1 auto}.plate-setup-overlay-bottom-button-container,.plate-setup-overlay-button-container{flex:0 0 auto;display:flex;flex:1 1 0}.plate-setup-button{height:23px;font-size:12px;border:none;background-color:#fff;border-radius:4px;margin-right:4px;flex:1 0 0;white-space:nowrap}.plate-setup-clicked-button{height:23px;font-size:12px;border:none;background-color:#7fffd4;border-radius:4px;margin-right:4px;flex:1 0 0;white-space:nowrap}.plate-setup-canvas-container{top:52px;left:16px;right:16px;bottom:10px;position:absolute}.plate-setup-tab-container{position:absolute;top:10px;left:10px;bottom:10px;right:10px;background-color:#fff;border:solid 1px #e1e1e1}.plate-setup-tab-head{left:0;right:0;height:23px;border-bottom:solid 1px #e1e1e1;background-color:#f5f5f5;display:flex}.plate-setup-tab{height:23px;background-color:#ebebeb;border-right:solid 1px #e1e1e1;cursor:pointer;font-size:10px;text-align:center;padding:5px;box-sizing:border-box;flex:1 1 auto;white-space:nowrap;overflow:hidden}.plate-setup-tab:last-child{border-right:none}.plate-setup-tab-selected{height:24px;background-color:#fff;color:#00506e;flex-shrink:0}.plate-setup-tab-data-container{left:0;right:0;height:442px;border-bottom:solid 1px #e1e1e1;position:absolute}.plate-setup-data-div{top:0;left:0;bottom:0;right:0;position:absolute;background-color:#fff;overflow:auto}.plate-setup-well-attr-container{top:472px;left:0;right:0;height:20px;box-sizing:border-box;padding:0 16px;color:#00506e;text-align:center;position:absolute;font-size:10px}.plate-setup-preset-container{top:490px;left:0;right:0;height:22px;position:absolute;box-sizing:border-box;padding:0 16px;text-align:center;display:flex;justify-content:center}.plate-setup-preset-tab{display:inline-block;flex-basis:50px;padding:0 5px;margin:0 1px;height:20px;background-color:#fff;border:solid 1px #e1e1e1;border-radius:4px;cursor:pointer;font-size:10px;text-align:center}.plate-setup-preset-tab-selected{display:inline-block;flex-basis:50px;padding:0 5px;margin:0 1px;height:20px;background-color:#e1e1e1;border:solid 1px #e1e1e1;border-radius:4px;cursor:pointer;font-size:11px;text-align:center;color:#00506e}.plate-setup-preset-tab-div{padding-top:3px}.plate-setup-tab-default-field{display:flex;padding:10px 16px 0 16px}.plate-setup-tab-field-left-side{width:32px;padding-top:16px}.plate-setup-tab-field-right-side{flex:1}.plate-setup-tab-name{font-size:12px;display:inline-block;line-height:16px}.plate-setup-tab-name-singleSelect{font-size:12px;margin-top:5px}.plate-setup-tab-name-missing{height:20px;font-size:12px;background:red}.plate-setup-tab-field-container,.plate-setup-tab-field-container-singleSelect{width:100%;display:flex}.plate-setup-tab-field-container .select2-selection--multiple .select2-selection__choice{white-space:normal}.plate-setup-tab-input,.plate-setup-tab-multiplex-single-select-field,.plate-setup-tab-select-field{height:28px;flex:1 1 auto;width:30px;margin:auto}.plate-setup-tab-multiselect-field{min-height:28px;flex:1 1 auto;width:30px}.plate-setup-tab-label-select-field,.plate-setup-tab-unit{width:130px;overflow:hidden;text-overflow:ellipsis;height:28px;box-sizing:border-box;padding-left:5px}.plate-setup-tab-unit{line-height:26px;color:#444;white-space:nowrap}.plate-setup-tab-check-box{cursor:pointer;border:1px solid gray;display:inline-block;height:16px;width:16px;text-align:center;line-height:16px}.plate-setup-bottom-control-container{top:0;left:0;right:0;height:32px;background-color:#464646;position:absolute;display:flex;justify-content:space-between;align-items:baseline;vertical-align:middle}.plate-setup-bottom-container{top:540px;left:0;right:0;bottom:0;position:absolute;background-color:#e1e1e1}.plate-setup-bottom-table-container{top:32px;left:0;bottom:0;right:0;position:absolute;overflow:auto}.plate-setup-bottom-table{font-size:14px;border-collapse:collapse;width:100%}.plate-setup-bottom-table thead th{position:sticky;position:-webkit-sticky;top:0;z-index:999;background-color:#fff;background-clip:padding-box}.plate-setup-bottom-table thead th:before{content:'';position:absolute;left:0;top:-1px;width:100%;border-top:solid #c2c2c2 1px}.plate-setup-bottom-table thead th:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;border-bottom:solid #c2c2c2 1px}.plate-setup-bottom-table th{border:solid #c2c2c2 1px;padding:5px 10px;font-weight:700;font-size:12px;text-align:left}.plate-setup-bottom-table td{border:solid #c2c2c2 1px;padding:5px 10px;background-color:#fff}.plate-setup-bottom-table tr.selected td{background-color:#add8e6}.plate-setup-color-text{font-size:14px;border:none;border-radius:4px;padding:3px 15px;background-color:#fff;margin-right:4px}.plate-setup-bottom-id{font-family:sans-serif;width:40px;text-align:center;background-image:linear-gradient(to right,rgba(255,255,255,.3),transparent)}input.invalid{background-color:pink}.plate-setup-remove-all-button-container{text-align:left}.plate-setup-remove-all-button{width:100%;font-size:12px;text-overflow:ellipsis;text-align:left;white-space:nowrap;border:1px solid #aaa;border-radius:4px;margin-top:2px;color:#444;background-color:#fff;background-image:linear-gradient(to top,#eee 0,#fff 50%)}.plate-modal{display:none;position:fixed;z-index:2000;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.plate-modal-content{font-size:14px;background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888}.plate-modal-content>*{width:100%}.dialog-buttons{margin-top:10px;display:inline-block;text-align:right}.dialog-buttons button{margin-left:4px}.plate-popout-table{border-collapse:collapse;width:100%;border:1px solid #000;padding:5px}.plate-popout-th{text-align:left;background-color:#fff;color:#000;font-size:12px;border:1px solid #000;padding:5px}.plate-popout-tr:hover{background-color:#f5f5f5;border:1px solid #000;padding:5px}.plate-popout-td{text-align:left;font-size:11px;border:1px solid #000;padding:5px}.plate-field-warning-image{vertical-align:baseline;margin:0 0 0}.pop-out-text{position:fixed;display:none;background:#fff;border:1px solid;float:left;margin-top:-44px;z-Index:99999!important}.plate-setup-canvas-container>svg{cursor:pointer}.plate-setup-canvas-container>svg text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plate-setup-canvas-container>svg *{vector-effect:non-scaling-stroke}.colHead text,.plate-setup-canvas-container .rowHead text{font-size:13px;font-family:sans-serif,Arial;font-weight:700;text-anchor:middle;dominant-baseline:central}.plate-setup-canvas-container .tile .highlight{fill:none}.plate-setup-canvas-container .tile .well{stroke:gray;stroke-width:.5}.plate-setup-canvas-container .tile .fill .center,.plate-setup-canvas-container .tile .fill .center_incomplete{fill:#fff;stroke:gray;stroke-width:.5}.plate-setup-canvas-container .tile:not(.incomplete) .fill .center_incomplete{display:none}.plate-setup-canvas-container .tile.incomplete .fill .center{display:none}.plate-setup-canvas-container .tile .fill .label{font-size:13px;font-family:sans-serif,Arial;text-anchor:middle;dominant-baseline:central}.plate-setup-canvas-container .tile.incomplete .fill .label{fill:red}.plate-setup-canvas-container .tile.selected .highlight{fill:#add8e6}.plate-setup-canvas-container .tile.empty .fill{display:none}.plate-setup-canvas-container .tile:not(.empty) .well{display:none} +/*# sourceMappingURL=plate-map.min.css.map */ diff --git a/dist/css/plate-map.min.css.map b/dist/css/plate-map.min.css.map index a20e58b..ed4d197 100644 --- a/dist/css/plate-map.min.css.map +++ b/dist/css/plate-map.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["plate-layout.css"],"names":[],"mappings":"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","file":"plate-map.min.css","sourcesContent":[".plate-setup-container {\n width: 1024px;\n height: 768px;\n position: relative;\n}\n\n.plate-setup-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n flex-direction: column;\n background-color: #f5f5f5;\n}\n\n.plate-setup-top-section {\n height: 540px;\n top: 0;\n left: 0;\n right: 0;\n position: absolute;\n}\n\n.plate-setup-top-left {\n width: 674px;\n top: 0;\n bottom: 0;\n position: absolute;\n}\n\n.plate-setup-top-right {\n left: 674px;\n top: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n}\n\n.plate-setup-overlay-container {\n height: 32px;\n top: 10px;\n left: 16px;\n right: 16px;\n position: inherit;\n background-color: #464646;\n border-radius: 4px;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n vertical-align: middle;\n}\n\n.plate-setup-overlay-radio-container {\n width: 32px;\n height: 32px;\n}\n\n.plate-setup-overlay-text-container {\n color: white;\n font-size: 12px;\n line-height: 30px;\n height: 32px;\n margin: 2px 8px;\n flex: 1 1 auto;\n}\n\n.plate-setup-overlay-button-container, .plate-setup-overlay-bottom-button-container {\n flex: 0 0 auto;\n display: flex;\n flex: 1 1 0;\n}\n\n.plate-setup-button {\n height: 23px;\n font-size: 12px;\n border: none;\n background-color: white;\n border-radius: 4px;\n margin-right: 4px;\n flex: 1 0 0;\n white-space: nowrap;\n}\n\n.plate-setup-clicked-button {\n height: 23px;\n font-size: 12px;\n border: none;\n background-color: aquamarine;\n border-radius: 4px;\n margin-right: 4px;\n flex: 1 0 0;\n white-space: nowrap;\n}\n\n\n.plate-setup-canvas-container {\n top: 52px;\n left: 16px;\n right: 16px;\n bottom: 10px;\n position: absolute;\n}\n\n.plate-setup-tab-container {\n position: absolute;\n top:10px;\n left:10px;\n bottom: 10px;\n right: 10px;\n background-color: white;\n border: solid 1px #e1e1e1;\n}\n\n.plate-setup-tab-head {\n left: 0;\n right: 0;\n height: 23px;\n border-bottom: solid 1px #e1e1e1;\n background-color: #f5f5f5;\n display: flex;\n}\n\n.plate-setup-tab {\n height: 23px;\n background-color: #ebebeb;\n border-right: solid 1px #e1e1e1;\n cursor: pointer;\n font-size: 10px;\n text-align: center;\n padding: 5px;\n box-sizing: border-box;\n flex: 1 1 auto;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.plate-setup-tab:last-child {\n border-right: none;\n}\n\n.plate-setup-tab-selected {\n height: 24px;\n background-color: white;\n color: #00506e;\n flex-shrink: 0;\n}\n\n.plate-setup-tab-data-container {\n left: 0;\n right: 0;\n height: 442px;\n border-bottom: solid 1px #e1e1e1;\n position: absolute;\n}\n\n.plate-setup-data-div {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n background-color: white;\n overflow: auto;\n}\n\n.plate-setup-well-attr-container {\n top: 472px;\n left: 0;\n right: 0;\n height: 20px;\n box-sizing: border-box;\n padding: 0px 16px;\n color: #00506e;\n text-align: center;\n position: absolute;\n font-size: 10px;\n}\n\n.plate-setup-preset-container {\n top: 490px;\n left: 0;\n right: 0;\n height: 22px;\n position: absolute;\n box-sizing: border-box;\n padding: 0px 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n}\n\n.plate-setup-preset-tab {\n display: inline-block;\n flex-basis: 50px;\n padding: 0 5px;\n margin: 0 1px;\n height: 20px;\n background-color: white;\n border: solid 1px #e1e1e1;\n border-radius: 4px;\n cursor: pointer;\n font-size: 10px;\n text-align: center;\n}\n\n.plate-setup-preset-tab-selected {\n display: inline-block;\n flex-basis: 50px;\n padding: 0 5px;\n margin: 0 1px;\n height: 20px;\n background-color: #e1e1e1;\n border: solid 1px #e1e1e1;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n text-align: center;\n color: #00506e;\n}\n\n.plate-setup-preset-tab-div {\n padding-top: 3px;\n}\n\n.plate-setup-tab-default-field {\n display: flex;\n padding: 10px 16px 0 16px;\n}\n\n.plate-setup-tab-field-left-side {\n width: 32px;\n padding-top: 16px;\n}\n\n.plate-setup-tab-field-right-side {\n flex: 1;\n}\n\n.plate-setup-tab-name {\n font-size: 12px;\n display: inline-block;\n line-height: 16px;\n}\n\n.plate-setup-tab-name-singleSelect {\n font-size: 12px;\n margin-top: 5px;\n}\n\n\n.plate-setup-tab-name-missing {\n height: 20px;\n font-size: 12px;\n background: red;\n}\n\n\n.plate-setup-tab-field-container, .plate-setup-tab-field-container-singleSelect {\n width: 100%;\n display: flex;\n}\n\n.plate-setup-tab-field-container .select2-selection--multiple .select2-selection__choice {\n white-space: normal;\n}\n\n.plate-setup-tab-input, .plate-setup-tab-select-field, .plate-setup-tab-multiplex-single-select-field {\n height: 28px;\n flex: 1 1 auto;\n width: 30px;\n margin: auto;\n}\n\n.plate-setup-tab-multiselect-field {\n min-height: 28px;\n flex: 1 1 auto;\n width: 30px;\n}\n\n.plate-setup-tab-label-select-field, .plate-setup-tab-unit {\n width: 130px;\n overflow: hidden;\n text-overflow: ellipsis;\n height: 28px;\n box-sizing: border-box;\n padding-left: 5px;\n}\n\n.plate-setup-tab-unit {\n line-height: 26px;\n color: #444;\n white-space: nowrap;\n}\n\n.plate-setup-tab-check-box {\n cursor: pointer;\n border: 1px solid gray;\n display: inline-block;\n height: 16px;\n width: 16px;\n text-align: center;\n line-height: 16px;\n}\n\n.plate-setup-bottom-control-container {\n top: 0;\n left: 0;\n right: 0;\n height: 32px;\n background-color: #464646;\n position: absolute;\n display: flex;\n justify-content:space-between;\n align-items: baseline;\n vertical-align: middle;\n}\n\n.plate-setup-bottom-container {\n top: 540px;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n background-color: #e1e1e1;\n}\n\n.plate-setup-bottom-table-container {\n top: 32px;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n overflow: auto;\n}\n\n\n.plate-setup-bottom-table {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n}\n\n.plate-setup-bottom-table thead th {\n position: sticky;\n position: -webkit-sticky;\n top: 0;\n z-index: 999;\n background-color: white;\n background-clip: padding-box;\n}\n\n.plate-setup-bottom-table thead th:before {\n content:'';\n position:absolute;\n left: 0;\n top: -1px;\n width:100%;\n border-top: solid #c2c2c2 1px;\n}\n\n.plate-setup-bottom-table thead th:after {\n content:'';\n position:absolute;\n left: 0;\n bottom: -1px;\n width:100%;\n border-bottom: solid #c2c2c2 1px;\n}\n\n.plate-setup-bottom-table th {\n border: solid #c2c2c2 1px;\n padding: 5px 10px;\n font-weight: bold;\n font-size: 12px;\n text-align: left;\n}\n\n.plate-setup-bottom-table td {\n border: solid #c2c2c2 1px;\n padding: 5px 10px;\n background-color: white;\n}\n\n.plate-setup-color-text {\n font-size: 14px;\n border: none;\n border-radius: 4px;\n padding: 3px 15px;\n background-color: WHITE;\n margin-right: 4px;\n}\n\n.plate-setup-bottom-id {\n font-family: sans-serif;\n width: 40px;\n text-align: center;\n background-image: linear-gradient(to right, rgba(255,255,255,0.3), transparent)\n}\n\ninput.invalid {\n background-color: pink;\n}\n\n.plate-setup-remove-all-button-container {\n text-align: left;\n}\n\n.plate-setup-remove-all-button{\n width: 100%;\n font-size: 12px;\n text-overflow: ellipsis;\n text-align: left;\n white-space: nowrap;\n border: 1px solid #aaa;\n border-radius: 4px;\n margin-top: 2px;\n color: #444;\n background-color: #fff;\n background-image: linear-gradient(to top, #eee 0%, #fff 50%);\n}\n/* Modal Content */\n\n.plate-modal {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 2000; /* Sit on top */\n padding-top: 100px; /* Location of the box */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n}\n\n.plate-modal-content {\n font-size: 14px;\n background-color: #fefefe;\n margin: auto;\n padding: 20px;\n border: 1px solid #888;\n}\n\n.plate-modal-content > * {\n width: 100%;\n}\n\n.dialog-buttons {\n margin-top: 10px;\n display: inline-block;\n text-align: right;\n}\n\n.dialog-buttons button {\n margin-left: 4px;\n}\n\n.plate-popout-table {\n border-collapse: collapse;\n width: 100%;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-th {\n text-align: left;\n background-color: white;\n color: black;\n font-size: 12px;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-tr:hover {\n background-color: #f5f5f5;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-td {\n text-align: left;\n font-size: 11px;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-field-warning-image{\n vertical-align: baseline;\n margin: 0px 0 0px;\n}\n\n.pop-out-text {\n position: fixed;\n display: none;\n background: white;\n border: 1px solid;\n float: left;\n margin-top: -44px;\n z-Index: 99999 !important;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["plate-layout.css"],"names":[],"mappings":"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","file":"plate-map.min.css","sourcesContent":[".plate-setup-container {\n width: 1024px;\n height: 768px;\n position: relative;\n}\n\n.plate-setup-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n flex-direction: column;\n background-color: #f5f5f5;\n}\n\n.plate-setup-top-section {\n height: 540px;\n top: 0;\n left: 0;\n right: 0;\n position: absolute;\n}\n\n.plate-setup-top-left {\n width: 674px;\n top: 0;\n bottom: 0;\n position: absolute;\n}\n\n.plate-setup-top-right {\n left: 674px;\n top: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n}\n\n.plate-setup-overlay-container {\n height: 32px;\n top: 10px;\n left: 16px;\n right: 16px;\n position: inherit;\n background-color: #464646;\n border-radius: 4px;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n vertical-align: middle;\n}\n\n.plate-setup-overlay-radio-container {\n width: 32px;\n height: 32px;\n}\n\n.plate-setup-overlay-text-container {\n color: white;\n font-size: 12px;\n line-height: 30px;\n height: 32px;\n margin: 2px 8px;\n flex: 1 1 auto;\n}\n\n.plate-setup-overlay-button-container, .plate-setup-overlay-bottom-button-container {\n flex: 0 0 auto;\n display: flex;\n flex: 1 1 0;\n}\n\n.plate-setup-button {\n height: 23px;\n font-size: 12px;\n border: none;\n background-color: white;\n border-radius: 4px;\n margin-right: 4px;\n flex: 1 0 0;\n white-space: nowrap;\n}\n\n.plate-setup-clicked-button {\n height: 23px;\n font-size: 12px;\n border: none;\n background-color: aquamarine;\n border-radius: 4px;\n margin-right: 4px;\n flex: 1 0 0;\n white-space: nowrap;\n}\n\n\n.plate-setup-canvas-container {\n top: 52px;\n left: 16px;\n right: 16px;\n bottom: 10px;\n position: absolute;\n}\n\n.plate-setup-tab-container {\n position: absolute;\n top:10px;\n left:10px;\n bottom: 10px;\n right: 10px;\n background-color: white;\n border: solid 1px #e1e1e1;\n}\n\n.plate-setup-tab-head {\n left: 0;\n right: 0;\n height: 23px;\n border-bottom: solid 1px #e1e1e1;\n background-color: #f5f5f5;\n display: flex;\n}\n\n.plate-setup-tab {\n height: 23px;\n background-color: #ebebeb;\n border-right: solid 1px #e1e1e1;\n cursor: pointer;\n font-size: 10px;\n text-align: center;\n padding: 5px;\n box-sizing: border-box;\n flex: 1 1 auto;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.plate-setup-tab:last-child {\n border-right: none;\n}\n\n.plate-setup-tab-selected {\n height: 24px;\n background-color: white;\n color: #00506e;\n flex-shrink: 0;\n}\n\n.plate-setup-tab-data-container {\n left: 0;\n right: 0;\n height: 442px;\n border-bottom: solid 1px #e1e1e1;\n position: absolute;\n}\n\n.plate-setup-data-div {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n background-color: white;\n overflow: auto;\n}\n\n.plate-setup-well-attr-container {\n top: 472px;\n left: 0;\n right: 0;\n height: 20px;\n box-sizing: border-box;\n padding: 0px 16px;\n color: #00506e;\n text-align: center;\n position: absolute;\n font-size: 10px;\n}\n\n.plate-setup-preset-container {\n top: 490px;\n left: 0;\n right: 0;\n height: 22px;\n position: absolute;\n box-sizing: border-box;\n padding: 0px 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n}\n\n.plate-setup-preset-tab {\n display: inline-block;\n flex-basis: 50px;\n padding: 0 5px;\n margin: 0 1px;\n height: 20px;\n background-color: white;\n border: solid 1px #e1e1e1;\n border-radius: 4px;\n cursor: pointer;\n font-size: 10px;\n text-align: center;\n}\n\n.plate-setup-preset-tab-selected {\n display: inline-block;\n flex-basis: 50px;\n padding: 0 5px;\n margin: 0 1px;\n height: 20px;\n background-color: #e1e1e1;\n border: solid 1px #e1e1e1;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n text-align: center;\n color: #00506e;\n}\n\n.plate-setup-preset-tab-div {\n padding-top: 3px;\n}\n\n.plate-setup-tab-default-field {\n display: flex;\n padding: 10px 16px 0 16px;\n}\n\n.plate-setup-tab-field-left-side {\n width: 32px;\n padding-top: 16px;\n}\n\n.plate-setup-tab-field-right-side {\n flex: 1;\n}\n\n.plate-setup-tab-name {\n font-size: 12px;\n display: inline-block;\n line-height: 16px;\n}\n\n.plate-setup-tab-name-singleSelect {\n font-size: 12px;\n margin-top: 5px;\n}\n\n\n.plate-setup-tab-name-missing {\n height: 20px;\n font-size: 12px;\n background: red;\n}\n\n\n.plate-setup-tab-field-container, .plate-setup-tab-field-container-singleSelect {\n width: 100%;\n display: flex;\n}\n\n.plate-setup-tab-field-container .select2-selection--multiple .select2-selection__choice {\n white-space: normal;\n}\n\n.plate-setup-tab-input, .plate-setup-tab-select-field, .plate-setup-tab-multiplex-single-select-field {\n height: 28px;\n flex: 1 1 auto;\n width: 30px;\n margin: auto;\n}\n\n.plate-setup-tab-multiselect-field {\n min-height: 28px;\n flex: 1 1 auto;\n width: 30px;\n}\n\n.plate-setup-tab-label-select-field, .plate-setup-tab-unit {\n width: 130px;\n overflow: hidden;\n text-overflow: ellipsis;\n height: 28px;\n box-sizing: border-box;\n padding-left: 5px;\n}\n\n.plate-setup-tab-unit {\n line-height: 26px;\n color: #444;\n white-space: nowrap;\n}\n\n.plate-setup-tab-check-box {\n cursor: pointer;\n border: 1px solid gray;\n display: inline-block;\n height: 16px;\n width: 16px;\n text-align: center;\n line-height: 16px;\n}\n\n.plate-setup-bottom-control-container {\n top: 0;\n left: 0;\n right: 0;\n height: 32px;\n background-color: #464646;\n position: absolute;\n display: flex;\n justify-content:space-between;\n align-items: baseline;\n vertical-align: middle;\n}\n\n.plate-setup-bottom-container {\n top: 540px;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n background-color: #e1e1e1;\n}\n\n.plate-setup-bottom-table-container {\n top: 32px;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n overflow: auto;\n}\n\n\n.plate-setup-bottom-table {\n font-size: 14px;\n border-collapse: collapse;\n width: 100%;\n}\n\n.plate-setup-bottom-table thead th {\n position: sticky;\n position: -webkit-sticky;\n top: 0;\n z-index: 999;\n background-color: white;\n background-clip: padding-box;\n}\n\n.plate-setup-bottom-table thead th:before {\n content:'';\n position:absolute;\n left: 0;\n top: -1px;\n width:100%;\n border-top: solid #c2c2c2 1px;\n}\n\n.plate-setup-bottom-table thead th:after {\n content:'';\n position:absolute;\n left: 0;\n bottom: -1px;\n width:100%;\n border-bottom: solid #c2c2c2 1px;\n}\n\n.plate-setup-bottom-table th {\n border: solid #c2c2c2 1px;\n padding: 5px 10px;\n font-weight: bold;\n font-size: 12px;\n text-align: left;\n}\n\n.plate-setup-bottom-table td {\n border: solid #c2c2c2 1px;\n padding: 5px 10px;\n background-color: white;\n}\n\n.plate-setup-bottom-table tr.selected td {\n background-color: lightblue;\n}\n\n.plate-setup-color-text {\n font-size: 14px;\n border: none;\n border-radius: 4px;\n padding: 3px 15px;\n background-color: WHITE;\n margin-right: 4px;\n}\n\n.plate-setup-bottom-id {\n font-family: sans-serif;\n width: 40px;\n text-align: center;\n background-image: linear-gradient(to right, rgba(255,255,255,0.3), transparent)\n}\n\ninput.invalid {\n background-color: pink;\n}\n\n.plate-setup-remove-all-button-container {\n text-align: left;\n}\n\n.plate-setup-remove-all-button{\n width: 100%;\n font-size: 12px;\n text-overflow: ellipsis;\n text-align: left;\n white-space: nowrap;\n border: 1px solid #aaa;\n border-radius: 4px;\n margin-top: 2px;\n color: #444;\n background-color: #fff;\n background-image: linear-gradient(to top, #eee 0%, #fff 50%);\n}\n/* Modal Content */\n\n.plate-modal {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 2000; /* Sit on top */\n padding-top: 100px; /* Location of the box */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n}\n\n.plate-modal-content {\n font-size: 14px;\n background-color: #fefefe;\n margin: auto;\n padding: 20px;\n border: 1px solid #888;\n}\n\n.plate-modal-content > * {\n width: 100%;\n}\n\n.dialog-buttons {\n margin-top: 10px;\n display: inline-block;\n text-align: right;\n}\n\n.dialog-buttons button {\n margin-left: 4px;\n}\n\n.plate-popout-table {\n border-collapse: collapse;\n width: 100%;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-th {\n text-align: left;\n background-color: white;\n color: black;\n font-size: 12px;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-tr:hover {\n background-color: #f5f5f5;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-popout-td {\n text-align: left;\n font-size: 11px;\n border: 1px solid black;\n padding: 5px;\n}\n\n.plate-field-warning-image{\n vertical-align: baseline;\n margin: 0px 0 0px;\n}\n\n.pop-out-text {\n position: fixed;\n display: none;\n background: white;\n border: 1px solid;\n float: left;\n margin-top: -44px;\n z-Index: 99999 !important;\n}\n\n.plate-setup-canvas-container > svg {\n cursor: pointer;\n}\n\n.plate-setup-canvas-container > svg text {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.plate-setup-canvas-container > svg * {\n vector-effect: non-scaling-stroke;\n}\n\n.plate-setup-canvas-container .rowHead text, .colHead text {\n font-size: 13px;\n font-family: sans-serif, Arial;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: central;\n}\n\n.plate-setup-canvas-container .tile .highlight {\n fill: none;\n}\n\n.plate-setup-canvas-container .tile .well {\n stroke: gray;\n stroke-width: 0.5;\n}\n\n.plate-setup-canvas-container .tile .fill .center, .plate-setup-canvas-container .tile .fill .center_incomplete {\n fill: white;\n stroke: gray;\n stroke-width: 0.5;\n}\n\n.plate-setup-canvas-container .tile:not(.incomplete) .fill .center_incomplete {\n display:none;\n}\n\n.plate-setup-canvas-container .tile.incomplete .fill .center {\n display:none;\n}\n\n.plate-setup-canvas-container .tile .fill .label {\n font-size: 13px;\n font-family: sans-serif, Arial;\n text-anchor: middle;\n dominant-baseline: central;\n}\n\n.plate-setup-canvas-container .tile.incomplete .fill .label {\n fill: red;\n}\n\n.plate-setup-canvas-container .tile.selected .highlight {\n fill: lightblue;\n}\n\n.plate-setup-canvas-container .tile.empty .fill {\n display: none;\n}\n\n.plate-setup-canvas-container .tile:not(.empty) .well {\n display: none;\n}\n"]} \ No newline at end of file diff --git a/dist/js/plate-map.js b/dist/js/plate-map.js index 84052fe..b771b36 100755 --- a/dist/js/plate-map.js +++ b/dist/js/plate-map.js @@ -1,101 +1,105 @@ -var plateLayOutWidget = plateLayOutWidget || {}; +"use strict"; -(function($, fabric) { +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - plateLayOutWidget.addDataOnChange = function() { +var plateMapWidget = plateMapWidget || {}; + +(function ($) { + plateMapWidget.addDataOnChange = function () { // This object is invoked when something in the tab fields change return { + _addAllData: function _addAllData(data) { + var wells = []; - _addAllData: function(data) { - // Method to add data when something changes in the tabs. Its going to be tricky , just starting. - if (this.allSelectedObjects) { - var noOfSelectedObjects = this.allSelectedObjects.length; - var wells = []; - for (var objectIndex = 0; objectIndex < noOfSelectedObjects; objectIndex++) { - var tile = this.allSelectedObjects[objectIndex]; + if (this.selectedIndices) { + var noOfSelectedObjects = this.selectedIndices.length; + this.selectedIndices.forEach(function (index) { var well; - if (tile.index in this.engine.derivative) { - well = this.engine.derivative[tile.index]; + + if (index in this.engine.derivative) { + well = this.engine.derivative[index]; } else { well = $.extend(true, {}, this.defaultWell); - this.engine.derivative[tile.index] = well; + this.engine.derivative[index] = well; } - var processedData = this.processWellData(data, well, noOfSelectedObjects, wells); - wells = processedData.wells; - well = processedData.well; + + well = this.processWellData(data, well, noOfSelectedObjects); var empty = this.engine.wellEmpty(well); + if (empty) { - if (this.emptyWellWithDefaultVal && this.disableAddDeleteWell) { - var wellCopy = JSON.parse(JSON.stringify(well)); - var defaultValue = this.emptyWellWithDefaultVal; - for (var key in defaultValue) { - if (key in wellCopy) { - wellCopy[key] = defaultValue[key]; - this._applyFieldData(key, defaultValue[key]); - } + if (this.disableAddDeleteWell) { + if (this.engine.derivative.hasOwnProperty(index)) { + well = $.extend(true, {}, this.emptyWellWithDefaultVal); + this.engine.derivative[index] = well; } - this.engine.derivative[tile.index] = wellCopy; } else { - delete this.engine.derivative[tile.index]; + delete this.engine.derivative[index]; } } - } - } - // update multiplex remove all field + }, this); + } // update multiplex remove all field + + this._getAllMultipleVal(wells); - this.applyFieldWarning(wells); - // create well when default field is sent for the cases when user delete all fields during disabledNewDeleteWell mode + + this.applyFieldWarning(wells); // create well when default field is sent for the cases when user delete all fields during disabledNewDeleteWell mode + this._colorMixer(); + this.derivativeChange(); + this.addToUndoRedo(); }, + processWellData: function processWellData(newData, curWell, noOfSelectedObjects) { + for (var id in newData) { + if (!newData.hasOwnProperty(id)) { + continue; + } - processWellData: function(newData, curWell, noOfSelectedObjects, wellList) { + var newVal = newData[id]; - if (!wellList) { - wellList = []; - } - for (var id in newData) { - var v; - if (newData[id] !== undefined && newData[id] !== null) { - if (newData[id].multi) { - var curData = newData[id]; + if (newVal !== undefined && newVal !== null) { + if (newVal.multi) { var preData = curWell[id]; - var newDt = this._getMultiData(preData, curData, id, noOfSelectedObjects); - // need to replace newData - v = JSON.parse(JSON.stringify(newDt)); - } else { - v = JSON.parse(JSON.stringify(newData[id])); + newVal = this._getMultiData(preData, newVal, id, noOfSelectedObjects); } + + newVal = JSON.parse(JSON.stringify(newVal)); } else { - v = JSON.parse(JSON.stringify(newData[id])); + newVal = null; } - curWell[id] = v; - wellList.push(curWell); - } - return { - well: curWell, - wells: wellList + curWell[id] = newVal; } - }, - _getMultiData: function(preData, curData, fieldId, noOfSelectedObjects) { + return curWell; + }, + _getMultiData: function _getMultiData(preData, curData, fieldId, noOfSelectedObjects) { var addNew = curData.added; var removed = curData.removed; + if (addNew) { if (preData) { if (addNew.value) { var add = true; + for (var listIdx in preData) { - var multiplexData = preData[listIdx]; - // for cases when the add new data exist in well + if (!preData.hasOwnProperty(listIdx)) { + continue; + } + + var multiplexData = preData[listIdx]; // for cases when the add new data exist in well + if (multiplexData[fieldId].toString() === addNew.id.toString()) { - add = false; - // update subfield value - preData = preData.map(function(val) { + add = false; // update subfield value + + preData = preData.map(function (val) { if (val[fieldId].toString() === addNew.id.toString()) { for (var subFieldId in val) { - // over write previous data if only one well is selected + if (!val.hasOwnProperty(subFieldId)) { + continue; + } // over write previous data if only one well is selected + + if (subFieldId in addNew.value && subFieldId !== fieldId) { if (noOfSelectedObjects === 1) { val[subFieldId] = addNew.value[subFieldId]; @@ -105,10 +109,12 @@ var plateLayOutWidget = plateLayOutWidget || {}; } } } + return val; - }) + }); } } + if (add) { preData.push(addNew.value); } @@ -117,6 +123,7 @@ var plateLayOutWidget = plateLayOutWidget || {}; } } else { preData = []; + if (addNew.value) { preData.push(addNew.value); } else if (addNew) { @@ -125,142 +132,166 @@ var plateLayOutWidget = plateLayOutWidget || {}; } } - var removeListIndex = function(preData, removeIndex) { + var removeListIndex = function removeListIndex(preData, removeIndex) { var newPreData = []; + for (var idx in preData) { + if (!preData.hasOwnProperty(idx)) { + continue; + } + if (parseInt(idx) !== parseInt(removeIndex)) { newPreData.push(preData[idx]); } } + return newPreData; }; if (removed) { - var removeIndex; - // for multiplex field + var removeIndex; // for multiplex field + if (removed.value) { - for (var listIdx in preData) { - var multiplexData = preData[listIdx]; - if (multiplexData[fieldId].toString() === removed.id.toString()) { - removeIndex = listIdx; + for (var _listIdx in preData) { + var _multiplexData = preData[_listIdx]; + + if (_multiplexData[fieldId].toString() === removed.id.toString()) { + removeIndex = _listIdx; } - } - // remove nested element + } // remove nested element + + preData = removeListIndex(preData, removeIndex); } else { if (preData) { removeIndex = preData.indexOf(removed); + if (removeIndex >= 0) { preData = removeListIndex(preData, removeIndex); } } } } - if (preData && (preData.length == 0)) { + + if (preData && preData.length === 0) { preData = null; } - return preData - }, - _colorMixer: function() { - if (!this.undoRedoActive) { - var data = this.createObject(); - this.addToUndoRedo(data); - } + return preData; + }, + _colorMixer: function _colorMixer() { this.engine.searchAndStack(); this.engine.applyColors(); - this.mainFabricCanvas.renderAll(); }, - - derivativeChange: function() { - this._trigger("updateWells", null, this.createObject()); + derivativeChange: function derivativeChange() { + this._trigger("updateWells", null, this); }, - - createObject: function() { + createState: function createState() { var derivative = $.extend(true, {}, this.engine.derivative); - var checkboxes = this.globalSelectedAttributes.slice(); - var selectedAreas = this.selectedAreas.slice(); - var focalWell = this.focalWell; - + var checkboxes = this.getCheckboxes(); + var selectedIndices = this.selectedIndices.slice(); return { "derivative": derivative, "checkboxes": checkboxes, - "selectedAreas": selectedAreas, - "focalWell": focalWell, + "selectedIndices": selectedIndices, + "requiredField": this.requiredField + }; + }, + getPlate: function getPlate() { + var wells = {}; + var derivative = this.engine.derivative; + + for (var index in derivative) { + if (!derivative.hasOwnProperty(index)) { + continue; + } + + var address = this.indexToAddress(index); + var well = derivative[index]; + wells[address] = $.extend(true, {}, well); + } + + var checkboxes = this.getCheckboxes(); + var selectedAddresses = this.getSelectedAddresses(); + return { + "wells": wells, + "checkboxes": checkboxes, + "selectedAddresses": selectedAddresses, "requiredField": this.requiredField }; } }; - } -})(jQuery, fabric); -var plateLayOutWidget = plateLayOutWidget || {}; - -(function($, fabric) { + }; +})(jQuery); - plateLayOutWidget.addDataToFields = function() { +var plateMapWidget = plateMapWidget || {}; - return { +plateMapWidget.addDataToFields = function () { + return { + _addDataToTabFields: function _addDataToTabFields(well) { + // Configure how data is added to tab fields + for (var i = 0; i < this.fieldList.length; i++) { + var field = this.fieldList[i]; + var v = well[field.id]; - _addDataToTabFields: function(values) { - // Configure how data is added to tab fields - for (var id in values) { - this._applyFieldData(id, values[id]); + if (v === undefined) { + v = null; } - }, - _applyFieldData: function(id, v) { - this.fieldMap[id].setValue(v); + field.setValue(v); } } - } -})(jQuery, fabric) -var plateLayOutWidget = plateLayOutWidget || {}; - -(function($, fabric) { + }; +}; - plateLayOutWidget.addTabData = function() { +var plateMapWidget = plateMapWidget || {}; +(function ($) { + plateMapWidget.addTabData = function () { return { - fieldList: [], fieldMap: {}, autoId: 1, - - _addTabData: function() { + _addTabData: function _addTabData() { // Here we may need more changes because attributes format likely to change var tabData = this.options.attributes.tabs; var that = this; this.requiredField = []; var multiplexFieldArray = []; - tabData.forEach(function(tab, tabPointer) { + tabData.forEach(function (tab, tabPointer) { if (tab["fields"]) { var tabFields = tab["fields"]; - var fieldArray = []; - var fieldArrayIndex = 0; - // Now we look for fields in the json - for (var field in tabFields) { - var data = tabFields[field]; + var fieldArray = []; // Now we look for fields in the json + + for (var i = 0; i < tabFields.length; i++) { + var data = tabFields[i]; if (!data.id) { data.id = "Auto" + that.autoId++; console.log("Field autoassigned id " + data.id); } + if (!data.type) { data.type = "text"; console.log("Field " + data.id + " autoassigned type " + data.type); } - var field_val; + var field = void 0; + if (data.type === "multiplex") { - field_val = that._makeMultiplexField(data, tabPointer, fieldArray); - multiplexFieldArray.push(field_val); + field = that._makeMultiplexField(data, tabPointer, fieldArray); + that.defaultWell[field.id] = []; + multiplexFieldArray.push(field); } else { - field_val = that._makeRegularField(data, tabPointer, fieldArray, true); + field = that._makeRegularField(data, tabPointer, fieldArray, true); + if (data.type === "multiselect") { - multiplexFieldArray.push(field_val); + that.defaultWell[field.id] = []; + multiplexFieldArray.push(field); + } else { + that.defaultWell[field.id] = null; } } - ; } that.allDataTabs[tabPointer]["fields"] = fieldArray; @@ -270,21 +301,27 @@ var plateLayOutWidget = plateLayOutWidget || {}; }); that.multipleFieldList = multiplexFieldArray; }, - - _makeSubField: function(data, tabPointer, fieldArray) { + _makeSubField: function _makeSubField(mainField, data, tabPointer, fieldArray) { var that = this; + if (!data.id) { data.id = "Auto" + that.autoId++; console.log("Field autoassigned id " + data.id); } + if (!data.type) { data.type = "text"; console.log("Field " + data.id + " autoassigned type " + data.type); } + var wrapperDiv = that._createElement("
").addClass("plate-setup-tab-default-field"); + var wrapperDivLeftSide = that._createElement("
").addClass("plate-setup-tab-field-left-side"); + var wrapperDivRightSide = that._createElement("
").addClass("plate-setup-tab-field-right-side"); + var nameContainer = that._createElement("
").addClass("plate-setup-tab-name").text(data.name); + var fieldContainer = that._createElement("
").addClass("plate-setup-tab-field-container"); $(wrapperDivRightSide).append(nameContainer); @@ -292,27 +329,29 @@ var plateLayOutWidget = plateLayOutWidget || {}; $(wrapperDiv).append(wrapperDivLeftSide); $(wrapperDiv).append(wrapperDivRightSide); $(that.allDataTabs[tabPointer]).append(wrapperDiv); - var field = { id: data.id, + full_id: mainField.id + "_" + data.id, name: data.name, root: wrapperDiv, data: data, required: data.required || false }; - fieldArray.push(field); - that.fieldMap[data.id] = field; - + that.fieldMap[field.full_id] = field; return field; }, - - _makeRegularField: function(data, tabPointer, fieldArray, checkbox) { + _makeRegularField: function _makeRegularField(data, tabPointer, fieldArray, checkbox) { var that = this; + var wrapperDiv = that._createElement("
").addClass("plate-setup-tab-default-field"); + var wrapperDivLeftSide = that._createElement("
").addClass("plate-setup-tab-field-left-side"); + var wrapperDivRightSide = that._createElement("
").addClass("plate-setup-tab-field-right-side "); + var nameContainer = that._createElement("
").addClass("plate-setup-tab-name").text(data.name); + var fieldContainer = that._createElement("
").addClass("plate-setup-tab-field-container"); wrapperDivRightSide.append(nameContainer); @@ -320,9 +359,9 @@ var plateLayOutWidget = plateLayOutWidget || {}; wrapperDiv.append(wrapperDivLeftSide); wrapperDiv.append(wrapperDivRightSide); that.allDataTabs[tabPointer].append(wrapperDiv); - var field = { id: data.id, + full_id: data.id, name: data.name, root: wrapperDiv, data: data, @@ -335,29 +374,35 @@ var plateLayOutWidget = plateLayOutWidget || {}; fieldArray.push(field); that.fieldList.push(field); - that.fieldMap[field.id] = field; + that.fieldMap[field.full_id] = field; // Adding checkbox - // Adding checkbox if (checkbox) { that._addCheckBox(field); } + that._createField(field); - field.onChange = function() { + field.onChange = function () { var v = field.getValue(); var data = {}; data[field.id] = v; + that._addAllData(data); }; + return field; }, - - _makeMultiplexField: function(data, tabPointer, fieldArray) { + _makeMultiplexField: function _makeMultiplexField(data, tabPointer, fieldArray) { var that = this; + var wrapperDiv = that._createElement("
").addClass("plate-setup-tab-default-field"); + var wrapperDivLeftSide = that._createElement("
").addClass("plate-setup-tab-field-left-side"); + var wrapperDivRightSide = that._createElement("
").addClass("plate-setup-tab-field-right-side "); + var nameContainer = that._createElement("
").addClass("plate-setup-tab-name").text(data.name); + var fieldContainer = that._createElement("
").addClass("plate-setup-tab-field-container"); wrapperDivRightSide.append(nameContainer); @@ -365,34 +410,34 @@ var plateLayOutWidget = plateLayOutWidget || {}; wrapperDiv.append(wrapperDivLeftSide); wrapperDiv.append(wrapperDivRightSide); that.allDataTabs[tabPointer].append(wrapperDiv); - var field = { id: data.id, + full_id: data.id, name: data.name, root: wrapperDiv, data: data, required: data.required }; - fieldArray.push(field); that.fieldList.push(field); - that.fieldMap[data.id] = field; + that.fieldMap[field.full_id] = field; + var subFieldList = []; //create subfields - var subFieldList = []; - //create subfields var requiredSubField = []; - for (var subFieldKey in data.multiplexFields) { - var subFieldData = data.multiplexFields[subFieldKey]; - var subField = that._makeSubField(subFieldData, tabPointer, fieldArray); - subFieldList.push(subField); - // stores required subField + for (var i = 0; i < data.multiplexFields.length; i++) { + var subFieldData = data.multiplexFields[i]; + + var subField = that._makeSubField(field, subFieldData, tabPointer, fieldArray); + + subFieldList.push(subField); // stores required subField + if (subFieldData.required) { requiredSubField.push(subField.id); } - } + } //store required field + - //store required field if (field.required || requiredSubField.length) { this.requiredField.push({ multiplexId: field.id, @@ -401,24 +446,27 @@ var plateLayOutWidget = plateLayOutWidget || {}; } field.subFieldList = subFieldList; + that._createField(field); + that._addCheckBox(field); - subFieldList.forEach(function(subfield) { + subFieldList.forEach(function (subfield) { subfield.mainMultiplexField = field; - fieldArray.push(subfield); + that._createField(subfield); - that._addCheckBox(subfield); - delete that.defaultWell[subfield.id]; - // overwrite subField setvalue - subfield.onChange = function() { + + that._addCheckBox(subfield); // overwrite subField setvalue + + + subfield.onChange = function () { var v = subfield.getValue(); var mainRefField = subfield.mainMultiplexField; - var curId = mainRefField.singleSelectValue(); - //var curDataLs = mainRefField.detailData; + var curId = mainRefField.singleSelectValue(); //let curDataLs = mainRefField.detailData; + var curVal = {}; - curVal[mainRefField.id] = curId; - //append subfields + curVal[mainRefField.id] = curId; //append subfields + curVal[subfield.id] = v; var returnVal = { id: curId, @@ -426,57 +474,53 @@ var plateLayOutWidget = plateLayOutWidget || {}; }; field._changeMultiFieldValue(returnVal, null); + var curDataLs = mainRefField.detailData; + if (curDataLs !== null) { curId = mainRefField.singleSelectValue(); - curDataLs = curDataLs.map(function(curData) { + curDataLs = curDataLs.map(function (curData) { if (curData[mainRefField.id] === curId) { curData[subfield.id] = v; } + return curData; }); } + mainRefField.detailData = curDataLs; }; - }); - return field; } - } - } - -})(jQuery, fabric); - -var plateLayOutWidget = plateLayOutWidget || {}; + }; + }; +})(jQuery); -(function($, fabric) { +var plateMapWidget = plateMapWidget || {}; - plateLayOutWidget.addWarningMsg = function() { +(function ($) { + plateMapWidget.addWarningMsg = function () { // For those check boxes associated with every field in the tab return { - fieldWarningMsg: function(field, text, include) { + fieldWarningMsg: function fieldWarningMsg(field, text, include) { var that = this; - var imgId = "fieldWarning" + field.id; + var imgId = "fieldWarning" + field.full_id; var img = $("").html(that._assets.warningImg).attr("id", imgId).addClass("plate-field-warning-image"); - //field.root.find(".plate-setup-tab-name").append('') + if (include) { if (field.root.find("#" + imgId).length <= 0) { field.root.find(".plate-setup-tab-name").text(" " + field.name); field.root.find(".plate-setup-tab-name").prepend(img); - var popText = $("
").addClass("pop-out-text"); popText.text(text); field.root.find(".plate-setup-tab-name").append(popText); - - $("#" + imgId).hover(function(e) { + $("#" + imgId).hover(function () { popText[0].style.display = 'flex'; - }, function() { + }, function () { popText.hide(); }); } - - } else { if (field.root.find("#" + imgId).length > 0) { field.root.find(".plate-setup-tab-name").text(field.name); @@ -484,61 +528,54 @@ var plateLayOutWidget = plateLayOutWidget || {}; } } }, - - removeWarningMsg: function(field, text, include) { + removeWarningMsg: function removeWarningMsg(field, text, include) { var that = this; - var imgId = "fieldWarning" + field.id; - var img = $("").html(that._assets.warningImg).attr("id", imgId).addClass("plate-field-warning-image"); - //field.root.find(".plate-setup-tab-name").append('') + var imgId = "fieldWarning" + field.full_id; + if (include) { + var img = $("").html(that._assets.warningImg).attr("id", imgId).addClass("plate-field-warning-image"); field.root.find(".plate-setup-tab-name").append(img); - var popText = $("
").addClass("pop-out-text"); popText.text(text); field.root.find(".plate-setup-tab-name").append(popText); - - $("#" + imgId).hover(function(e) { + img.hover(function () { popText[0].style.display = 'inline-block'; - }, function() { + }, function () { popText.hide(); }); - } else { $("#" + imgId).remove(); - if (field.root.find("#" + imgId).length > 0) { - //field.root.find(".plate-setup-tab-name").remove(img); - $("#" + imgId).remove(); - } } }, - - applyFieldWarning: function(wells) { + applyFieldWarning: function applyFieldWarning(wells) { var that = this; - var req = 0; - var fill = 0; var fieldData = {}; - that.fieldList.forEach(function(field) { + that.fieldList.forEach(function (field) { fieldData[field.id] = []; }); - wells.forEach(function(well) { + wells.forEach(function (well) { if (!that.engine.wellEmpty(well)) { for (var fieldId in fieldData) { - if (fieldId in well) { - fieldData[fieldId].push(well[fieldId]); - } else { - fieldData[fieldId].push(null); + if (fieldData.hasOwnProperty(fieldId)) { + if (fieldId in well) { + fieldData[fieldId].push(well[fieldId]); + } else { + fieldData[fieldId].push(null); + } } } } }); + for (var i = 0; i < that.fieldList.length; i++) { var field = that.fieldList[i]; + if (field.applyMultiplexSubFieldColor) { field.applyMultiplexSubFieldColor(fieldData[field.id]); } else { if (field.required) { var include = false; - fieldData[field.id].forEach(function(val) { + fieldData[field.id].forEach(function (val) { // for multiselect if (val instanceof Array) { if (val.length === 0) { @@ -549,24 +586,24 @@ var plateLayOutWidget = plateLayOutWidget || {}; include = true; } } - }); - //field.root.find(".plate-setup-tab-name").css("background", color); + }); //field.root.find(".plate-setup-tab-name").css("background", color); + that.fieldWarningMsg(field, "required field", include); } } } } - } - } -})(jQuery, fabric); -var plateLayOutWidget = plateLayOutWidget || {}; + }; + }; +})(jQuery); -(function($, fabric) { +var plateMapWidget = plateMapWidget || {}; - plateLayOutWidget.bottomTable = function() { +(function ($) { + plateMapWidget.bottomTable = function () { // for bottom table return { - _bottomScreen: function() { + _bottomScreen: function _bottomScreen() { this.bottomContainer = this._createElement("
").addClass("plate-setup-bottom-container"); this.bottomTableContainer = this._createElement("
").addClass("plate-setup-bottom-table-container"); this.bottomTable = this._createElement("
").addClass("plate-setup-bottom-table"); @@ -578,151 +615,142 @@ var plateLayOutWidget = plateLayOutWidget || {}; this.bottomContainer.append(this.bottomTableContainer); this.container.append(this.bottomContainer); }, - - addBottomTableHeadings: function() { - + addBottomTableHeadings: function addBottomTableHeadings() { var row = this._createElement(""); - var singleField = this._createElement("") - .text("Group"); - row.prepend(singleField); + var singleField = this._createElement("").text("Group"); + row.prepend(singleField); this.rowCounter = 1; for (var i = 0; i < this.globalSelectedAttributes.length; i++) { var attr = this.globalSelectedAttributes[i]; var field = this.fieldMap[attr]; - var singleField = this._createElement("").text(field.name); - row.append(singleField); + + var _singleField = this._createElement("").text(field.name); + + row.append(_singleField); this.rowCounter = this.rowCounter + 1; - } + } // Now we append all the captions at the place. + - // Now we append all the captions at the place. this.bottomTableBody.empty(); this.bottomTableHead.empty(); this.bottomTableHead.append(row); this.adjustFieldWidth(this.bottomRow); }, - - tileAttrText: function(tile, attr) { + tileAttrText: function tileAttrText(tile, attr) { var well = this.engine.derivative[tile.index]; var field = this.fieldMap[attr]; return field.getText(well[attr]); }, - - addBottomTableRow: function(color, singleStack) { + addBottomTableRow: function addBottomTableRow(color, singleStack) { var that = this; var modelTile = this.allTiles[singleStack[0]]; + var row = this._createElement(""); + var plateIdDiv = this._createElement("").addClass("plate-setup-bottom-id"); + var numberText = this._createElement(""); buttonRow.append(deleteCheckedButton); - deleteCheckedButton.click(function() { - table.find("input:checked").each(function() { + deleteCheckedButton.click(function () { + table.find("input:checked").each(function () { var val = this.value; - field.multiOnChange(null, {id: val}); - }); - // refresh selected fields after updating the multiplex field value + field.multiOnChange(null, { + id: val + }); + }); // refresh selected fields after updating the multiplex field value + that.decideSelectedFields(); killDialog(); }); } - } else { $("

").text("No " + field.name + " in the selected wells").appendTo(tableArea); } @@ -2584,85 +2415,84 @@ var plateLayOutWidget = plateLayOutWidget || {}; var cancelButton = $(""); buttonRow.append(cancelButton); cancelButton.click(killDialog); - dialogDiv.show(); - window.onclick = function(event) { - if (event.target == dialogDiv[0]) { + window.onclick = function (event) { + if (event.target === dialogDiv[0]) { killDialog(); } - } + }; }, - - _deleteDialogTable: function(field, valMap) { + _deleteDialogTable: function _deleteDialogTable(field, valMap) { var that = this; var colName = [field.name, "Counts"]; //Added because it was missing... no idea what the original should have been + if (!that.readOnly) { colName.push("Delete"); } + var table = $(''); var thead = $('').appendTo(table); var tr = $('').appendTo(thead); - - tr.append(colName.map(function(text) { + tr.append(colName.map(function (text) { return $('").appendTo(table); - - field.data.options.forEach(function(opt) { + field.data.options.forEach(function (opt) { if (opt.id in valMap) { - var tr = $('').appendTo(tbody); + var _tr = $('').appendTo(tbody); + var checkbox = $("").prop("value", opt.id); - $(""),this.bottomTableBody=this._createElement(""),this.bottomTable.append(this.bottomTableHead),this.bottomTable.append(this.bottomTableBody),this.bottomTableContainer.append(this.bottomTable),this.bottomContainer.append(this.bottomTableContainer),this.container.append(this.bottomContainer)},addBottomTableHeadings:function(){var e=this._createElement(""),t=this._createElement("").text("Group");e.prepend(t),this.rowCounter=1;for(var i=0;i").text(n.name);e.append(t),this.rowCounter=this.rowCounter+1}this.bottomTableBody.empty(),this.bottomTableHead.empty(),this.bottomTableHead.append(e),this.adjustFieldWidth(this.bottomRow)},tileAttrText:function(e,t){var i=this.engine.derivative[e.index];return this.fieldMap[t].getText(i[t])},addBottomTableRow:function(e,i){var a=this,t=this.allTiles[i[0]],n=this._createElement(""),l=this._createElement("").addClass("plate-setup-bottom-id"),s=this._createElement(""),t=this.colorPairs[0],i=this._createElement("");i.css("background","-webkit-linear-gradient(left, "+t[0]+" , "+t[1]+")"),e.append(i),this.bottomTableBody.append(e),this.createExportButton()},adjustFieldWidth:function(e){var t=this.rowCounter;1024<150*t&&e.css("width",152*t+"px")},downloadCSV:function(e,t){var i,a;i=new Blob([e],{type:"text/csv"}),(a=document.createElement("a")).download=t,a.href=window.URL.createObjectURL(i),a.style.display="none",document.body.appendChild(a),a.click()},exportData:function(e){var t=[],i=document.querySelectorAll("table tr"),a={},n=this.engine.stackUpWithColor,l=this.getDimensions(),s=this;for(var r in n)a[r]=n[r].map(function(e){return s.indexToAddress(e,l)});for(var o=0;o").addClass("plate-setup-bottom-control-container"),i=d("
").addClass("plate-setup-overlay-text-container");i.text("Color groups"),t.append(i);var a=d("
").addClass("plate-setup-overlay-bottom-button-container"),n=d("");o.append(c),c.click(function(){d.find("input:checked").each(function(){var e=this.value;t.multiOnChange(null,{id:e})}),i.decideSelectedFields(),l()})}}else f("

").text("No "+t.name+" in the selected wells").appendTo(r);var u=f("");o.append(u),u.click(l),n.show(),window.onclick=function(e){e.target==n[0]&&l()}},_deleteDialogTable:function(e,a){var n=this,t=[e.name,"Counts"];n.readOnly||t.push("Delete");var i=f("

').text(text); })); - var tbody = $("
").text(opt.text).appendTo(tr); - $("").text(valMap[opt.id]).appendTo(tr); + $("").text(opt.text).appendTo(_tr); + $("").text(valMap[opt.id]).appendTo(_tr); + if (!that.readOnly) { - $("").append(checkbox).appendTo(tr); + $("").append(checkbox).appendTo(_tr); } } }); - return table; }, - - _createDeleteButton: function(field) { + _createDeleteButton: function _createDeleteButton(field) { var that = this; var deleteButton = $("
"),l=f("").appendTo(i);f("").appendTo(l).append(t.map(function(e){return f("").appendTo(i);return e.data.options.forEach(function(e){if(e.id in a){var t=f("").appendTo(s),i=f("").prop("value",e.id);f(""),this.bottomTableBody=this._createElement(""),this.bottomTable.append(this.bottomTableHead),this.bottomTable.append(this.bottomTableBody),this.bottomTableContainer.append(this.bottomTable),this.bottomContainer.append(this.bottomTableContainer),this.container.append(this.bottomContainer)},addBottomTableHeadings:function(){var e=this._createElement(""),t=this._createElement("").text("Group");e.prepend(t),this.rowCounter=1;for(var i=0;i").text(n.name);e.append(l),this.rowCounter=this.rowCounter+1}this.bottomTableBody.empty(),this.bottomTableHead.empty(),this.bottomTableHead.append(e),this.adjustFieldWidth(this.bottomRow)},tileAttrText:function(e,t){var i=this.engine.derivative[e.index];return this.fieldMap[t].getText(i[t])},addBottomTableRow:function(e,t){var i=this,a=this.allTiles[t[0]],n=this._createElement(""),l=this._createElement("").addClass("plate-setup-bottom-id"),s=this._createElement(""),t=this.colorPairs[0],i=this._createElement("");i.css("background","-webkit-linear-gradient(left, "+t[0]+" , "+t[1]+")"),e.append(i),this.bottomTableBody.append(e),this.createExportButton()},adjustFieldWidth:function(e){var t=this.rowCounter;150*t>1024&&e.css("width",152*t+"px")},downloadCSV:function(e,t){var i,a;i=new Blob([e],{type:"text/csv"}),(a=document.createElement("a")).download=t,a.href=window.URL.createObjectURL(i),a.style.display="none",document.body.appendChild(a),a.click()},exportData:function(e){var t=[],i=document.querySelectorAll("table tr"),a={},n=this.engine.stackUpWithColor;for(var l in n)n.hasOwnProperty(l)&&(a[l]=n[l].map(this.indexToAddress,this));for(var s=0;s").addClass("plate-setup-bottom-control-container"),a=e("
").addClass("plate-setup-overlay-text-container");a.text("Color groups"),i.append(a);var n=e("
").addClass("plate-setup-overlay-bottom-button-container"),l=e("");o.append(c),c.click(function(){u.find("input:checked").each(function(){var e=this.value;t.multiOnChange(null,{id:e})}),a.decideSelectedFields(),s()})}}else e("

").text("No "+t.name+" in the selected wells").appendTo(d);var p=e("");o.append(p),p.click(s),l.show(),window.onclick=function(e){e.target===l[0]&&s()}},_deleteDialogTable:function(t,i){var a=this,n=[t.name,"Counts"];a.readOnly||n.push("Delete");var l=e("

").text(e)}));var s=f("
").text(e.text).appendTo(t),f("").text(a[e.id]).appendTo(t),n.readOnly||f("").append(i).appendTo(t)}}),i},_createDeleteButton:function(e){var t=this,i=f("
"),s=e("").appendTo(l);e("").appendTo(s).append(n.map(function(t){return e("").appendTo(l);return t.data.options.forEach(function(t){if(t.id in i){var n=e("").appendTo(r),l=e("").prop("value",t.id);e("\");\n this.bottomTableBody = this._createElement(\"\");\n this.bottomTable.append(this.bottomTableHead);\n this.bottomTable.append(this.bottomTableBody);\n this.bottomTableContainer.append(this.bottomTable);\n this.bottomContainer.append(this.bottomTableContainer);\n this.container.append(this.bottomContainer);\n },\n\n addBottomTableHeadings: function() {\n\n var row = this._createElement(\"\");\n\n var singleField = this._createElement(\"\")\n .text(\"Group\");\n row.prepend(singleField);\n\n this.rowCounter = 1;\n\n for (var i = 0; i < this.globalSelectedAttributes.length; i++) {\n var attr = this.globalSelectedAttributes[i];\n var field = this.fieldMap[attr];\n var singleField = this._createElement(\"\").text(field.name);\n row.append(singleField);\n this.rowCounter = this.rowCounter + 1;\n }\n\n // Now we append all the captions at the place.\n this.bottomTableBody.empty();\n this.bottomTableHead.empty();\n this.bottomTableHead.append(row);\n this.adjustFieldWidth(this.bottomRow);\n },\n\n tileAttrText: function(tile, attr) {\n var well = this.engine.derivative[tile.index];\n var field = this.fieldMap[attr];\n return field.getText(well[attr]);\n },\n\n addBottomTableRow: function(color, singleStack) {\n var that = this;\n var modelTile = this.allTiles[singleStack[0]];\n var row = this._createElement(\"\");\n var plateIdDiv = this._createElement(\"\").addClass(\"plate-setup-bottom-id\");\n var numberText = this._createElement(\"\").text(text);\n row.append(dataDiv);\n }\n this.bottomTableBody.append(row);\n this.adjustFieldWidth(row);\n },\n\n bottomForFirstTime: function() {\n this.addBottomTableHeadings();\n // This is executed for the very first time.. !\n var row = this._createElement(\"\");\n\n var colorStops = this.colorPairs[0];\n var plateIdDiv = this._createElement(\"\");\n plateIdDiv.css(\"background\", \"-webkit-linear-gradient(left, \" + colorStops[0] + \" , \" + colorStops[1] + \")\");\n row.append(plateIdDiv);\n this.bottomTableBody.append(row);\n this.createExportButton();\n },\n\n adjustFieldWidth: function(row) {\n\n var length = this.rowCounter;\n if ((length) * 150 > 1024) {\n row.css(\"width\", (length) * 152 + \"px\");\n }\n },\n\n downloadCSV: function(csv, filename) {\n var csvFile;\n var downloadLink;\n\n // CSV file\n csvFile = new Blob([csv], {\n type: \"text/csv\"\n });\n\n // Download link\n downloadLink = document.createElement(\"a\");\n\n // File name\n downloadLink.download = filename;\n\n // Create a link to the file\n downloadLink.href = window.URL.createObjectURL(csvFile);\n\n // Hide download link\n downloadLink.style.display = \"none\";\n\n // Add the link to DOM\n document.body.appendChild(downloadLink);\n\n // Click download link\n downloadLink.click();\n },\n\n exportData: function(format) {\n var data = [];\n var rows = document.querySelectorAll(\"table tr\");\n\n var colorLocMap = {};\n var colorLocIdxMap = this.engine.stackUpWithColor;\n var dim = this.getDimensions();\n var that = this;\n for (var colorIdx in colorLocIdxMap) {\n colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(function(locIdx) {\n return that.indexToAddress(locIdx, dim);\n })\n }\n\n for (var i = 0; i < rows.length; i++) {\n var row = [],\n cols = rows[i].querySelectorAll(\"td, th\");\n\n for (var j = 0; j < cols.length; j++) {\n var v = \"\";\n if (cols[j].innerText) {\n if (format === \"csv\") {\n v = '\"' + cols[j].innerText.replace(/\"/g, '\"\"') + '\"';\n } else {\n v = cols[j].innerText;\n }\n }\n row.push(v);\n\n // add location column\n if (i === 0 && j === 0) {\n if (format === \"csv\") {\n row.push('\"Location\"');\n } else if (format === 'clipboard') {\n row.push(\"Location\");\n }\n\n }\n if (i !== 0 && j === 0) {\n var loc = '';\n if (colorLocMap[parseInt(cols[j].innerText)]) {\n if (format === \"csv\") {\n loc = '\"' + colorLocMap[parseInt(cols[j].innerText)].join(\",\") + '\"';\n } else if (format === 'clipboard') {\n loc = colorLocMap[parseInt(cols[j].innerText)].join(\",\");\n }\n }\n row.push(loc);\n }\n }\n\n if (format === \"csv\") {\n data.push(row.join(\",\"));\n } else if (format === 'clipboard') {\n data.push(row.join(\"\\t\"));\n //data.push(row); // for text type\n }\n\n }\n if (format === \"csv\") {\n // Download CSV file\n this.downloadCSV(data.join(\"\\n\"), 'table.csv');\n } else if (format === 'clipboard') {\n //return formatTableToString(data); // for text type\n return data.join(\"\\n\");\n }\n },\n\n createExportButton: function() {\n var that = this;\n var overlayContainer = $(\"
\").addClass(\"plate-setup-bottom-control-container\");\n\n var descriptionDiv = $(\"
\").addClass(\"plate-setup-overlay-text-container\");\n descriptionDiv.text(\"Color groups\");\n overlayContainer.append(descriptionDiv);\n\n var buttonContainer = $(\"
\").addClass(\"plate-setup-overlay-bottom-button-container\");\n\n // create export csv option\n var exportButton = $(\"
").text(t)}));var r=e("
").text(t.text).appendTo(n),e("").text(i[t.id]).appendTo(n),a.readOnly||e("").append(l).appendTo(n)}}),l},_createDeleteButton:function(t){var i=this,a=e("
');\n var thead = $('').appendTo(table);\n var tr = $('').appendTo(thead);\n\n tr.append(colName.map(function(text) {\n return $('\").appendTo(table);\n\n field.data.options.forEach(function(opt) {\n if (opt.id in valMap) {\n var tr = $('').appendTo(tbody);\n var checkbox = $(\"\").prop(\"value\", opt.id);\n $(\"\");\n this.bottomTableBody = this._createElement(\"\");\n this.bottomTable.append(this.bottomTableHead);\n this.bottomTable.append(this.bottomTableBody);\n this.bottomTableContainer.append(this.bottomTable);\n this.bottomContainer.append(this.bottomTableContainer);\n this.container.append(this.bottomContainer);\n },\n\n addBottomTableHeadings: function() {\n\n let row = this._createElement(\"\");\n\n let singleField = this._createElement(\"\")\n .text(\"Group\");\n row.prepend(singleField);\n\n this.rowCounter = 1;\n\n for (let i = 0; i < this.globalSelectedAttributes.length; i++) {\n let attr = this.globalSelectedAttributes[i];\n let field = this.fieldMap[attr];\n let singleField = this._createElement(\"\").text(field.name);\n row.append(singleField);\n this.rowCounter = this.rowCounter + 1;\n }\n\n // Now we append all the captions at the place.\n this.bottomTableBody.empty();\n this.bottomTableHead.empty();\n this.bottomTableHead.append(row);\n this.adjustFieldWidth(this.bottomRow);\n },\n\n tileAttrText: function(tile, attr) {\n let well = this.engine.derivative[tile.index];\n let field = this.fieldMap[attr];\n return field.getText(well[attr]);\n },\n\n addBottomTableRow: function(color, singleStack) {\n let that = this;\n let modelTile = this.allTiles[singleStack[0]];\n let row = this._createElement(\"\");\n let plateIdDiv = this._createElement(\"\").addClass(\"plate-setup-bottom-id\");\n let numberText = this._createElement(\"\").text(text);\n row.append(dataDiv);\n }\n this.bottomTableBody.append(row);\n this.adjustFieldWidth(row);\n },\n\n bottomForFirstTime: function() {\n this.addBottomTableHeadings();\n // This is executed for the very first time.. !\n let row = this._createElement(\"\");\n\n let colorStops = this.colorPairs[0];\n let plateIdDiv = this._createElement(\"\");\n plateIdDiv.css(\"background\", \"-webkit-linear-gradient(left, \" + colorStops[0] + \" , \" + colorStops[1] + \")\");\n row.append(plateIdDiv);\n this.bottomTableBody.append(row);\n this.createExportButton();\n },\n\n adjustFieldWidth: function(row) {\n\n let length = this.rowCounter;\n if ((length) * 150 > 1024) {\n row.css(\"width\", (length) * 152 + \"px\");\n }\n },\n\n downloadCSV: function(csv, filename) {\n let csvFile;\n let downloadLink;\n\n // CSV file\n csvFile = new Blob([csv], {\n type: \"text/csv\"\n });\n\n // Download link\n downloadLink = document.createElement(\"a\");\n\n // File name\n downloadLink.download = filename;\n\n // Create a link to the file\n downloadLink.href = window.URL.createObjectURL(csvFile);\n\n // Hide download link\n downloadLink.style.display = \"none\";\n\n // Add the link to DOM\n document.body.appendChild(downloadLink);\n\n // Click download link\n downloadLink.click();\n },\n\n exportData: function(format) {\n let data = [];\n let rows = document.querySelectorAll(\"table tr\");\n\n let colorLocMap = {};\n let colorLocIdxMap = this.engine.stackUpWithColor;\n for (let colorIdx in colorLocIdxMap) {\n if (colorLocIdxMap.hasOwnProperty(colorIdx)) {\n colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(this.indexToAddress, this);\n }\n }\n\n for (let i = 0; i < rows.length; i++) {\n let row = [],\n cols = rows[i].querySelectorAll(\"td, th\");\n\n for (let j = 0; j < cols.length; j++) {\n let v = \"\";\n if (cols[j].innerText) {\n if (format === \"csv\") {\n v = '\"' + cols[j].innerText.replace(/\"/g, '\"\"') + '\"';\n } else {\n v = cols[j].innerText;\n }\n }\n row.push(v);\n\n // add location column\n if (i === 0 && j === 0) {\n if (format === \"csv\") {\n row.push('\"Location\"');\n } else if (format === 'clipboard') {\n row.push(\"Location\");\n }\n\n }\n if (i !== 0 && j === 0) {\n let loc = '';\n if (colorLocMap[parseInt(cols[j].innerText)]) {\n if (format === \"csv\") {\n loc = '\"' + colorLocMap[parseInt(cols[j].innerText)].join(\",\") + '\"';\n } else if (format === 'clipboard') {\n loc = colorLocMap[parseInt(cols[j].innerText)].join(\",\");\n }\n }\n row.push(loc);\n }\n }\n\n if (format === \"csv\") {\n data.push(row.join(\",\"));\n } else if (format === 'clipboard') {\n data.push(row.join(\"\\t\"));\n //data.push(row); // for text type\n }\n\n }\n if (format === \"csv\") {\n // Download CSV file\n this.downloadCSV(data.join(\"\\n\"), 'table.csv');\n } else if (format === 'clipboard') {\n //return formatTableToString(data); // for text type\n return data.join(\"\\n\");\n }\n },\n\n createExportButton: function() {\n let that = this;\n let overlayContainer = $(\"
\").addClass(\"plate-setup-bottom-control-container\");\n\n let descriptionDiv = $(\"
\").addClass(\"plate-setup-overlay-text-container\");\n descriptionDiv.text(\"Color groups\");\n overlayContainer.append(descriptionDiv);\n\n let buttonContainer = $(\"
\").addClass(\"plate-setup-overlay-bottom-button-container\");\n\n // create export csv option\n let exportButton = $(\"
').text(text);\n }));\n\n var tbody = $(\"
\").text(opt.text).appendTo(tr);\n $(\"\").text(valMap[opt.id]).appendTo(tr);\n if (!that.readOnly) {\n $(\"\").append(checkbox).appendTo(tr);\n }\n }\n });\n\n return table;\n },\n\n _createDeleteButton: function(field) {\n var that = this;\n var deleteButton = $(\"
');\n let thead = $('').appendTo(table);\n let tr = $('').appendTo(thead);\n\n tr.append(colName.map(function(text) {\n return $('\").appendTo(table);\n\n field.data.options.forEach(function(opt) {\n if (opt.id in valMap) {\n let tr = $('').appendTo(tbody);\n let checkbox = $(\"\").prop(\"value\", opt.id);\n $(\""); + let row = this._createElement(""); - var singleField = this._createElement("") + let singleField = this._createElement("") .text("Group"); row.prepend(singleField); this.rowCounter = 1; - for (var i = 0; i < this.globalSelectedAttributes.length; i++) { - var attr = this.globalSelectedAttributes[i]; - var field = this.fieldMap[attr]; - var singleField = this._createElement("").text(field.name); + for (let i = 0; i < this.globalSelectedAttributes.length; i++) { + let attr = this.globalSelectedAttributes[i]; + let field = this.fieldMap[attr]; + let singleField = this._createElement("").text(field.name); row.append(singleField); this.rowCounter = this.rowCounter + 1; } @@ -44,49 +44,46 @@ var plateLayOutWidget = plateLayOutWidget || {}; }, tileAttrText: function(tile, attr) { - var well = this.engine.derivative[tile.index]; - var field = this.fieldMap[attr]; + let well = this.engine.derivative[tile.index]; + let field = this.fieldMap[attr]; return field.getText(well[attr]); }, addBottomTableRow: function(color, singleStack) { - var that = this; - var modelTile = this.allTiles[singleStack[0]]; - var row = this._createElement(""); - var plateIdDiv = this._createElement("").addClass("plate-setup-bottom-id"); - var numberText = this._createElement(""); + let plateIdDiv = this._createElement("").addClass("plate-setup-bottom-id"); + let numberText = this._createElement("").text(text); + for (let i = 0; i < this.globalSelectedAttributes.length; i++) { + let attr = this.globalSelectedAttributes[i]; + let text = this.tileAttrText(modelTile, attr); + let dataDiv = this._createElement("").text(text); row.append(dataDiv); } this.bottomTableBody.append(row); @@ -96,10 +93,10 @@ var plateLayOutWidget = plateLayOutWidget || {}; bottomForFirstTime: function() { this.addBottomTableHeadings(); // This is executed for the very first time.. ! - var row = this._createElement(""); + let row = this._createElement(""); - var colorStops = this.colorPairs[0]; - var plateIdDiv = this._createElement(""); + let colorStops = this.colorPairs[0]; + let plateIdDiv = this._createElement(""); plateIdDiv.css("background", "-webkit-linear-gradient(left, " + colorStops[0] + " , " + colorStops[1] + ")"); row.append(plateIdDiv); this.bottomTableBody.append(row); @@ -108,15 +105,15 @@ var plateLayOutWidget = plateLayOutWidget || {}; adjustFieldWidth: function(row) { - var length = this.rowCounter; + let length = this.rowCounter; if ((length) * 150 > 1024) { row.css("width", (length) * 152 + "px"); } }, downloadCSV: function(csv, filename) { - var csvFile; - var downloadLink; + let csvFile; + let downloadLink; // CSV file csvFile = new Blob([csv], { @@ -143,25 +140,23 @@ var plateLayOutWidget = plateLayOutWidget || {}; }, exportData: function(format) { - var data = []; - var rows = document.querySelectorAll("table tr"); - - var colorLocMap = {}; - var colorLocIdxMap = this.engine.stackUpWithColor; - var dim = this.getDimensions(); - var that = this; - for (var colorIdx in colorLocIdxMap) { - colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(function(locIdx) { - return that.indexToAddress(locIdx, dim); - }) + let data = []; + let rows = document.querySelectorAll("table tr"); + + let colorLocMap = {}; + let colorLocIdxMap = this.engine.stackUpWithColor; + for (let colorIdx in colorLocIdxMap) { + if (colorLocIdxMap.hasOwnProperty(colorIdx)) { + colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(this.indexToAddress, this); + } } - for (var i = 0; i < rows.length; i++) { - var row = [], + for (let i = 0; i < rows.length; i++) { + let row = [], cols = rows[i].querySelectorAll("td, th"); - for (var j = 0; j < cols.length; j++) { - var v = ""; + for (let j = 0; j < cols.length; j++) { + let v = ""; if (cols[j].innerText) { if (format === "csv") { v = '"' + cols[j].innerText.replace(/"/g, '""') + '"'; @@ -181,7 +176,7 @@ var plateLayOutWidget = plateLayOutWidget || {}; } if (i !== 0 && j === 0) { - var loc = ''; + let loc = ''; if (colorLocMap[parseInt(cols[j].innerText)]) { if (format === "csv") { loc = '"' + colorLocMap[parseInt(cols[j].innerText)].join(",") + '"'; @@ -211,17 +206,17 @@ var plateLayOutWidget = plateLayOutWidget || {}; }, createExportButton: function() { - var that = this; - var overlayContainer = $("
").addClass("plate-setup-bottom-control-container"); + let that = this; + let overlayContainer = $("
").addClass("plate-setup-bottom-control-container"); - var descriptionDiv = $("
").addClass("plate-setup-overlay-text-container"); + let descriptionDiv = $("
").addClass("plate-setup-overlay-text-container"); descriptionDiv.text("Color groups"); overlayContainer.append(descriptionDiv); - var buttonContainer = $("
").addClass("plate-setup-overlay-bottom-button-container"); + let buttonContainer = $("
").addClass("plate-setup-overlay-bottom-button-container"); // create export csv option - var exportButton = $(""); + let deleteCheckedButton = $(""); buttonRow.append(deleteCheckedButton); deleteCheckedButton.click(function() { table.find("input:checked").each(function() { - var val = this.value; + let val = this.value; field.multiOnChange(null, {id: val}); }); // refresh selected fields after updating the multiplex field value @@ -1237,39 +1238,39 @@ var plateLayOutWidget = plateLayOutWidget || {}; $("

").text("No " + field.name + " in the selected wells").appendTo(tableArea); } - var cancelButton = $(""); + let cancelButton = $(""); buttonRow.append(cancelButton); cancelButton.click(killDialog); dialogDiv.show(); window.onclick = function(event) { - if (event.target == dialogDiv[0]) { + if (event.target === dialogDiv[0]) { killDialog(); } } }, _deleteDialogTable: function(field, valMap) { - var that = this; - var colName = [field.name, "Counts"]; //Added because it was missing... no idea what the original should have been + let that = this; + let colName = [field.name, "Counts"]; //Added because it was missing... no idea what the original should have been if (!that.readOnly) { colName.push("Delete"); } - var table = $('

').text(text);\n }));\n\n let tbody = $(\"
\").text(opt.text).appendTo(tr);\n $(\"\").text(valMap[opt.id]).appendTo(tr);\n if (!that.readOnly) {\n $(\"\").append(checkbox).appendTo(tr);\n }\n }\n });\n\n return table;\n },\n\n _createDeleteButton: function(field) {\n let that = this;\n let deleteButton = $(\"
'); - var thead = $('').appendTo(table); - var tr = $('').appendTo(thead); + let table = $('
'); + let thead = $('').appendTo(table); + let tr = $('').appendTo(thead); tr.append(colName.map(function(text) { return $('").appendTo(table); + let tbody = $("").appendTo(table); field.data.options.forEach(function(opt) { if (opt.id in valMap) { - var tr = $('').appendTo(tbody); - var checkbox = $("").prop("value", opt.id); + let tr = $('').appendTo(tbody); + let checkbox = $("").prop("value", opt.id); $("
').text(text); })); - var tbody = $("
").text(opt.text).appendTo(tr); $("").text(valMap[opt.id]).appendTo(tr); if (!that.readOnly) { @@ -1282,11 +1283,11 @@ var plateLayOutWidget = plateLayOutWidget || {}; }, _createDeleteButton: function(field) { - var that = this; - var deleteButton = $("