fdds/js/components/domainSelector.js

   1 import { controllerEvents, controllers } from './Controller.js';
   2 import { daysBetween, IS_MOBILE, localToUTC } from '../util.js';
   3 import { simVars } from '../simVars.js';
   4
   5 /** Component for the Active Domain selection bar.
   6  *
   7  *          Contents
   8  *  1. Initialization block
   9  *  2. CreateDomainsForCurrentSimulation block
  10  *  3. GetPresets block
  11  *  4. DomainSwitch block
  12  *
  13  */
  14 export class DomainSelector extends HTMLElement {
  15     /** ===== Initialization block ===== */
  16     constructor() {
  17         super();
  18         this.innerHTML = `
  19             <div id='domain-mobile-wrapper'>
  20                 <div id='domain-selector-button' class='mobile-button feature-controller hidden'>
  21                     domains
  22                 </div>
  23                 <div id='domain-selector' class='feature-controller hidden'>
  24                     <div id='domain-selector-label'>Active domain</div>
  25                     <div id='domain-checkboxes'></div>
  26                 </div>
  27             </div>
  28         `;
  29     }
  30
  31     connectedCallback() {
  32         controllers.domainInstance.subscribe(() => {
  33             this.createDomainsForCurrentSimulation();
  34         });
  35         this.initializeDomainSelectorButton();
  36     }
  37
  38     initializeDomainSelectorButton() {
  39         const domainButton = this.querySelector('#domain-selector-button');
  40         L.DomEvent.disableClickPropagation(domainButton);
  41         domainButton.onpointerdown = () => {
  42             const domainSelector = this.querySelector('#domain-selector');
  43             if (domainSelector.classList.contains('hidden')) {
  44                 domainSelector.classList.remove('hidden');
  45                 document.querySelector('.catalog-menu').classList.add('hidden');
  46                 document.querySelector('#layer-controller-container').classList.add('hidden');
  47             } else {
  48                 domainSelector.classList.add('hidden');
  49             }
  50         }
  51     }
  52
  53     /** ===== CreateDomainsForCurrentSimulation block ===== */
  54     createDomainsForCurrentSimulation() {
  55         this.responsiveUI();
  56         simVars.noLevels.clear();
  57         let domains = controllers.domainInstance.getValue();
  58         controllers.loadingProgress.setValue(0);
  59
  60         let presetDomain = this.presetSimValues(domains);
  61         this.createDomainCheckboxes(domains, presetDomain);
  62
  63         controllers.currentDomain.setValue(presetDomain, controllerEvents.SIM_RESET);
  64     }
  65
  66     createDomainCheckboxes(domains, presetDomain) {
  67         const domainCheckboxes = this.querySelector('#domain-checkboxes');
  68         domainCheckboxes.innerHTML = '';
  69         for(let dom in domains) {
  70             let domId = domains[dom];
  71             let domainCheckbox = this.createDomainCheckbox(domId, presetDomain);
  72             domainCheckboxes.appendChild(domainCheckbox);
  73         }
  74     }
  75
  76     createDomainCheckbox(dom_id, presetDomain) {
  77         let div = document.createElement('div');
  78         div.className = 'domain-checkbox';
  79
  80         let input = document.createElement('input');
  81         input.type = 'radio';
  82         input.name = 'domains';
  83         input.id = dom_id;
  84         if (dom_id == presetDomain) {
  85             input.checked = 'yes';
  86         }
  87         input.onclick = () => {
  88             this.setUpForDomain(dom_id);
  89         }
  90
  91         let label = document.createElement('label');
  92         label.for = dom_id;
  93         label.innerText = dom_id;
  94
  95         div.appendChild(input);
  96         div.appendChild(label);
  97         return div;
  98     }
  99
 100     responsiveUI() {
 101         if (!IS_MOBILE) {
 102             this.querySelector('#domain-selector').classList.remove('hidden');
 103         }
 104         this.querySelector('#domain-selector-button').classList.remove('hidden');
 105     }
 106
 107     /** ===== GetPresets block ===== */
 108     presetSimValues(domains) {
 109         let domId = this.presetDomain(domains);
 110         let nextTimestamps = Object.keys(simVars.rasters[domId]).sort();
 111         simVars.sortedTimestamps = nextTimestamps;
 112
 113         this.presetStartDate(nextTimestamps);
 114         this.presetEndDate(nextTimestamps);
 115         this.presetCurrentTimestamp(nextTimestamps);
 116         this.presetOpacity();
 117
 118         return domId;
 119     }
 120
 121     presetDomain(domains) {
 122         let domId = domains[0];
 123         if (domains.includes(simVars.presets.domain)) {
 124             domId = simVars.presets.domain;
 125         }
 126         simVars.presets.domain = null;
 127         return domId;
 128     }
 129
 130     presetStartDate(nextTimestamps) {
 131         let startDate = nextTimestamps[0];
 132         let presetStartDate = localToUTC(simVars.presets.startDate);
 133         let desc = simVars.currentDescription;
 134         if (nextTimestamps.includes(presetStartDate)) {
 135             startDate = presetStartDate;
 136             simVars.presets.startDate = null;
 137         } else if(desc.indexOf('GACC') >= 0 || desc.indexOf(' FM') >= 0 || desc.indexOf('SAT') >= 0) {
 138             let lastTimestamp = nextTimestamps[nextTimestamps.length - 1];
 139             for (let i = 2; i <= nextTimestamps.length; i++) {
 140                 startDate = nextTimestamps[nextTimestamps.length - i];
 141                 if (daysBetween(startDate, lastTimestamp) >= 8) {
 142                     startDate = nextTimestamps[nextTimestamps.length - i + 1];
 143                     break;
 144                 }
 145             }
 146         } else if(this.isLidarProfile()) {
 147             let lastTimestamp = nextTimestamps[nextTimestamps.length - 1];
 148             for (let i = 2; i <= nextTimestamps.length; i++) {
 149                 startDate = nextTimestamps[nextTimestamps.length - i];
 150                 if (daysBetween(startDate, lastTimestamp) >= 1) {
 151                     startDate = nextTimestamps[nextTimestamps.length - i + 1];
 152                     break;
 153                 }
 154             }
 155         }
 156         controllers.startDate.setValue(startDate, controllerEvents.QUIET);
 157         controllers.timeSeriesStart.setValue(startDate, controllerEvents.QUIET);
 158     }
 159
 160     presetEndDate(nextTimestamps) {
 161         let endDate = nextTimestamps[nextTimestamps.length - 1];
 162         let presetEndDate = localToUTC(simVars.presets.endDate);
 163         if (nextTimestamps.includes(presetEndDate)) {
 164             endDate = presetEndDate;
 165         }
 166         simVars.presets.endDate = null;
 167         controllers.endDate.setValue(endDate, controllerEvents.QUIET);
 168         controllers.timeSeriesEnd.setValue(endDate, controllerEvents.QUIET);
 169     }
 170
 171     presetCurrentTimestamp(nextTimestamps) {
 172         let startDate = controllers.startDate.getValue();
 173         let endDate = controllers.endDate.getValue();
 174
 175         // if currentSim has "lidar" in it, then set the currentTimestamp to the last timestamp
 176         let currentTimestamp = this.isLidarProfile() ? endDate :  startDate;
 177         let presetTimestamp = localToUTC(simVars.presets.timestamp);
 178         if (nextTimestamps.includes(presetTimestamp) && presetTimestamp >= startDate && presetTimestamp <= endDate) {
 179             currentTimestamp = presetTimestamp;
 180         }
 181         simVars.presets.timestamp = null;
 182         controllers.currentTimestamp.setValue(currentTimestamp, controllerEvents.QUIET);
 183     }
 184
 185     isLidarProfile() {
 186         let currentSim = simVars.currentSimulation;
 187         return currentSim.includes("lidar");
 188     }
 189
 190     presetOpacity() {
 191         // for lidar profiles, set initial opacity to 1
 192         let opacity = this.isLidarProfile() ? 1.0 : 0.5;
 193         let presetOpacity = simVars.presets.opacity;
 194         if (presetOpacity && !isNaN(presetOpacity)) {
 195             presetOpacity = Number(presetOpacity);
 196             if (presetOpacity >= 0 && presetOpacity <= 1) {
 197                 opacity = presetOpacity;
 198             }
 199         }
 200         simVars.presets.opacity = null;
 201         controllers.opacity.setValue(opacity, controllerEvents.QUIET);
 202     }
 203
 204     /** ===== DomainSwitch block ===== */
 205     setUpForDomain(domId) {
 206         // set the current domain, must be updated in this order: sortedTimestamps, currentTimestamp, currentDomain
 207         let nextTimestamps = Object.keys(simVars.rasters[domId]).sort();
 208         let prevTimestamps = simVars.sortedTimestamps;
 209         simVars.sortedTimestamps = nextTimestamps;
 210
 211         this.updateStartDate(prevTimestamps);
 212         this.updateEndDate(prevTimestamps);
 213         this.updateCurrentTimestamp(prevTimestamps);
 214
 215         controllers.currentDomain.setValue(domId);
 216     }
 217
 218     updateStartDate(prevTimestamps) {
 219         let startDate = controllers.startDate.getValue();
 220         startDate = this.convertPrevTimestampToCurrentTimestamp(startDate, prevTimestamps);
 221         controllers.startDate.setValue(startDate, controllerEvents.QUIET);
 222         controllers.timeSeriesStart.setValue(startDate);
 223     }
 224
 225     updateEndDate(prevTimestamps) {
 226         let endDate = controllers.endDate.getValue();
 227         endDate = this.convertPrevTimestampToCurrentTimestamp(endDate, prevTimestamps);
 228         controllers.endDate.setValue(endDate, controllerEvents.QUIET);
 229         controllers.timeSeriesEnd.setValue(endDate);
 230     }
 231
 232     updateCurrentTimestamp(prevTimestamps) {
 233         let currentTimestamp = controllers.currentTimestamp.getValue();
 234         currentTimestamp = this.convertPrevTimestampToCurrentTimestamp(currentTimestamp, prevTimestamps);
 235         controllers.currentTimestamp.setValue(currentTimestamp, controllerEvents.QUIET);
 236     }
 237
 238     convertPrevTimestampToCurrentTimestamp(prevTimestamp, prevTimestamps) {
 239         let nextTimestamps = simVars.sortedTimestamps;
 240         if (nextTimestamps.includes(prevTimestamp)) {
 241             return prevTimestamp;
 242         }
 243         let prevIndex = prevTimestamps.indexOf(prevTimestamp);
 244         let percentage = prevIndex / prevTimestamps.length;
 245         let newIndex = Math.floor(nextTimestamps.length * percentage);
 246
 247         return nextTimestamps[newIndex];
 248     }
 249 }
 250
 251 window.customElements.define('domain-selector', DomainSelector);