{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitFlow.vue?vue&type=style&index=0&id=053e7768&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/SplitFlow.vue","mtime":1702244729430},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci5kaWFsb2ctaGVhZGVyIHsKICBjb2xvcjogIzMzMzsKICBsaW5lLWhlaWdodDogMjBweDsKICBib3JkZXItYm90dG9tOiBzb2xpZCAwLjdweCAjZGNkZmU2OwogIGJhY2tncm91bmQtY29sb3I6ICNmNWY3ZmE7Cn0KCi5kaWFsb2ctbWFpbiB7CiAgcGFkZGluZzogMHB4OwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKfQoKLnN0YXJ0LXVwIHsKICA6OnYtZGVlcCAuZWwtZHJhd2VyX19vcGVuIHsKICAgIC5lbC1kcmF3ZXIgewogICAgICAmLnJ0bCB7CiAgICAgICAgYW5pbWF0aW9uOiB1bnNldDsKICAgICAgfQogICAgfQogIH0KICA6OnYtZGVlcCAuZWwtZHJhd2VyLWZhZGUtbGVhdmUtYWN0aXZlIHsKICAgIGFuaW1hdGlvbjogdW5zZXQ7CiAgfQogIDo6di1kZWVwIC5lbC1kcmF3ZXIgewogICAgJi5ydGwgewogICAgICBhbmltYXRpb246IHJ0bC1kcmF3ZXItb3V0IDJzIGxpbmVhcjsKICAgIH0KICB9CgogIDo6di1kZWVwIC5lbC1kcmF3ZXJfX3dyYXBwZXIgewogICAgJi5zaWRlLWJhciB7CiAgICAgIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7CiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["SplitFlow.vue"],"names":[],"mappings":";AAwWA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"SplitFlow.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <el-container style=\"height: 100%; background: white\">\n    <el-header\n      ref=\"header\"\n      style=\"text-align: left; font-size: 14px; padding: 0\"\n      height=\"32px\"\n      class=\"dialog-header\"\n    >\n      <DialogToolbarContent\n        :numberOfEntries=\"entries.length\"\n        @onFullscreen=\"onFullscreen\"\n        :showHelpIcon=\"true\"\n        @local-search=\"onDisplaySearch\"\n        @fetch-suggestions=\"fetchSuggestions\"\n        ref=\"dialogToolbar\"\n      />\n    </el-header>\n    <el-main class=\"dialog-main\">\n      <div\n        style=\"width: 100%; height: 100%; position: relative; overflow: hidden\"\n      >\n        <SideBar\n          ref=\"sideBar\"\n          :envVars=\"envVars\"\n          :visible=\"sideBarVisibility\"\n          :class=\"['side-bar', { 'start-up': startUp }]\"\n          :activeId=\"activeDockedId\"\n          :open-at-start=\"startUp\"\n          @actionClick=\"actionClick\"\n          @tabClicked=\"tabClicked\"\n          @search-changed=\"searchChanged($event)\"\n          @contextUpdate=\"contextUpdate($event)\"\n        />\n        <SplitDialog\n          :entries=\"entries\"\n          ref=\"splitdialog\"\n          @resource-selected=\"resourceSelected\"\n        />\n      </div>\n    </el-main>\n  </el-container>\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport DialogToolbarContent from \"./DialogToolbarContent\";\nimport EventBus from \"./EventBus\";\nimport SplitDialog from \"./SplitDialog\";\n// import contextCards from './context-cards'\nimport { SideBar } from \"@abi-software/map-side-bar/src/components/index.js\";\nimport { capitalise, getNewMapEntry, initialDefaultState } from \"./scripts/utilities.js\";\nimport store from \"../store\";\nimport Vue from \"vue\";\nimport { Container, Header, Main } from \"element-ui\";\nVue.use(Container);\nVue.use(Header);\nVue.use(Main);\n\n/**\n * Component of the floating dialogs.\n */\nexport default {\n  name: \"SplitFlow\",\n  components: {\n    DialogToolbarContent,\n    SplitDialog,\n    SideBar,\n  },\n  props: {\n    state: {\n      type: Object,\n      default: undefined,\n    }\n  },\n  data: function () {\n    return {\n      sideBarVisibility: true,\n      startUp: true,\n      search: '',\n      activeDockedId : 1,\n    }\n  },\n  watch: {\n    state: {\n      handler: function (value) {\n        if (value) {\n          if (!this._externalStateSet) this.setState(value);\n          this._externalStateSet = true;\n        }\n      },\n      immediate: true,\n    },\n  },\n  methods: {\n    /**\n     * Callback when an action is performed (open new dialogs).\n     */\n    actionClick: function (action) {\n      if (action) {\n        if (action.type == \"Search\") {\n          if (action.nervePath) {\n            this.openSearch([action.filter], action.label);\n          } else {\n            this.openSearch([], action.term);\n          }\n        } else if (action.type == \"URL\") {\n          window.open(action.resource, \"_blank\");\n        } else if (action.type == \"Facet\") {\n          this.$refs.sideBar.addFilter(action);\n        } else if (action.type == \"Facets\") {\n          const facets = [];\n          store.state.settings.facets.species.forEach(e => {\n            facets.push({\n              facet: capitalise(e),\n              term: \"Species\",\n              facetPropPath: \"organisms.primary.species.name\",\n            });\n          });\n          if (facets.length == 0)\n            facets.push({\n              facet: \"Show All\",\n              term: \"Species\",\n              facetPropPath: \"organisms.primary.species.name\",\n            });\n          facets.push(\n            ...action.labels.map(val => ({\n              facet: capitalise(val),\n              term: \"Anatomical structure\",\n              facetPropPath: \"anatomy.organ.category.name\",\n            }))\n          );\n          this.$refs.sideBar.openSearch(facets, \"\");\n        } else {\n          this.createNewEntry(action);\n        }\n      }\n    },\n    onDisplaySearch: function (payload) {\n      let searchFound = false;\n      //Search all active viewers when global callback is on\n      let splitdialog = this.$refs.splitdialog;\n      if (splitdialog) {\n        const activeContents = splitdialog.getActiveContents();\n        activeContents.forEach(content => {\n          if (content.search(payload.term)) {\n            searchFound = true;\n          }\n        });\n      }\n      this.$refs.dialogToolbar.setFailedSearch(searchFound ? undefined : payload.term);\n    },\n    fetchSuggestions: function(payload) {\n      const suggestions = [];\n      //Search all active viewers when global callback is on\n      let splitdialog = this.$refs.splitdialog;\n      const activeContents = splitdialog.getActiveContents();\n      //Push new suggestions into the pre-existing suggestions array\n      activeContents.forEach(content => content.searchSuggestions(payload.data.term, suggestions));\n      const unique = new Set(suggestions);\n      suggestions.length = 0;\n      for (const item of unique) {\n        suggestions.push({\"value\": \"\\\"\" + item +\"\\\"\"});\n      }\n      payload.data.cb(suggestions);\n    },\n    searchChanged: function (data) {\n      if (data && data.type == \"query-update\") {\n        this.search = data.value;\n      }\n      if (data && data.type == \"filter-update\") {\n        store.commit(\"settings/updateFacets\", data.value);\n      }\n      if (data && data.type == \"available-facets\") {\n        store.commit(\"settings/updateFacetLabels\", data.value.labels);\n        store.commit(\"settings/updateMarkers\", data.value.uberons);\n        EventBus.$emit(\"markerUpdate\");\n      }\n    },\n    getNewEntryId: function() {\n      if (this.entries.length) {\n        return (this.entries[this.entries.length - 1]).id + 1;\n      }\n      return 1;\n    },\n    /**\n     * Activate Synchronised workflow\n     */\n    activateSyncMap: function (data) {\n      let newEntry = {};\n      Object.assign(newEntry, data);\n      newEntry.mode = \"normal\";\n      newEntry.id = this.getNewEntryId();\n      newEntry.state = undefined;\n      newEntry.type = \"Scaffold\";\n      newEntry.discoverId = data.discoverId;\n      newEntry.rotation = \"free\";\n      if (data.layout == \"2vertpanel\") newEntry.rotation = \"horizontal\";\n      else if (data.layout == \"2horpanel\") newEntry.rotation = \"vertical\";\n      store.commit(\"entries/addNewEntry\", newEntry);\n      store.commit(\"splitFlow/setSyncMode\", {\n        flag: true,\n        newId: newEntry.id,\n        layout: data.layout,\n      });\n      return newEntry.id;\n    },\n    /**\n     * Add new entry which will sequentially create a\n     * new dialog.\n     */\n    createNewEntry: function (data) {\n      let newEntry = {};\n      newEntry.viewUrl = undefined;\n      newEntry.state = undefined;\n      Object.assign(newEntry, data);\n      newEntry.mode = \"normal\";\n      newEntry.id = this.getNewEntryId();\n      newEntry.discoverId = data.discoverId;\n      store.commit(\"entries/addNewEntry\", newEntry);\n      this.setIdToPrimaryPane(newEntry.id);\n      if (store.state.splitFlow.syncMode) {\n        store.commit(\"splitFlow/setSyncMode\", { flag: false });\n      }\n\n      //close sidebar on entry creation to see the context card\n      this.$refs.sideBar.setDrawerOpen(false)\n\n      return newEntry.id;\n    },\n    openNewMap: async function (type) {\n      const entry = await getNewMapEntry(type, store.state.settings.sparcApi);\n      this.createNewEntry(entry);\n      if (entry.contextCard) {\n        EventBus.$emit(\"contextUpdate\", entry.contextCard);\n      }\n    },\n    openSearch: function (facets, query) {\n      // Keep the species facets currently unused\n      // let facets = [{facet: \"All species\", facetPropPath: 'organisms.primary.species.name', term:'species'}];\n      // store.state.settings.facets.species.forEach(e => {\n      //   facets.push({facet: e, facetPropPath: 'organisms.primary.species.name', term:'species'});\n      // });\n      this.search = query;\n      this._facets = facets;\n      if (this.$refs && this.$refs.sideBar) {\n        this.$refs.sideBar.openSearch(facets, query);\n      }\n      this.startUp = false;\n    },\n    onFullscreen: function (val) {\n      this.$emit(\"onFullscreen\", val);\n    },\n    resetApp: function () {\n      this.setState(initialDefaultState());\n    },\n    setIdToPrimaryPane: function (id) {\n      store.commit(\"splitFlow/setIdToPrimaryPane\", id);\n    },\n    setState: function (state) {\n      store.commit(\"entries/setAll\", state.entries);\n      //Support both old and new permalink.\n      if (state.splitFlow) store.commit(\"splitFlow/setState\", state.splitFlow);\n      else this.entries.forEach(entry => this.setIdToPrimaryPane(entry.id));\n    },\n    getState: function () {\n      let state = JSON.parse(JSON.stringify(store.getters[\"entries/state\"]()));\n      let splitdialog = this.$refs.splitdialog;\n      let dialogStates = splitdialog.getContentsState();\n      if (state.entries.length === dialogStates.length) {\n        for (let i = 0; i < dialogStates.length; i++) {\n          const entry = state.entries[i];\n          entry.state = dialogStates[i];\n          //We do not want to serialise the following properties\n          if (entry.type === \"Scaffold\" && \"viewUrl\" in entry)\n            delete entry.viewUrl;\n          if (entry.type === \"MultiFlatmap\" && \"uberonId\" in entry)\n            delete entry.uberonId;\n        }\n      }\n      state.splitFlow = store.getters[\"splitFlow/getState\"]();\n      return state;\n    },\n    removeEntry: function (id) {\n      let index = store.getters[\"entries/findIndexOfId\"](id);\n      store.commit(\"entries/destroyEntry\", index);\n    },\n    resourceSelected: function (result) {\n      this.$emit(\"resource-selected\", result);\n      if (store.state.splitFlow.globalCallback) {\n        this.$refs.splitdialog.sendSynchronisedEvent(result);\n      }\n    },\n    tabClicked: function (id) {\n      this.activeDockedId = id;\n    },\n    toggleSyncMode: function (payload) {\n      if (payload) {\n        if (payload.flag) {\n          if (payload.action) {\n            this.activateSyncMap(payload.action);\n          }\n        } else {\n          if (store.state.splitFlow.syncMode) {\n            store.commit(\"splitFlow/setSyncMode\", {\n              flag: false,\n            });\n          }\n        }\n      }\n    },\n    contextUpdate: function (payload) {\n      EventBus.$emit(\"contextUpdate\", payload);\n    }\n  },\n  created: function () {\n    this._facets = [];\n    this._externalStateSet = false;\n  },\n  mounted: function () {\n    EventBus.$on(\"RemoveEntryRequest\", id => {\n      this.removeEntry(id);\n    });\n    EventBus.$on(\"SyncModeRequest\", payload => {\n      this.toggleSyncMode(payload);\n    });\n    EventBus.$on(\"PopoverActionClick\", payload => {\n      this.actionClick(payload);\n    });\n    EventBus.$on(\"OpenNewMap\", type => {\n      this.openNewMap(type);\n    });\n    this.$nextTick(() => {\n      if (this.search === \"\" && this._facets.length === 0) {\n        this.$refs.sideBar.close();\n        setTimeout(() => {\n          this.startUp = false;\n        }, 2000);\n      } else this.openSearch(this._facets, this.search);\n    });\n  },\n  computed: {\n    envVars: function () {\n      return {\n        API_LOCATION: store.state.settings.sparcApi,\n        ALGOLIA_INDEX: store.state.settings.algoliaIndex,\n        ALGOLIA_KEY: store.state.settings.algoliaKey,\n        ALGOLIA_ID: store.state.settings.algoliaId,\n        PENNSIEVE_API_LOCATION: store.state.settings.pennsieveApi,\n        NL_LINK_PREFIX: store.state.settings.nlLinkPrefix,\n        ROOT_URL: store.state.settings.rootUrl,\n      };\n    },\n    entries: function() {\n      return store.state.entries.entries;\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"scss\">\n.dialog-header {\n  color: #333;\n  line-height: 20px;\n  border-bottom: solid 0.7px #dcdfe6;\n  background-color: #f5f7fa;\n}\n\n.dialog-main {\n  padding: 0px;\n  width: 100%;\n  height: 100%;\n}\n\n.start-up {\n  ::v-deep .el-drawer__open {\n    .el-drawer {\n      &.rtl {\n        animation: unset;\n      }\n    }\n  }\n  ::v-deep .el-drawer-fade-leave-active {\n    animation: unset;\n  }\n  ::v-deep .el-drawer {\n    &.rtl {\n      animation: rtl-drawer-out 2s linear;\n    }\n  }\n\n  ::v-deep .el-drawer__wrapper {\n    &.side-bar {\n      display: block !important;\n    }\n  }\n}\n</style>\n"]}]}