Updated to take GET parameter

html/components/basic-func/basicFunc.js

@@ -36,6 +36,7 @@ var GIVe = (function (give) {
   }
 
   /**
+   * (Deprecated: use `window.URLSearchParams` instead)
    * getParameterByName - get parameters encoded in URL string
    * adapted from the following StackOverflow answer:
    * http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
@@ -50,8 +51,8 @@ var GIVe = (function (give) {
       url = window.location.href
     }
     name = name.replace(/[[]]/g, '\\$&')
-    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
-    var results = regex.exec(url)
+    let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
+    let results = regex.exec(url)
     if (!results) return null
     if (!results[2]) return ''
     return decodeURIComponent(results[2].replace(/\+/g, ' '))

html/components/chart-area/chart-area.html

@@ -170,11 +170,6 @@
           observer: '_coorChanged'
         },
 
-        ref: {
-          type: String,
-          observer: '_refChanged'
-        },
-
         /**
          * Number of sub views in this controller.
          * Notice that if this setting is different from `coordinates.length`,
@@ -711,6 +706,41 @@
     get chartCoordinates () {
       return this._chartWindows.map(window => window.coordinate)
     }
+
+    _urlParamToProp (params) {
+      // rewrite methods to single out `ref` and `coordinates`
+      let paramReplaced = false
+      let newRef = null
+      let newNumOfSubs, newCoordinates
+      if (params.has('ref')) {
+        newRef = window.decodeURIComponent(params.get('ref'))
+        let tempRef = JSON.parse(newRef)
+        if (Array.isArray(tempRef) && tempRef.length > 0) {
+          newNumOfSubs = tempRef.length
+        }
+        paramReplaced = true
+      }
+      if (params.has('group')) {
+        this.groupIdList = JSON.parse(
+          window.decodeURIComponent(params.get('group')))
+        paramReplaced = true
+      }
+      if (params.has('track')) {
+        this.defaultTrackIdList = JSON.parse(
+          window.decodeURIComponent(params.get('track')))
+        paramReplaced = true
+      }
+      if (params.has('coordinate')) {
+        newCoordinates = window.decodeURIComponent(params.get('coordinate'))
+        paramReplaced = true
+      }
+      if (newRef || newNumOfSubs || newCoordinates) {
+        this.priorityManagersReadyPromise.then(() => 
+          this.updateNumOfSubs(newNumOfSubs, newRef, newCoordinates)
+        )
+      }
+      return paramReplaced
+    }
   }
 
   ChartArea.DEFAULT_RESIZE_DEBOUNCE = 400

html/components/chart-controller/chart-controller.html

@@ -297,11 +297,6 @@
           notify: true
         },
 
-        ref: {
-          type: String,
-          notify: true
-        },
-
         /**
          * The title text that will appear in the embedded browser.
          * @type {string}
@@ -546,12 +541,6 @@
       }
     }
 
-    _refChanged (newValue, oldValue) {
-      if (!this._updatingRefCoordinates) {
-        return this._syncCoordinateRefJsonToArray()
-      }
-    }
-
     _errorHandler (err) {
       // some exception has happended during the conversion
       // throw an exception telling calling procedures
@@ -560,6 +549,35 @@
       }
       // TODO: gracefully handle the exception
     }
+
+    /**
+     * Handle parameters passed via URL GET parameters
+     *
+     * The GET parameters (a URL-encoded JSON string) can be used to
+     * override the following properties:
+     * `ref`: an array replacing `this._refArray`;
+     * `groups`: an array replacing `this.groupIdList`
+     * `tracks`: an array replacing `this.defaultTrackIdList`
+     * Other properties can be overridden in extended classes. Just overload
+     * `this._urlParamToProp` method.
+     */
+    _urlParamToProp (params) {
+      let paramReplaced = false
+      // IMPORTANT: needs to change `this.numOfSubs` if `ref` is an array
+      if (params.has('ref')) {
+        let tempRef = JSON.parse(window.decodeURIComponent(params.get('ref')))
+        if (Array.isArray(tempRef) && tempRef.length > 0) {
+          this._syncNumOfSubs(tempRef.length)
+        }
+        paramReplaced = true
+      }
+      paramReplaced = super._urlParamToProp(params) || paramReplaced
+      if (params.has('coordinate')) {
+        this.coordinate = window.decodeURIComponent(params.get('coordinate'))
+        paramReplaced = true
+      }
+      return paramReplaced
+    }
   }
 
   give.ChartController = ChartController

html/components/chart-track-list/chart-track-list.html

@@ -239,12 +239,6 @@
         hasControls: {
           type: Boolean,
           value: false
-        },
-
-        ref: {
-          type: String,
-          value: '',
-          observer: '_refChanged'
         }
       }
     }

html/components/priority-manager/priorityManagerCollection.js

