* added workaround for invalid filter urls with =& characters

* added option to encode filters as base64 string when sharing dashboard
* fixed issue with invisible share button when opening the dashboard with filters

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deep-see-web",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config=proxy.conf.json --port 4007",

src/app/components/ui/header/header.component.ts

@@ -173,7 +173,7 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
      * @param path
      */
     private initSearch(path: string[]) {
-        this.isSearch = !path[path.length - 1]?.endsWith('.dashboard');
+        this.isSearch = !path[path.length - 1]?.split('?')[0]?.endsWith('.dashboard');
     }
 
     /**

src/app/components/ui/share-dashboard/share-dashboard/share-dashboard.component.html

@@ -1,5 +1,6 @@
 <div>
     <p>{{title}}</p>
-    <textarea type="text" [value]="shareUrl" [class.small]="isSmall"></textarea>
+    <textarea type="text" [value]="url" [class.small]="isSmall"></textarea>
+    <label><input type="checkbox" [(ngModel)]="asBase64" (change)="onFormatChange()">Filters as Base64</label>
     <button class="btn" (click)="onCopyClick()">{{isCopied ? 'Copied!' : btnTitle}}</button>
 </div>

src/app/components/ui/share-dashboard/share-dashboard/share-dashboard.component.scss

@@ -44,3 +44,18 @@ textarea {
 button {
     width: 100%;
 }
+
+input {
+    min-width: 16px;
+    width: 16px;
+    display: inline-block;
+    margin: 0;
+    margin-right: 4px;
+    vertical-align: bottom
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: normal;
+}

src/app/components/ui/share-dashboard/share-dashboard/share-dashboard.component.ts

@@ -1,25 +1,41 @@
-import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
 import {UtilService} from "../../../../services/util.service";
+import {StorageService} from "../../../../services/storage.service";
 
 @Component({
     selector: 'dsw-share-dashboard',
     templateUrl: './share-dashboard.component.html',
-    styleUrls: ['./share-dashboard.component.scss']
+    styleUrls: ['./share-dashboard.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ShareDashboardComponent implements OnDestroy {
+export class ShareDashboardComponent implements OnInit, OnChanges, OnDestroy {
     @Input() title = 'Share dashboard';
     @Input() btnTitle = 'Copy link';
     @Input() shareUrl = '';
     @Input() isSmall = false;
     onCopy = () => {};
     isCopied = false;
     timeout = 0;
+    asBase64 = false;
+    url = '';
 
-    constructor(private us: UtilService) {
+    constructor(private us: UtilService,
+                private ss: StorageService) {
+        this.asBase64 = this.ss.storage.getItem('dsw-share-format-base64') === '1';
+    }
+
+    ngOnInit() {
+        this.convertLink();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['shareUrl'].previousValue !== changes['shareUrl'].currentValue) {
+            this.convertLink();
+        }
     }
 
     onCopyClick() {
-        this.us.copyToClipboard(this.shareUrl);
+        this.us.copyToClipboard(this.url);
         this.isCopied = true;
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
@@ -32,4 +48,34 @@ export class ShareDashboardComponent implements OnDestroy {
     ngOnDestroy() {
         clearTimeout(this.timeout);
     }
+
+    onFormatChange() {
+        this.ss.storage.setItem('dsw-share-format-base64', this.asBase64 ? '1' : '0');
+        this.convertLink();
+    }
+
+    private convertLink() {
+        this.url = this.shareUrl;
+        if (this.asBase64) {
+            const parts = this.shareUrl.split('?');
+            const query = parts[1];
+            if (!query) {
+                return;
+            }
+            let params = query.split('&');
+            params = params.map(p => {
+                const pa = p.split('=');
+                if (pa[0] === 'FILTERS') {
+                    pa[1] = btoa(pa[1]);
+                    return pa.join('=');
+                } else {
+                    return p;
+                }
+            });
+            parts[1] = params.join('&');
+            this.url = parts.join('?');
+        } else {
+            this.url = this.shareUrl;
+        }
+    }
 }

src/app/services/filter.service.ts

@@ -164,14 +164,23 @@ export class FilterService {
         return encodeURIComponent(f.join(seporator));
     }
 
+    private isBase64(str: string) {
+        try {
+            return btoa(atob(str)) === str;
+        } catch (e) {
+            return false;
+        }
+    }
 
     loadFiltersFromUrl() {
         let query = window.location.hash.split('?')[1];
         if (!query) {
             return;
         }
         query = query.replace(/\.&%5B/g, '.%26%5B');
+        query = query.replace(/\.=&%5B/g, '.%26%5B');
         query = query.replace(/\.&\[/g, '.%26%5B');
+        query = query.replace(/\.=&\[/g, '.%26%5B');
         const p = query.split('&');
         let param = '';
         p.forEach(q => {
@@ -180,6 +189,9 @@ export class FilterService {
             };
         });
 
+        if (this.isBase64(param)) {
+            param = atob(param);
+        }
         //let param = this.route.snapshot.queryParamMap.get('FILTERS');
         if (!param) {
             // Workaround for invalid escaped links where "=" char is escaped. Requested by Shvarov

src/changelog.md

@@ -1,3 +1,8 @@
+#### 3.2.6
+* added workaround for invalid filter urls with `=&` characters
+* added option to encode filters as base64 string when sharing dashboard
+* fixed issue with invisible share button when opening the dashboard with filters 
+
 #### 3.2.5 
 * added workaround for invalid filter urls with `&` character
 * fixed issue with dashboard loading without filters