mason/breeders_toolbox/breeder_search_page_dataset_overlay.mas

   1
   2 <!--
   3     DATASET CREATION PIPELINE FOR SEACH WIZARD:
   4     When provided with the proper query params, the search wizard will walk the user through
   5     creating a dataset with the required parameters, save the dataset, and return to the
   6     originating page.
   7
   8     URL QUERY PARAMETERS:
   9     dsp: dataset parameters
  10             - a comma separated list of data set parameters for each column
  11             - multiple types for a single column can be separated by a |
  12             - multiple sets of parameters can be provided by including additional dsp query parameters
  13         Examples:
  14             ?dsp=trials,accessions -- require trials as the first parameter and accessions as the second parameter
  15             ?dsp=trials|traits,accessions -- require trials or traits as the first parameter and accessions as the second parameter
  16             ?dsp=trials,accessions&dsp=accessions,trials -- require trials as the first and accessions as the second parameters
  17                                                               OR accessions as the first and trials as the second parameters
  18     dsr: dataset return URL
  19         Example: &dsr=/solgs/search
  20 -->
  21
  22 <div id="dsp-help">
  23     <div id="dsp-help-container">
  24         <p id="dsp-help-instructions"></p>
  25         <button id="dsp-help-next" class='btn btn-primary'><span id="dsp-help-next-label">Next</span>&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></button>
  26         <a id="dsp-help-cancel" href="#"><span class='glyphicon glyphicon-remove'></span></a>
  27     </div>
  28 </div>
  29
  30 <script type='text/javascript'>
  31
  32     let DSP_ENABLED = false;    // Flag to enable the dataset creation pipeline
  33     let DSP_COLS = [];          // Allowed dataset column types
  34     let DSP_RETURN;             // Return URL for dataset creation
  35
  36     jQuery(document).ready(function() {
  37
  38         parseArgs();
  39         if ( DSP_ENABLED ) {
  40             if ( isLoggedIn() ) {
  41
  42                 // Disable the columns (they are enabled as we proceed through the steps)
  43                 jQuery('.wizard-type-select').prop('disabled', true);
  44
  45                 // Start the first step (setup the first column)
  46                 setCol(0);
  47
  48                 // Add event listener for the selected items lists
  49                 jQuery('.wizard-list-selected').on('DOMSubtreeModified', selectionListener)
  50
  51                 // Add cancel button listener
  52                 jQuery('#dsp-help-cancel').click(disableDatasetPipeline);
  53
  54             }
  55             else {
  56                 jQuery('#site_login_dialog').modal("show");
  57             }
  58         }
  59
  60     });
  61
  62
  63     /**
  64      * Parse the query parameters for the dataset pipeline arguments
  65      * - Set DSP_ENABLED -- flag to indicate the dataset pipeline is enabled
  66      * - Set DSP_COLS -- the allowed column type selections
  67      */
  68     function parseArgs() {
  69
  70         // Parse query params and get 'dsp' parameter(s)
  71         let urlParams = new URLSearchParams(window.location.search);
  72         if ( urlParams.has("dsp") ) {
  73             DSP_ENABLED = true;
  74
  75             // Parse each instance of the 'dsp' parameter
  76             let dsp = urlParams.getAll("dsp");
  77             for ( let i = 0; i < dsp.length; i++ ) {
  78
  79                 // Parse each column of the 'dsp' parameter
  80                 let p = dsp[i].split(',');
  81                 let pa = [];
  82                 for ( let j = 0; j < p.length; j++ ) {
  83                     let c = p[j].split('|');
  84                     let ca = [];
  85                     for ( let k = 0; k < c.length; k++ ) {
  86                         ca.push(c[k].toLowerCase().replaceAll(" ", "_"));
  87                     }
  88                     pa.push(ca);
  89                 }
  90
  91                 // Add the allowed column selections
  92                 DSP_COLS.push(pa);
  93
  94             }
  95
  96             // Set Return URL
  97             DSP_RETURN = urlParams.get("dsr");
  98         }
  99
 100     }
 101
 102
 103     /**
 104      * Setup the selections and instructions for selecting items from the specified column
 105      * @param {int} col Column indx
 106      */
 107     function setCol(col) {
 108
 109         // Get selected data types of previous columns
 110         let prev_sel_col_types = [];
 111         for ( let i = 0; i < col; i++ ) {
 112             let sel = jQuery(jQuery('.wizard-type-select option:selected')[i]);
 113             prev_sel_col_types.push((sel.attr("data-type") ? sel.attr("data-type") : sel.html()).toLowerCase().replaceAll(" ", "_"));
 114         }
 115
 116         // Get items from DSP_COLS that match selected data types in previous columns
 117         let valid_dsp_cols = DSP_COLS;
 118         for ( let i = 0; i < col; i++ ) {
 119             valid_dsp_cols = [];
 120             let sel = prev_sel_col_types[i];
 121             for ( let j = 0; j < DSP_COLS.length; j++ ) {
 122                 if ( DSP_COLS[j][i] ) {
 123                     if ( DSP_COLS[j][i].includes(sel) ) {
 124                         valid_dsp_cols.push(DSP_COLS[j]);
 125                     }
 126                 }
 127             }
 128         }
 129
 130         // Get valid data types for the current column, from the list of valid_dsp_cols
 131         let valid_col_types = [];
 132         for ( let i = 0; i < valid_dsp_cols.length; i++ ) {
 133             if ( valid_dsp_cols[i][col] ) {
 134                 for ( let j = 0; j < valid_dsp_cols[i][col].length; j++ ) {
 135                     let t = valid_dsp_cols[i][col][j];
 136                     if ( !valid_col_types.includes(t) ) {
 137                         valid_col_types.push(t);
 138                     }
 139                 }
 140             }
 141         }
 142
 143         // Update column with valid column types
 144         if ( valid_col_types && valid_col_types.length > 0 ) {
 145
 146             // Enable the column
 147             jQuery(jQuery('.wizard-type-select')[col]).prop('disabled', false);
 148
 149             // Disable invalid selection options for the current column
 150             jQuery(jQuery('.wizard-type-select')[col]).find('option').each(function () {
 151                 let enabled = valid_col_types.includes(this.value) || valid_col_types.includes(jQuery(this).attr('data-type'));
 152                 jQuery(this).attr('disabled', !enabled);
 153             });
 154
 155             // Highlight Column
 156             jQuery('.wizard-panel').removeClass('wizard-panel-selected');
 157             jQuery(jQuery('.wizard-panel')[col]).addClass('wizard-panel-selected');
 158
 159             // Update Instructions
 160             let step = col+1;
 161             let html = "<strong>Step " + step + ":</strong> Choose items of type <strong>" + valid_col_types.join(" or ") + "</strong> from column " + step + ".";
 162             jQuery('#dsp-help-instructions').html(html);
 163             jQuery('#dsp-help-next-label').html("Next");
 164             jQuery("#dsp-help-next").prop('disabled', true);
 165             jQuery('#dsp-help-next').css('display', 'block');
 166             jQuery('#dsp-help-next').off('click').on('click', function() {
 167                 setCol(col+1);
 168             });
 169             jQuery('#dsp-help').css('display', 'block');
 170             jQuery('#dsp-help-container').css('display', 'flex');
 171
 172         }
 173
 174         // Move on to saving...
 175         else {
 176             saveDataset(col+1);
 177         }
 178     }
 179
 180     /**
 181      * Prompt the user to save a new dataset
 182      */
 183     function saveDataset(step) {
 184
 185         // Highlight Panel
 186         jQuery('.wizard-panel').removeClass('wizard-panel-selected');
 187         jQuery('.wizard-datasets > .panel').addClass('wizard-panel-selected');
 188
 189         // Focus dataset name
 190         jQuery('.wizard-dataset-name').focus();
 191
 192         // Update Instructions
 193         let html = "<strong>Step " + step + ":</strong> Enter a name for your dataset and click the <strong>Create</strong> button.";
 194         jQuery('#dsp-help-instructions').html(html);
 195         jQuery('#dsp-help-next').css('display', 'none');
 196
 197     }
 198
 199     /**
 200      * Return to the source page when dataset is created
 201      */
 202     function returnToSource() {
 203
 204         // Remove Highlight
 205         jQuery('.wizard-datasets > .panel').removeClass('wizard-panel-selected');
 206
 207         // Update Instructions
 208         let html = "<strong>Dataset Created:</strong> Return to the Analysis tool";
 209         jQuery('#dsp-help-instructions').html(html);
 210
 211         // Set Return Button
 212         if ( DSP_RETURN ) {
 213             jQuery('#dsp-help-next-label').html("Return");
 214             jQuery('#dsp-help-next').off('click').on('click', function() {
 215                 window.location = DSP_RETURN;
 216                 return false;
 217             });
 218             jQuery('#dsp-help-next').css('display', 'block');
 219         }
 220
 221         // Scroll to Top
 222         jQuery(window).scrollTop(0);
 223
 224     }
 225
 226     /**
 227      * Listener for the selected item lists
 228      * - Enable the next button if there are selected items, disable if none
 229      */
 230     function selectionListener() {
 231         let children = jQuery(this).children().length;
 232         if ( children > 2 ) {
 233             jQuery("#dsp-help-next").prop('disabled', false);
 234         }
 235         else {
 236             jQuery("#dsp-help-next").prop('disabled', true);
 237         }
 238     }
 239
 240     /**
 241      * Disable the dataset creation pipeline and restore the normal search wizard
 242      */
 243     function disableDatasetPipeline() {
 244         var r = confirm("Are you sure you want to close the dataset creation help?");
 245         if ( r == true ) {
 246             DSP_ENABLED = false;
 247             jQuery("#dsp-help").css('display', 'none');
 248             jQuery('.wizard-panel').removeClass('wizard-panel-selected');
 249             jQuery('.wizard-datasets > .panel').removeClass('wizard-panel-selected');
 250             jQuery('.wizard-type-select').prop('disabled', false);
 251             jQuery('.wizard-type-select option').prop('disabled', false);
 252         }
 253         return false;
 254     }
 255 </script>
 256
 257 <style>
 258     #dsp-help {
 259         display: none;
 260     }
 261     #dsp-help-container {
 262         display: none;
 263         align-items: center;
 264         margin: 5px 0 15px 0;
 265         width: 100%;
 266         min-height: 50px;
 267         background-color: #ffc107;
 268         border-radius: 5px;
 269         vertical-align: middle;
 270     }
 271     #dsp-help-instructions {
 272         flex-grow: 1;
 273         color: #000;
 274         margin: 0;
 275         padding-left: 15px;
 276     }
 277     #dsp-help-next {
 278         height: 40px;
 279         margin: 5px;
 280     }
 281     #dsp-help-cancel {
 282         margin: 10px;
 283         color: #000;
 284         opacity: 70%;
 285     }
 286     #dsp-help-cancel:hover {
 287         opacity: 85%;
 288     }
 289
 290     .wizard-panel-selected {
 291         border: 5px solid #ffc107;
 292     }
 293
 294     .wizard-type-select option {
 295         color: #000;
 296         font-weight: normal;
 297     }
 298     .wizard-type-select option:disabled {
 299         color: #999;
 300         font-weight: 100;
 301         font-style: italic;
 302     }
 303 </style>