@@ -124,10 +124,17 @@ var GIVe = (function (give) {
         this._resolveInitPriorityManagerFunc = () => {}
         this.addEventListener('init-priority-manager',
           e => this._initEventHandler(e), true)
+        this._urlParamInitializable = true
       }
 
       static get properties () {
         return {
+          ref: {
+            type: String,
+            observer: '_refChangedHandler',
+            notify: true
+          },
+
           /**
            * The reference used in the embedded browser.
            * Reference names needs to be in UCSC format.
@@ -190,19 +197,23 @@ var GIVe = (function (give) {
               // already initialized (by a parent or self)
               return this._fulfillInitPriorityManagerFunc(true)
             } else {
+              // Replace properties with URL GET parameters
+              this._urlParamHandler()
               if (!this.priorityManagers) {
                 this.priorityManagers = new PriorityManagerCollection(
                   this._refArray, this.defaultTrackIdList, this.groupIdList,
                   this.slotNames, this.settingString, this.includeCoordinates,
                   this.getSlotSettingFunc
                 )
               } else {
+                // Use properties to initialize `this.priorityManagers`
                 this.priorityManagers.syncRefList(this._refArray, false,
                   this.defaultTrackIdList, this.groupIdList)
                 this._refArray.forEach(
                   ref => this.notifyPath('priorityManagers.' + ref))
               }
               this.priorityManagers.readyPromise.then(() => {
+                this._urlParamInitializable = false
                 this._initialEventTargets.forEach((token, target, map) =>
                   give.fireSignal('init-priority-manager',
                     { initialized: true, token: token }, null, target
@@ -244,6 +255,7 @@ var GIVe = (function (give) {
           delete this._resolveInitPriorityManagerFunc
           delete this._rejectInitPriorityManagerFunc
           delete this._priorityManagersReadyPromise
+          this._urlParamInitializable = false
         }
       }
 
@@ -272,6 +284,52 @@ var GIVe = (function (give) {
             ? this.priorityManagers.readyPromise
             : Promise.resolve())
       }
+
+      /**
+       * Handle parameters passed via URL GET parameters
+       *
+       * The GET parameters (a URL-encoded JSON string) can be used to
+       * override the following properties:
+       * `ref`: an array replacing `this._refArray`;
+       * `group`: an array replacing `this.groupIdList`
+       * `track`: an array replacing `this.defaultTrackIdList`
+       * Other properties can be overridden in extended classes. Just overload
+       * `this._urlParamToProp` method.
+       */
+      _urlParamHandler () {
+        if (this._urlParamInitializable) {
+          let params = new window.URLSearchParams(window.location.search)
+          return this._urlParamToProp(params)
+        }
+        return false
+      }
+
+      _urlParamToProp (params) {
+        let paramReplaced = false
+        if (params.has('ref')) {
+          this.ref = window.decodeURIComponent(params.get('ref'))
+          paramReplaced = true
+        }
+        if (params.has('group')) {
+          this.groupIdList = JSON.parse(
+            window.decodeURIComponent(params.get('group')))
+          paramReplaced = true
+        }
+        if (params.has('track')) {
+          this.defaultTrackIdList = JSON.parse(
+            window.decodeURIComponent(params.get('track')))
+          paramReplaced = true
+        }
+        return paramReplaced
+      }
+
+      _refChanged (newValue, oldValue) {
+        return
+      }
+
+      _refChangedHandler (newValue, oldValue) {
+        return this._refChanged(newValue, oldValue)
+      }
     }
   )
 

html/epialign-enh-index.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>EpiAlignment Browser (powered by GIVE)</title>
+  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+  <link rel="import" href="components/chart-controller/chart-controller.html">
+  <link rel="import" href="components/give-styles.html">
+  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+  <link rel="import" href="components/giv-main/giv-main.html">
+  <custom-style include="give-shared-styles iron-flex iron-positioning">
+    <style is="custom-style" include="give-shared-styles iron-flex iron-positioning">
+    body {
+      font-family: 'Roboto';
+      font-size: 14px;
+    }
+    h2 {
+      font-family: 'Roboto';
+      font-size: 16px;
+      line-height: 1.4em;
+      margin: 1em 1em 0.5em 1em;
+    }
+    p {
+      margin: 0.5em 1.5em;
+      line-height: 1.4em;
+    }
+    </style>
+  </custom-style>
+</head>
+<body unresolved class="fullbleed layout vertical">
+  <script>
+    /* eslint-disable */
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-3695776-7', 'auto');
+    ga('send', 'pageview');
+
+    /* eslint-enable */
+  </script>
+  <chart-controller ref='["mm10", "hg38"]' id="mainChartController" num-of-subs="2"
+    group-id-list='["genes", "epialign"]'
+    class="flex"
+    default-track-id-list='["knownGene", "gsm1673960-p",
+      "gsm1673960-b", "gsm1674016-p", "gsm1674016-b"]'
+    coordinate='["chr12:8187583-8229349", "chr2:20787603-20835304"]'
+    title-text='EpiAlignment Browser (powered by GIVE)'>
+  </chart-controller>
+</body>
+</html>

html/epialign-index.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>EpiAlignment Browser (powered by GIVE)</title>
+  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+  <link rel="import" href="components/chart-controller/chart-controller.html">
+  <link rel="import" href="components/give-styles.html">
+  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+  <link rel="import" href="components/giv-main/giv-main.html">
+  <custom-style include="give-shared-styles iron-flex iron-positioning">
+    <style is="custom-style" include="give-shared-styles iron-flex iron-positioning">
+    body {
+      font-family: 'Roboto';
+      font-size: 14px;
+    }
+    h2 {
+      font-family: 'Roboto';
+      font-size: 16px;
+      line-height: 1.4em;
+      margin: 1em 1em 0.5em 1em;
+    }
+    p {
+      margin: 0.5em 1.5em;
+      line-height: 1.4em;
+    }
+    </style>
+  </custom-style>
+</head>
+<body unresolved class="fullbleed layout vertical">
+  <script>
+    /* eslint-disable */
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-3695776-7', 'auto');
+    ga('send', 'pageview');
+
+    /* eslint-enable */
+  </script>
+  <chart-controller ref='["hg38", "mm10"]' id="mainChartController" num-of-subs="2"
+    group-id-list='["genes", "epialign"]'
+    class="flex"
+    default-track-id-list='["knownGene", "gsm1673960-p",
+      "gsm1673960-b", "gsm1674016-p", "gsm1674016-b"]'
+    coordinate='["chr5:141124567-141148657", "chr18:37411305-37451753"]'
+    title-text='EpiAlignment Browser (powered by GIVE)'>
+  </chart-controller>
+</body>
+</html>