epiviz-workspace-db.html

<!-- Polymer dependency -->
<link rel="import" href="../polymer/polymer-element.html">

<!-- Style imports -->
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-label/iron-label.html">
<link rel="import" href="../paper-button/paper-button.html">
<!-- <link rel="import" href="../signin-button/signin-button.html"> -->
<link rel="import" href="../paper-dropdown-input/paper-dropdown-input.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<!-- <link rel="import" href="../paper-datatable/paper-datatable.html"> -->
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../paper-tags/paper-tags-input.html">
<link rel="import" href="../paper-tags/paper-tags.html">
<link rel="import" href="../bwt-datatable/bwt-datatable.html">

<!-- <link rel="import" href="components/polymer/lib/elements/dom-if.html"> -->

<script>
    // window.addEventListener('WebComponentsReady', function() {
        document.addEventListener('WorkspacesReady', function() {
            // const wsflag = JSON.parse(localStorage.getItem('workspaceLoginRefreshed'));
            // if (!wsflag) {
                var workspace = getUrlParameter("ws");
                var wid = getUrlParameter("wid");
                if(workspace) {
                    // document.querySelector("epiviz-workspace").loadWorkspace(parseInt(workspace));
                    document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-workspace").loadWorkspace(parseInt(workspace));
                }
                if(wid) {
                    document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-workspace").loadWorkspaceUUID(wid);
                }
            // }
        });
    // });

    function getUrlParameter(sParam) {
        var currPage = decodeURIComponent(window.location.search.substring(1));
        var pageVars = currPage.split('&');

        for (var i = 0; i < pageVars.length; i++) {
            var pageParamName = pageVars[i].split('=');

            if (pageParamName[0] === sParam) {
                return pageParamName[1] === undefined ? true : pageParamName[1];
            }
        }
    };
</script>
<!--
`<epiviz-workspace>` manages user workspaces.

To use, add `<epiviz-workspace>` in the page

      <epiviz-workspace></epiviz-workspace>

@demo demo/index.html Example page showing a workspace element
-->

<dom-module id="epiviz-workspace">

    <template>
        <style>

            /* paper-button {
                font-family: 'Roboto', 'Noto', sans-serif;
                font-weight: normal;
                font-size: 14px;
                -webkit-font-smoothing: antialiased;
                margin: 5px;
                border: 1px solid transparent;
                height: 50px;
                vertical-align: middle;
            } */


            .saveWorkspaceBold {
                font-weight: bold;
            }

            .ws{
                font-family: 'Roboto', 'Noto', sans-serif;
                font-size: 16px;
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .workspaceActions {
                display: flex;
                width: 70vh;
                align-items: center;
                justify-content: flex-end;            
            }

            .hidden {
                display: none !important;
            }

            #createWorkspace, #editWorkspace {
                padding: 25px;
                width: 75%;
            }

            /* .buttons {
                padding: 0px;
            } */
        </style>

        <!-- local DOM goes here -->

        <iron-ajax
            id="getallws"
            method="GET"
            url="[[api]]"
            handle-as="json"
            on-response="handleResponse"
            debounce-duration="300">
        </iron-ajax>

        <iron-ajax
            id="createws"
            method="POST"
            url="[[api]]"
            content-type="application/json"
            handle-as="json"
            on-response="handleCreateResponse"
            debounce-duration="300">
        </iron-ajax>

        <iron-ajax
            id="getws"
            method="GET"
            content-type="application/json"
            handle-as="json"
            on-response="handleGetResponse"
            debounce-duration="300">
        </iron-ajax>

        <iron-ajax
            id="updatews"
            method="PUT"
            content-type="application/json"
            url="[[_getUpdateURL(currentWorkspace)]]"
            handle-as="json"
            on-response="handleUpdateResponse"
            debounce-duration="300">
        </iron-ajax>

        <iron-ajax
            id="editws"
            method="PUT"
            content-type="application/json"
            handle-as="json"
            on-response="handleEditResponse"
            debounce-duration="300">
        </iron-ajax>

        <iron-ajax
            id="deletews"
            method="DELETE"
            handle-as="json"
            on-response="handleDeleteResponse"
            debounce-duration="300">
        </iron-ajax>

        <div class="workspaceActions">
            <!-- <div style="display:inline-block;" hidden$="{{computeLogoutHidden(user)}}"> 
            disabled="{{computeLogoutHidden(user)}}" -->
            
            <iron-label class$="{{_showTitleClass(currentWorkspace.*)}}">(Workspace: {{_getWorkspaceTitle(currentWorkspace.*, user)}})</iron-label>
            <!-- <div style="display:inline-block" hidden$="{{_isReadonly(readonly)}}"> -->
                <!-- <span>(Workspace: {{_getWorkspaceTitle(currentWorkspace.*, user)}})</span>
                <paper-button id="saveButton" raised on-tap="_saveWorkspace" hidden$="{{_showSaveWorkspace(currentWorkspace.*, user)}}">
                    Save
                </paper-button> -->
                                    <!-- <template is="dom-if" if="{{!workspaceSaved}}">
                        <span style="font-weight: bold;">
                            Save ({{_getWorkspaceTitle(currentWorkspace.*)}})
                        </span>
                      </template>
                      <template is="dom-if" if="{{workspaceSaved}}">
                        Save ({{_getWorkspaceTitle(currentWorkspace.*)}})
                      </template> -->
            <!-- </div> -->

            <paper-menu-button class$="{{_getWorkspaceClass(user, userToken)}}" vertical-offset=50>
                <paper-button raised slot="dropdown-trigger">
                    <span>Workspace</span>
                    <iron-icon icon="icons:arrow-drop-down"></iron-icon>
                  </paper-button>
                <paper-listbox slot="dropdown-content">
                    <paper-item hidden$="{{_showSaveWorkspace(currentWorkspace.*, user)}}" on-tap="_saveWorkspace">Save</paper-item>
                    <paper-item hidden$="[[!enableExtend]]" on-tap="_forkWorkspace">Save as New Workspace</paper-item>
                    <paper-item hidden$="[[enableExtend]]" on-tap="_saveTmpWorkspace">Save as New Workspace</paper-item>
                    <paper-item on-tap="_newWorkspace">Create Empty Workspace</paper-item>
                    <paper-item on-tap="_loadWorkspace">Manage Workspaces</paper-item>
                    <!-- <paper-item on-tap="_saveWorkspace">Save Workspace</paper-item> -->
                </paper-listbox>
            </paper-menu-button>
            <!-- </div> -->

            <paper-dialog id="createWorkspace" modal>
                <h2>Create new workspace</h2>
                <paper-dialog-scrollable>
                    <paper-input value="{{tmp_title}}" label="Workspace Name"></paper-input>
                    <paper-textarea rows="5" value="{{tmp_description}}" label="Description"></paper-textarea>
                    <!-- <iron-label>Genome</iron-label>
                    <paper-tags-input label="Genome" items='{{tmp_genome}}'></paper-tags-input> -->
                    <iron-label>Tags</iron-label>
                    <paper-tags-input label="Tags" items='{{tmp_tags}}'></paper-tags-input>                
                </paper-dialog-scrollable>
                <div class="buttons">
                    <paper-button dialog-dismiss>Close</paper-button>
                    <paper-button on-tap="onCreateWorkspace" dialog-confirm autofocus>Create</paper-button>
                </div>
            </paper-dialog>

            <paper-dialog id="editWorkspace" modal>
                <h2>Edit workspace</h2>
                <paper-dialog-scrollable>
                    <paper-input value="{{edit.title}}" label="Workspace Name"></paper-input>
                    <paper-textarea rows="5" value="{{edit.description}}" label="Description"></paper-textarea>
                    <!-- <iron-label>Genome</iron-label>
                    <paper-tags-input label="Genome" items='{{tmp_genome}}'></paper-tags-input> -->
                    <iron-label>Tags</iron-label>
                    <paper-tags-input label="Tags" items='{{edit.tags}}'></paper-tags-input>                
                </paper-dialog-scrollable>
                <div class="buttons">
                    <paper-button dialog-dismiss>Close</paper-button>
                    <paper-button on-tap="onEditWorkspace" dialog-confirm autofocus>Save</paper-button>
                </div>
            </paper-dialog>

            <paper-dialog id="loadWorkspace" modal>
                <h2>Manage workspaces</h2>
                <paper-dialog-scrollable>
                    <paper-datatable id="loadTable" on-selection-changed="_selectionChanged" on-cell-tap="_cellTapped" data="{{values}}" selected-item="{{tmp_title}}">
                        <paper-datatable-column header="Workspaces" property="title">
                        </paper-datatable-column>
                        <paper-datatable-column header="description" property="description">
                        </paper-datatable-column>
                        <paper-datatable-column header="genomes" property="genomes">
                            <template>
                                <paper-tags prevent-remove-tag readonly items="{{value}}"></paper-tags>
                            </template>
                        </paper-datatable-column>
                        <paper-datatable-column header="tags" property="tags">
                            <template>
                                <paper-tags prevent-remove-tag readonly items="{{value}}"></paper-tags>
                            </template>
                        </paper-datatable-column>
                        <paper-datatable-column header="Actions" property="title">
                            <template>
                                <!-- <span>Delete</span> -->
                                <paper-icon-button disabled$="{{_getClassDelete(value, item)}}" alt="Delete workspace" title="delete workspace" icon="delete"></paper-icon-button>
                                <paper-icon-button alt="edit workspace" title="edit workspace" icon="editor:mode-edit"></paper-icon-button>
                                <paper-icon-button alt="load workspace" title="load workspace" icon="icons:exit-to-app"></paper-icon-button>
                                <!-- <paper-icon-button on-tap="downloadTapped" icon="file-download"></paper-icon-button> -->
                            </template>
                            </paper-datatable-api-column>
                            </paper-datatable-api>
                </paper-dialog-scrollable>
                <div class="buttons">
                    <paper-button dialog-dismiss>Close</paper-button>
                    <!-- <paper-button on-tap="onLoadWorkspace" disabled={{itemNotSelected}} dialog-dismiss>Load</paper-button> -->
                </div>
            </paper-dialog>
        </div>

    </template>

    <script>
        // Extend Polymer.Element base class
        class EpivizWorkspace extends Polymer.Element {

            static get is() { return 'epiviz-workspace'; }

            static get properties() {
                return {
                    /**
                 * User attribute set by firebase-auth when the user is logged in
                 *
                 * @type {Object}
                 */
                    user: {
                        type: String,
                        notify: true,
                        value: ""
                    },

                    userToken: {
                        type: String,
                        notify: true,
                        value: ""
                    },

                    api: {
                        type: String,
                        notify: true
                    },

                    metadataApi: {
                        type: String,
                        notify: true
                    },

                    currentWorkspace: {
                        type: Object,
                        notify: true,
                        value: function() {
                            return null;
                        },
                        observer: "_currentWorkspaceChanged"
                    },

                    itemNotSelected: {
                        type: Boolean,
                        value: true,
                        notify: true,
                    },

                    /**
                     * Target Selector to create environments when workspaces are changed.
                     *
                     * defaults to document.
                     *
                     * @type {String}
                     */
                     targetSelector: {
                        type: String,
                        value: "body"
                    },

                    _updateFlag: {
                        type: Boolean,
                        value : false
                    },

                    /**
                     * Array of workspace names to populate dropdown
                     *
                     * @type {Array}
                     */
                     workspaceValues: {
                        type: Array,
                        notify: true,
                        value: []
                    },

                    values: {
                        type: Array,
                        notify: true,
                        value: []
                    },

                    readonly: {
                        type: Boolean,
                        notify: true,
                        value: false
                    },

                    workspaceSaved: {
                        type: Boolean,
                        value: true,
                        notify: true,
                        // observer: "_workspaceSavedChanged"
                    },

                    workspaceLoadCounter: {
                        type: Number,
                        value: 0
                    },

                    enableExtend: {
                        type: Boolean,
                        value: false
                    },

                    newWsFlag: {
                        type: Boolean,
                        value: false
                    },

                    saveTmp: {
                        type: Boolean,
                        value:false
                    },

                    edit: {
                        type: Object,
                        notify: true
                    }
                }
            }

            static get observers() {
                return [
                    /* observer array just like 1.x */
                ]
            }

            constructor() {
                super();
                this.tmpWorkspace = {};
                this._workspacesObj = {};
            }

            _getWorkspaceClass () {

                if (this.readonly) {
                    return "hidden"
                }

                if (!(this.userToken && this.userToken != "undefined")) {
                    return "hidden";
                }

                return "";
            }

            // _workspaceSavedChanged(newVal, oldVal) {
            //     if (!newVal && this.workspaceLoadCounter > 0) {
            //         this.$.saveButton.className = "saveWorkspaceBold";
            //         return;
            //     }
            //     this.$.saveButton.className = "";
            // }

            /* callback function after the element is attached to the DOM */
            connectedCallback() {
                super.connectedCallback();
                var self = this;

                if (!this.workspaceId) {
                    this.workspaceId = this._generateWorkspaceId();
                    this.set("user_workspaces." + this.workspaceId, this.title);
                }

                document.addEventListener('workspaceChanged', function (e) {
                    //replace with value received from environments
                    if (self.currentWorkspace) {
                        self.currentWorkspace["workspace"] = {};
                        self.currentWorkspace["workspace"][e.detail.id] = e.detail.data;
                        self.currentWorkspace.genomes = [e.detail.data.genome];
                    } else {
                        self.tmpWorkspace = {};
                        self.tmpWorkspace[e.detail.id] = e.detail.data;
                    }

                    self.workspaceSaved = false;
                    self.workspaceLoadCounter++;
                });
            }

            _showFork(currentWorkspace) {

            }

            _isReadOnly() {
                if (this.readonly) { return true;}
                return false;
            }

            _getClassDelete(value, item) {
                if (this.readonly) {return true;}

                if (this.currentWorkspace && this.currentWorkspace.workspace_uuid == item.key) {
                    return true;
                }
                return false;
            }

            disconnectedCallback() {
                super.disconnectedCallback();
            }

            /* callback function after the element is initialized */
            ready() {
                super.ready();
                self.triggerReload = false;

                document.dispatchEvent(new CustomEvent('WorkspacesReady',
                    {
                        bubbles: true
                    }
                ));
            }

            handleResponse(e) {
                var self = this;

                // workspace resp format
                // workspace = {
                //     workspace_id:"",
                //     user_id: "",
                //     title:  "",
                //     description: "",
                //     genomes: [],
                //     tags: [],
                //     workspace: {},
                //     id: 1234
                // }

                var resp = e.detail.response;
                self._workspaces = resp;
                self._workspacesObj = {}
                var names = [];
                resp.forEach(function(res) {
                    names.push({ "user_id":res.user_id, "title": res.title, "key": res.workspace_uuid, "description": res.description, "genomes": res.genomes, "tags": res.tags });
                    // names[res.id] = res.title;
                    self._workspacesObj[res.workspace_uuid] = res;
                });

                self.values = names;
                self.set("values", names)
                // this.gene = resp.data[0].gene;

                this.$.loadWorkspace.open();
            }

            _cellTapped(e) {
                var self = this;
                e.preventDefault();
                e.stopPropagation();
                if (e.detail.column.header == "Actions") {

                    if (e.detail.target.icon == "delete") {
                        // delete this workspace

                        if(!self.readonly) {
                            var ajaxElem = this.$.deletews;
                            ajaxElem.url = this._getDeleteURL(this._workspacesObj[e.detail.item.key]);
                            ajaxElem.headers = {"Authorization": "Bearer " + self.userToken};
                            ajaxElem.generateRequest();

                            delete self._workspacesObj[e.detail.item.key];
                        }
                    }
                    else if(e.detail.target.icon == "editor:mode-edit") {
                        self.editWorkspace(e);
                    }
                    else if (e.detail.target.icon == "icons:exit-to-app") {
                        self.onLoadWorkspace(e);
                    }
                }
            }

            handleCreateResponse(e) {
                var self = this;

                this.currentWorkspace = e.detail.response;
                self._workspacesObj[e.detail.response.id] = e.detail.response;

                var names = JSON.parse(JSON.stringify(self.values));

                names.push({ "title": e.detail.response.title, "key": e.detail.response.workspace_uuid,
                                "description": e.detail.response.description, "genomes": e.detail.response.genomes, 
                                "tags": e.detail.response.tags 
                            });

                self.values = names;
                self.set("values", names);

                // its in a wierd state where workspace is created after adding tracks
                //  TODO: this only works for now
                var elem = document.querySelector("epiviz-app").shadowRoot.querySelector(this.targetSelector).querySelector("epiviz-navigation");
                elem.saveWorkspace();

                window.history.replaceState("workspace", '', window.location.pathname + "?wid=" + e.detail.response.workspace_uuid);

                this._updateFlag = true;
            }

            handleGetResponse(e) {
                var self = this;
                this.currentWorkspace = e.detail.response;

                // $(self.targetSelector).empty();
                if (document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-navigation")) {
                    document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-navigation").remove();
                }

                for (var env in self.currentWorkspace.workspace) {
                    var elem = document.createElement(self.currentWorkspace.workspace[env].node);
                    elem.setAttribute("plot-id", env);
                    elem.setAttribute("genome", self.currentWorkspace.workspace[env].genome);
                    elem.setAttribute("workspace", JSON.stringify(self.currentWorkspace.workspace[env]));
                    elem.setAttribute("ms-api", self.metadataApi);

                    // $(self.targetSelector).append(elem);
                    document.querySelector("epiviz-app").shadowRoot.querySelector(self.targetSelector).append(elem);

                }

                var ws = this.getUrlParameter("ws");
                if (ws && ws != "") {
                    var gene = this.getUrlParameter("gene");
                    if (gene && gene != "") {
                        window.history.replaceState("gene", '', window.location.pathname + 
                                "?wid=" + e.detail.response.workspace_uuid + "&gene=" + gene);
                    }
                    else {
                        window.history.replaceState("gene", '', window.location.pathname + 
                                "?wid=" + e.detail.response.workspace_uuid);
                    }
                }

                this.set("tmp_title", "");
                this._updateFlag = true;
                this.workspaceSaved = true;
            }

            getUrlParameter(sParam) {
                var currPage = decodeURIComponent(window.location.search.substring(1));
                var pageVars = currPage.split('&');

                for (var i = 0; i < pageVars.length; i++) {
                    var pageParamName = pageVars[i].split('=');

                    if (pageParamName[0] === sParam) {
                        return pageParamName[1] === undefined ? true : pageParamName[1];
                    }
                }
            }

            handleUpdateResponse(e) {
                this.workspaceSaved = true;
            }

            handleDeleteResponse(e) {
                var self = this;

                var names = [];
                Object.keys(self._workspacesObj).forEach(function(m) {
                    var elem = self._workspacesObj[m];
                    names.push({ "title": elem.title, "key": elem.workspace_uuid,
                    "description": elem.description, "genomes": elem.genomes, 
                                "tags": elem.tags });
                });

                self.values = names;
                self.set("values", names)

                this._refitModal();
            }

            _showTitle(currentWorkspace) {
                // if (this.readonly) { return true;}
                var currentWorkspace = this.currentWorkspace;
                if(currentWorkspace == null || currentWorkspace == {} || currentWorkspace == undefined) {
                    return true
                } else {
                    if (!currentWorkspace.title || currentWorkspace.title == '') {
                        return true;
                    }
                }

                return false
            }

            _showTitleClass(currentWorkspace) {
                // if (this.readonly) { return true;}
                var currentWorkspace = this.currentWorkspace;
                if(currentWorkspace == null || currentWorkspace == {} || currentWorkspace == undefined) {
                    return "hidden"
                } else {
                    if (!currentWorkspace.title || currentWorkspace.title == '') {
                        return "hidden";
                    }
                }

                return "ws"
            }

            _showSaveWorkspace(currentWorkspace, user) {
                if (this.readonly) { return true;}
                var currentWorkspace = this.currentWorkspace;
                if(currentWorkspace == null || currentWorkspace == {} || currentWorkspace == undefined) {
                    return true
                } else {
                    if (currentWorkspace.user_id != this.user) {
                        return true;
                    }
                }

                return false
            }

            _getWorkspaceTitle(currentWs, user) {
                var currentWorkspace = this.currentWorkspace;
                if(currentWorkspace) {
                    return currentWorkspace.title; //.slice(0, 5) + "...";
                }

                return ""
            }

            _saveWorkspace(e) {
                var self = this;
                // this._currentWorkspaceChanged(this.currentWorkspace);
                if (this.currentWorkspace && this._updateFlag) {
                    var ajaxElem = this.$.updatews;
                    ajaxElem.body = this.currentWorkspace;
                    ajaxElem.headers = {"Authorization": "Bearer " + self.userToken};

                    ajaxElem.generateRequest();
                }
            }

            /**
             * Dialog for creating a new Workspace
             */
             _newWorkspace(e) {
                var self = this;
                self.tmpWorkspace = {};
                self.currentWorkspace = null;

                if (document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-navigation")) {
                    document.querySelector("epiviz-app")
                        .shadowRoot.querySelector("epiviz-navigation").remove();
                }
                var elem = document.createElement("epiviz-navigation");
                elem.setAttribute("genome", "hg38");
                elem.setAttribute("gene", "BIN1");
                elem.setAttribute("no-logo", true)
                elem.setAttribute("ms-api", self.metadataApi);

                document.querySelector("epiviz-app")
                    .shadowRoot.querySelector(self.targetSelector).append(elem);

                self.newWsFlag = true;
                self.saveTmp = false;

                this.$.createWorkspace.open();
            }           


            /**
             * Dialog to fork a new Workspace
             */
             _forkWorkspace(e) {
                var self = this;
                self.newWsFlag = false;
                self.saveTmp = false;
                this.$.createWorkspace.open();
            }

            _saveTmpWorkspace(e) {
                var self = this;
                self.newWsFlag = false;
                self.saveTmp = true;
                this.$.createWorkspace.open();
            }

            onCreateWorkspace(e) {
                var self = this;
                this.set("title", this.tmp_title);

                if (!self.newWsFlag) {

                    if(self.saveTmp) {

                        var tmp_workspace = this.tmpWorkspace;
                        var tmp_genomes = [this.tmpWorkspace[Object.keys(this.tmpWorkspace)[0]].genome];

                        // var tmp_workspace = this.tmpWorkspace.workspace;
                        // var tmp_genomes = this.tmpWorkspace.genomes;

                        this.currentWorkspace = {
                            user_id: this.user,
                            title:  this.tmp_title,
                            description: this.tmp_description,
                            genomes: tmp_genomes,
                            tags: this.tmp_tags,
                            workspace: tmp_workspace
                        }

                    } else {
                        var fork_workspace = this.currentWorkspace.workspace;
                        var fork_genomes = this.currentWorkspace.genomes;

                        this.currentWorkspace = {
                            user_id: this.user,
                            title:  this.tmp_title,
                            description: this.tmp_description,
                            genomes: fork_genomes,
                            tags: this.tmp_tags,
                            workspace: fork_workspace
                        }
                    }

                } else {
                    var new_workspace_id = this._generateWorkspaceId();

                    // this.set("workspaceId", new_workspace_id);
                    // this.set("title", this.tmp_title);

                    this.currentWorkspace = {
                        user_id: this.user,
                        title:  this.tmp_title,
                        description: this.tmp_description,
                        genomes: [],
                        tags: this.tmp_tags,
                        workspace: {}
                    }

                    if(this.tmpWorkspace) {
                        this.currentWorkspace.workspace = this.tmpWorkspace;
                        this.currentWorkspace.genomes.push(this.tmpWorkspace[Object.keys(this.tmpWorkspace)[0]].genome);
                    }
                }

                this.set("currentWorkspace", this.currentWorkspace);

                var ajaxElem = this.$.createws;
                ajaxElem.body = this.currentWorkspace;
                ajaxElem.generateRequest();
            }

            editWorkspace(e) {
                this.edit = e.detail.item;
                console.log("BEFORE");
                console.log(this.edit);
                this.$.editWorkspace.open();
            }

            onEditWorkspace(e) {

                var needUpdateWorkspace = this._workspacesObj[this.edit.key];
                // set things on update
                needUpdateWorkspace["title"] = this.edit["title"];
                needUpdateWorkspace["description"] = this.edit["description"];
                needUpdateWorkspace["tags"] = this.edit["tags"]

                if (this.currentWorkspace && this.currentWorkspace.id == needUpdateWorkspace.id) {
                    this.currentWorkspace = needUpdateWorkspace
                }

                var self = this;
                var ajaxElem = this.$.editws;
                ajaxElem.url = this.api + needUpdateWorkspace.id;
                ajaxElem.body = needUpdateWorkspace;
                ajaxElem.headers = {"Authorization": "Bearer " + self.userToken};

                ajaxElem.generateRequest();
            }

            handleEditResponse() {
                var self = this;
                var ajaxElem = this.$.getallws;
                ajaxElem.url = this.api + "user/" + this.user;
                ajaxElem.headers = {"Authorization": "Bearer " + self.userToken};

                // ajaxElem.generateRequest();
                // self.saveWorkspace = true;

                ajaxElem.generateRequest();

                this._refitModal();
            }

            _refitModal() {
                setTimeout(() => this.$.loadWorkspace.refit(), 0);
            }

            /**
             * Load an existing Workspace
             */
             _loadWorkspace(e) {
                var self = this;
                var ajaxElem = this.$.getallws;
                ajaxElem.url = this.api + "user/" + this.user;
                ajaxElem.headers = {"Authorization": "Bearer " + self.userToken};

                // ajaxElem.generateRequest();
                self.saveWorkspace = true;

                ajaxElem.generateRequest();
            }

            onLoadWorkspace(e) {
                var self = this;
                this.currentWorkspace = this._workspacesObj[e.detail.item.key];
                // this.set("title", this.tmp_title.title);

                // $(self.targetSelector).empty();
                if (document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-navigation")) {
                    document.querySelector("epiviz-app").shadowRoot.querySelector("epiviz-navigation").remove();
                }

                for (var env in self.currentWorkspace.workspace) {
                    var elem = document.createElement(self.currentWorkspace.workspace[env].node);
                    elem.setAttribute("plot-id", env);
                    elem.setAttribute("workspace", JSON.stringify(self.currentWorkspace.workspace[env]));
                    elem.setAttribute("ms-api", self.metadataApi);
                    // $(self.targetSelector).append(elem);
                    document.querySelector("epiviz-app").shadowRoot.querySelector(self.targetSelector).append(elem);
                    // elem.loadWorkspace(elem.workspace);
                }

                window.history.replaceState("workspace", '', window.location.pathname + "?wid=" + e.detail.item.key);

                this.$.loadWorkspace.close();

                // this.set("tmp_title", "");
                // this.$.loadTable.deselectAll();

                this._updateFlag = true;
            }

            loadWorkspace(id) {
                var self = this;

                var ajaxElem = this.$.getws;
                ajaxElem.url = this.api + id;
                ajaxElem.generateRequest();
                self.saveWorkspace = true;
                self.enableExtend = true;
            }

            loadWorkspaceUUID(id) {
                var self = this;

                var ajaxElem = this.$.getws;
                ajaxElem.url = this.api + "uuid/" + id;
                ajaxElem.generateRequest();
                self.saveWorkspace = true;
                self.enableExtend = true;
            }

            _getUpdateURL(cw) {
                if (cw) {
                    return this.api + cw.id;
                }

                return this.api;
            }

            _getDeleteURL(cw) {
                if (cw) {
                    return this.api + cw.id;
                }

                return this.api;
            }

            _currentWorkspaceChanged(newVal, oldVal) {
                this.workspaceSaved = false;
            }

            _selectionChanged(e) {
                if ("selected" in e.detail) {
                    this.itemNotSelected = false;
                } else {
                    this.itemNotSelected = true;
                }
            }

            /**
             * Delete Workspace
             */
            delete() {}

            validate(title) {
                return /^[a-zA-Z0-9- ]*$/.test(title)
            }

            /**
            * Generates a unique workspace ID
            * 
            * @return {string}
            */
            _generateWorkspaceId() {
                var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                var result = '';
                var size = 8;

                for (var i = 0; i < size; ++i) {
                    result += chars[Math.round(Math.random() * (chars.length - 1))];
                }
                return 'epiviz-' + result;
            }
        };

        customElements.define(EpivizWorkspace.is, EpivizWorkspace);

    </script>
</dom-module>