{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/ContextCard.vue?vue&type=script&lang=js&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/ContextCard.vue","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/thread-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/babel-loader/lib/index.js","mtime":456789000000},{"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:Ci8qIGVzbGludC1kaXNhYmxlIG5vLWFsZXJ0LCBuby1jb25zb2xlICovCmltcG9ydCBWdWUgZnJvbSAidnVlIjsKaW1wb3J0IHsgTGluaywgSWNvbiwgQ2FyZCwgQnV0dG9uLCBTZWxlY3QsIElucHV0IH0gZnJvbSAiZWxlbWVudC11aSI7CmltcG9ydCBsYW5nIGZyb20gImVsZW1lbnQtdWkvbGliL2xvY2FsZS9sYW5nL2VuIjsKaW1wb3J0IGxvY2FsZSBmcm9tICJlbGVtZW50LXVpL2xpYi9sb2NhbGUiOwppbXBvcnQgRXZlbnRCdXMgZnJvbSAiLi9FdmVudEJ1cyIKaW1wb3J0IGhhcmRjb2RlZF9pbmZvIGZyb20gJy4vaGFyZGNvZGVkLWNvbnRleHQtaW5mbycKCi8vcHJvdmlkZSB0aGUgczNCdWNrZXQgcmVsYXRlZCBtZXRob2RzIGFuZCBkYXRhLgppbXBvcnQgUzNCdWNrZXQgZnJvbSAiLi4vbWl4aW5zL1MzQnVja2V0IjsKCmltcG9ydCB7IG1hcmtlZCB9IGZyb20gJ21hcmtlZCcKaW1wb3J0IHhzcyBmcm9tICd4c3MnCgpsb2NhbGUudXNlKGxhbmcpOwpWdWUudXNlKExpbmspOwpWdWUudXNlKEljb24pOwpWdWUudXNlKENhcmQpOwpWdWUudXNlKEJ1dHRvbik7ClZ1ZS51c2UoU2VsZWN0KTsKVnVlLnVzZShJbnB1dCk7Cgpjb25zdCBhZGRGaWxlc1RvUGF0aElmTWlzc2luZyA9IGZ1bmN0aW9uKHBhdGgpewogIGlmICghcGF0aC5pbmNsdWRlcygnZmlsZXMnKSl7CiAgICByZXR1cm4gJ2ZpbGVzLycgKyBwYXRoCiAgfSBlbHNlIHsKICAgIHJldHVybiBwYXRoCiAgfQp9Cgpjb25zdCBjb252ZXJ0QmFja3NsYXNoVG9Gb3J3YXJkU2xhc2ggPSBmdW5jdGlvbihwYXRoKXsKICBwYXRoID0gcGF0aC5yZXBsYWNlQWxsKCdcXCcsJy8nKQogIHBhdGggPSBwYXRoLnJlcGxhY2VBbGwoJ1xcXFwnLCAnLycpCiAgcmV0dXJuIHBhdGgKfQoKLy8gY29uc3Qgc3dpdGNoUGF0aFRvRGlyZWN0b3J5ID0gZnVuY3Rpb24ocGF0aCl7Ci8vICAgbGV0IG5ld1BhdGggPSBwYXRoLnNwbGl0KCcvJykKLy8gICBuZXdQYXRoLnBvcCgpCi8vICAgcmV0dXJuIG5ld1BhdGguam9pbignLycpCi8vIH0KCgpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogImNvbnRleHRDYXJkIiwKICBtaXhpbnM6IFtTM0J1Y2tldF0sCiAgcHJvcHM6IHsKICAgIC8qKgogICAgICogT2JqZWN0IGNvbnRhaW5pbmcgaW5mb3JtYXRpb24gZm9yCiAgICAgKiB0aGUgcmVxdWlyZWQgdmlld2luZy4KICAgICAqLwogICAgZW50cnk6IE9iamVjdCwKICAgIGVudlZhcnM6IE9iamVjdCwKICB9LAogIGRhdGE6IGZ1bmN0aW9uICgpIHsKICAgIHJldHVybiB7CiAgICAgIGNvbnRleHREYXRhOiB7fSwKICAgICAgc2hvd0RldGFpbHM6IHRydWUsCiAgICAgIHNob3dDb250ZXh0Q2FyZDogdHJ1ZSwKICAgICAgc2FtcGxlRGV0YWlsczoge30sCiAgICAgIGxvYWRpbmc6IGZhbHNlCiAgICB9OwogIH0sCiAgd2F0Y2g6IHsKICAgICdlbnRyeS5jb250ZXh0Q2FyZFVybCc6IHsKICAgICAgaGFuZGxlcih2YWwpewogICAgICAgIGlmICh2YWwpIHsKICAgICAgICAgIC8vIHVzZWQgZm9yIGhhcmRjb2RpbmcgZGF0YQogICAgICAgICAgaWYgKHZhbCA9PT0gdHJ1ZSl7CiAgICAgICAgICAgIHRoaXMuY29udGV4dERhdGEgPSBoYXJkY29kZWRfaW5mb1t0aGlzLmVudHJ5LmRpc2NvdmVySWRdCiAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICB0aGlzLmdldENvbnRleHRGaWxlKHZhbCkKICAgICAgICAgICAgdGhpcy5zaG93Q29udGV4dENhcmQgPSB0cnVlCiAgICAgICAgICB9CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHRoaXMuc2hvd0NvbnRleHRDYXJkID0gZmFsc2UKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGltbWVkaWF0ZTogdHJ1ZQogICAgfSwKICAgICdlbnRyeS5zM3VyaSc6IHsKICAgICAgaGFuZGxlcih2YWwpewogICAgICAgIHRoaXMudXBkYXRlUzNCdWNrZXQodmFsKTsKICAgICAgfSwKICAgICAgaW1tZWRpYXRlOiB0cnVlCiAgICB9CiAgfSwKICBjb21wdXRlZDogewogICAgc2FtcGxlc1VuZGVyVmlld3M6IGZ1bmN0aW9uKCl7CiAgICAgIGlmICh0aGlzLmNvbnRleHREYXRhKXsKICAgICAgICBpZiAodGhpcy5jb250ZXh0RGF0YS5zYW1wbGVzVW5kZXJWaWV3cyl7CiAgICAgICAgICByZXR1cm4gdHJ1ZQogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBsZXQgdmlld0lkID0gdGhpcy5jb250ZXh0RGF0YS52aWV3cy5tYXAodj0+di5pZCkKICAgICAgICAgIGxldCBzYW1wbGVzVmlldyA9IHRoaXMuY29udGV4dERhdGEuc2FtcGxlcy5tYXAocz0+cy52aWV3KQoKICAgICAgICAgIC8vIGdldCBtYXRjaGluZyB2YWx1ZXMKICAgICAgICAgIGxldCBtYXRjaGluZyA9IHZpZXdJZC5maWx0ZXIodj0+c2FtcGxlc1ZpZXcuaW5jbHVkZXModikpCgogICAgICAgICAgLy8gY2hlY2sgYWxsIGFycmF5cyBoYXZlIHRoZSBzYW1lIGxlbmd0aCAod2hpY2ggbWVhbnMgYWxsIHZhbHVlcyBhcmUgaW4gYWxsIHRocmVlKQogICAgICAgICAgaWYgKCB2aWV3SWQubGVuZ3RoID09PSBtYXRjaGluZy5sZW5ndGggJiYgbWF0Y2hpbmcubGVuZ3RoID09PSBzYW1wbGVzVmlldy5sZW5ndGgpewogICAgICAgICAgICByZXR1cm4gdHJ1ZQogICAgICAgICAgfQogICAgICAgICAgcmV0dXJuIGZhbHNlCiAgICAgICAgfQogICAgICB9CiAgICAgIGVsc2UgcmV0dXJuIGZhbHNlCiAgICB9LAogICAgYmFubmVyOiBmdW5jdGlvbigpewogICAgICBpZiAodGhpcy5jb250ZXh0RGF0YS5iYW5uZXIpewogICAgICAgIHJldHVybiB0aGlzLmdldEZpbGVGcm9tUGF0aCh0aGlzLmNvbnRleHREYXRhLmJhbm5lcikgCiAgICAgIH0gZWxzZSBpZiAodGhpcy5jb250ZXh0RGF0YSAmJiB0aGlzLmNvbnRleHREYXRhLnZpZXdzICYmIHRoaXMuY29udGV4dERhdGEudmlld3MubGVuZ3RoID4gMCkgewogICAgICAgIGlmKHRoaXMuY29udGV4dERhdGEudmlld3NbMF0udGh1bWJuYWlsKXsKICAgICAgICAgIHJldHVybiB0aGlzLmdldEZpbGVGcm9tUGF0aCh0aGlzLmNvbnRleHREYXRhLnZpZXdzWzBdLnRodW1ibmFpbCkKICAgICAgICB9CiAgICAgIH0gCiAgICAgIHJldHVybiB0aGlzLmVudHJ5LmJhbm5lcgogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgc2FtcGxlc01hdGNoaW5nOiBmdW5jdGlvbih2aWV3SWQpewogICAgICBpZiAodGhpcy5jb250ZXh0RGF0YSAmJiB0aGlzLmNvbnRleHREYXRhLnNhbXBsZXMpewogICAgICAgIHJldHVybiB0aGlzLmNvbnRleHREYXRhLnNhbXBsZXMuZmlsdGVyKHM9PnMudmlldyA9PSB2aWV3SWQpWzBdCiAgICAgIH0KICAgICAgZWxzZSByZXR1cm4gW10KICAgIH0sCiAgICB2aWV3Q2xpY2tlZDogZnVuY3Rpb24odmlldywgaSl7CiAgICAgIHRoaXMub3BlblZpZXdGaWxlKHZpZXcpIAogICAgICB0aGlzLnRvZ2dsZVNhbXBsZURldGFpbHMoaSkKICAgIH0sCiAgICBnZXRDb250ZXh0RmlsZTogZnVuY3Rpb24gKGNvbnRleHRGaWxlVXJsKSB7CiAgICAgIHRoaXMubG9hZGluZyA9IHRydWUKICAgICAgZmV0Y2goY29udGV4dEZpbGVVcmwpCiAgICAgICAgLnRoZW4oKHJlc3BvbnNlKSA9PnsKICAgICAgICAgIGlmICghcmVzcG9uc2Uub2spewogICAgICAgICAgICB0aHJvdyBFcnJvcihyZXNwb25zZS5zdGF0dXNUZXh0KQogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgIHJldHVybiByZXNwb25zZS5qc29uKCkKICAgICAgICAgIH0KICAgICAgICB9KQogICAgICAgIC50aGVuKChkYXRhKSA9PiB7CiAgICAgICAgICB0aGlzLmNvbnRleHREYXRhID0gZGF0YQogICAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2UKICAgICAgICAgIHRoaXMuYWRkRGlzY292ZXJJZHNUb0NvbnRleHREYXRhKCkgCiAgICAgICAgfSkKICAgICAgICAuY2F0Y2goKGVycikgPT4gewogICAgICAgICAgLy9zZXQgZGVmYXVsdHMgaWYgd2UgaGl0IGFuIGVycm9yCiAgICAgICAgICBjb25zb2xlLmVycm9yKCdjYXVnaHQgZXJyb3IhJywgZXJyKQogICAgICAgICAgdGhpcy50aHVtYm5haWwgPSByZXF1aXJlKCdALy4uL2Fzc2V0cy9taXNzaW5nLWltYWdlLnN2ZycpCiAgICAgICAgICB0aGlzLmRpc2NvdmVySWQgPSB1bmRlZmluZWQKICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlCiAgICAgICAgfSk7CiAgICB9LAogICAgcmVtb3ZlRG91YmxlRmlsZXNQYXRoOiBmdW5jdGlvbihwYXRoKXsKICAgICAgaWYgKHBhdGguaW5jbHVkZXMoJ2ZpbGVzLycpKXsKICAgICAgICByZXR1cm4gcGF0aC5yZXBsYWNlKCdmaWxlcy8nLCAnJykKICAgICAgfSBlbHNlIGlmIChwYXRoLmluY2x1ZGVzKCdmaWxlc1xcJykpIHsKICAgICAgICByZXR1cm4gcGF0aC5yZXBsYWNlKCdmaWxlc1xcJywgJycpCiAgICAgIH0gZWxzZSB7CiAgICAgICAgcmV0dXJuIHBhdGgKICAgICAgfQogICAgfSwKICAgIHRvZ2dsZVNhbXBsZURldGFpbHM6IGZ1bmN0aW9uKGkpewogICAgICBpZiAodGhpcy5zYW1wbGVEZXRhaWxzW2ldID09PSB1bmRlZmluZWQpewogICAgICAgIFZ1ZS5zZXQodGhpcy5zYW1wbGVEZXRhaWxzLCBpLCB0cnVlKQogICAgICB9IGVsc2UgewogICAgICAgIFZ1ZS5zZXQodGhpcy5zYW1wbGVEZXRhaWxzLCBpLCAhdGhpcy5zYW1wbGVEZXRhaWxzW2ldKQogICAgICB9CiAgICB9LAogICAgZ2V0RmlsZUZyb21QYXRoOiBmdW5jdGlvbihwYXRoKXsKICAgICAgLy8gZm9yIGhhcmRjb2RlZCBkYXRhCiAgICAgIGlmKHRoaXMuZW50cnkuY29udGV4dENhcmRVcmwgPT09IHRydWUpewogICAgICAgIHJldHVybiBwYXRoCiAgICAgIH0KICAgICAgcGF0aCA9IHRoaXMucmVtb3ZlRG91YmxlRmlsZXNQYXRoKHBhdGgpCiAgICAgIHJldHVybiAgYCR7dGhpcy5lbnZWYXJzLkFQSV9MT0NBVElPTn1zMy1yZXNvdXJjZS8ke3RoaXMuZW50cnkuZGlzY292ZXJJZH0vJHt0aGlzLmVudHJ5LnZlcnNpb259L2ZpbGVzLyR7cGF0aH0ke3RoaXMuZ2V0UzNBcmdzKCl9YAogICAgfSwKICAgIC8vICBUaGlzIGlzIHVzZWQgbGF0ZXIgd2hlbiBnZW5lcmF0ZWluZyBsaW5rcyB0byB0aGUgcmVzb3VyY2Ugb24gc3BhcmMuc2NpZW5jZSAoc2VlIGdlbmVyYXRlRmlsZUxpbmspCiAgICBhZGREaXNjb3Zlcklkc1RvQ29udGV4dERhdGEoKXsKICAgICAgdGhpcy5jb250ZXh0RGF0YS5zYW1wbGVzLmZvckVhY2goKHNhbXBsZSwgaSk9PnsKICAgICAgICBpZiAoc2FtcGxlICYmIHNhbXBsZS5kb2kgJiYgc2FtcGxlLmRvaSAhPT0gIiIpewogICAgICAgICAgZmV0Y2goYCR7dGhpcy5lbnZWYXJzLlBFTk5TSUVWRV9BUElfTE9DQVRJT059L2Rpc2NvdmVyL2RhdGFzZXRzL2RvaS8ke3RoaXMuc3BsaXREb2lGcm9tVXJsKHNhbXBsZS5kb2kpfWApCiAgICAgICAgICAudGhlbigocmVzcG9uc2UpID0+IHJlc3BvbnNlLmpzb24oKSkKICAgICAgICAgIC50aGVuKChkYXRhKSA9PiB7CiAgICAgICAgICAgIHRoaXMuY29udGV4dERhdGEuc2FtcGxlc1tpXS5kaXNjb3ZlcklkID0gZGF0YS5pZAogICAgICAgICAgICB0aGlzLmNvbnRleHREYXRhLnNhbXBsZXNbaV0udmVyc2lvbiA9IGRhdGEudmVyc2lvbgogICAgICAgICAgfSkKICAgICAgICB9IGVsc2UgewogICAgICAgICAgICB0aGlzLmNvbnRleHREYXRhLnNhbXBsZXNbaV0uZGlzY292ZXJJZCA9IHRoaXMuZW50cnkuZGlzY292ZXJJZAogICAgICAgICAgICB0aGlzLmNvbnRleHREYXRhLnNhbXBsZXNbaV0udmVyc2lvbiA9IHRoaXMuZW50cnkudmVyc2lvbgogICAgICAgIH0KICAgICAgfSkKICAgIH0sCiAgICBwcm9jZXNzUGF0aEZvclVybChwYXRoKXsKICAgICAgcGF0aCA9IGNvbnZlcnRCYWNrc2xhc2hUb0ZvcndhcmRTbGFzaChwYXRoKQogICAgICBwYXRoID0gYWRkRmlsZXNUb1BhdGhJZk1pc3NpbmcocGF0aCkKICAgICAgcmV0dXJuIGVuY29kZVVSSShwYXRoKQogICAgfSwKICAgIHNwbGl0RG9pRnJvbVVybCh1cmwpewogICAgICByZXR1cm4gdXJsLnNwbGl0KCdodHRwczovL2RvaS5vcmcvJykucG9wKCkKICAgIH0sCiAgICBnZW5lcmF0ZUZpbGVMaW5rKHNhbXBsZSl7CiAgICAgIHJldHVybiBgJHt0aGlzLmVudlZhcnMuUk9PVF9VUkx9L2ZpbGUvJHtzYW1wbGUuZGlzY292ZXJJZH0vJHtzYW1wbGUudmVyc2lvbn0/cGF0aD0ke3RoaXMucHJvY2Vzc1BhdGhGb3JVcmwoc2FtcGxlLnBhdGgpfWAKCiAgICB9LAogICAgcGFyc2VNYXJrZG93bihtYXJrZG93bil7CiAgICAgIHJldHVybiB4c3MobWFya2VkLnBhcnNlKG1hcmtkb3duKSkKICAgIH0sCiAgICBvcGVuVmlld0ZpbGU6IGZ1bmN0aW9uKHZpZXcpewogICAgICAvLyBub3RlIHRoYXQgd2UgYXNzdW1lIHRoYXQgdGhlIHZpZXcgZmlsZSBpcyBpbiB0aGUgc2FtZSBkaXJlY3RvcnkgYXMgdGhlIHNjYWZmb2xkICh2aWV3VXJscyB0YWtlIHJlbGF0aXZlIHBhdGhzKQogICAgICB0aGlzLmVudHJ5LnZpZXdVcmwgPSBgJHt0aGlzLmVudlZhcnMuQVBJX0xPQ0FUSU9OfXMzLXJlc291cmNlLyR7dGhpcy5lbnRyeS5kaXNjb3ZlcklkfS8ke3RoaXMuZW50cnkudmVyc2lvbn0vJHt2aWV3LnBhdGh9JHt0aGlzLmdldFMzQXJncygpfWAKICAgICAgdGhpcy5lbnRyeS50eXBlID0gJ1NjYWZmb2xkIFZpZXcnCiAgICAgIEV2ZW50QnVzLiRlbWl0KCJQb3BvdmVyQWN0aW9uQ2xpY2siLCB0aGlzLmVudHJ5KQogICAgfQogIH0KfTsK"},{"version":3,"sources":["ContextCard.vue"],"names":[],"mappings":";AAiEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ContextCard.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\n  <div class=\"context-card-container\"  ref=\"container\">\n    <div v-show=\"showContextCard\">\n      <div v-show=\"showDetails\" class=\"hide\" @click=\"showDetails = !showDetails\">Hide information<i class=\"el-icon-arrow-up\"></i></div>\n      <div v-show=\"!showDetails\" class=\"hide\" @click=\"showDetails = !showDetails\">Show information<i class=\"el-icon-arrow-down\"></i></div>\n      <el-card v-if=\"showDetails && Object.keys(contextData).length !== 0\" v-loading=\"loading\" class=\"context-card\" >\n        <div class=\"card-left\">\n          <img :src=\"banner\" class=\"context-image\">\n        </div>\n        <div class=\"card-right scrollbar\">\n          <div class=\"title\">{{contextData.heading}}</div>\n          <div v-html=\"parseMarkdown(contextData.description)\"/>\n          <br/>\n\n          <!-- Show sampeles and views seperately if they do not match -->\n          <template v-if=\"!samplesUnderViews\">\n            <div v-if=\"contextData.views && contextData.views.length > 0\" class=\"subtitle\">Scaffold Views</div>\n            <template v-for=\"(view, i) in contextData.views\">\n              <div v-bind:key=\"i+'_1'\" @click=\"openViewFile(view)\" class=\"context-card-view\">\n                <img class=\"view-image\" :src=\"getFileFromPath(view.thumbnail)\"> \n                <div class=\"view-description\">{{view.description}}</div>\n              </div>\n              <div v-bind:key=\"i\" class=\"padding\"/>\n            </template>\n            <div style=\"margin-bottom: 16px;\"/>\n            <div v-if=\"contextData.samples && contextData.samples.length > 0\" class=\"subtitle\">Samples on Scaffold</div>\n            <template v-for=\"(sample, i) in contextData.samples\">\n                <span v-bind:key=\"i+'_3'\" class=\"context-card-item cursor-pointer\" @click=\"toggleSampleDetails(i)\">\n                  <div v-bind:key=\"i+'_6'\" style=\"display: flex\">\n                    <div v-if=\"sample.color\" class=\"color-box\" :style=\"'background-color:'+ sample.color\"></div>\n                    <img class=\"key-image\" v-else-if=\"sample.thumbnail\" :src=\"getFileFromPath(sample.thumbnail)\">\n                    {{sample.heading}}\n                    <i class=\"el-icon-warning-outline info\"></i>\n                  </div>\n                </span>\n                <div v-bind:key=\"i+'_4'\" v-if=\"sampleDetails[i]\" v-html=\"sample.description\"/>\n                <a v-bind:key=\"i+'_5'\" v-if=\"sampleDetails[i] && sample.path\" :href=\"generateFileLink(sample)\" target=\"_blank\">View Source</a>\n                <div v-bind:key=\"i+'_2'\" class=\"padding\"/>\n            </template>\n          </template>\n\n          <!-- Show samples under views if the ids match -->\n          <template v-else>\n            <div v-if=\"contextData.views && contextData.views.length > 0\" class=\"subtitle\">Scaffold Views</div>\n            <template v-for=\"(view, i) in contextData.views\">\n              <span :key=\"i+'_1'\" @click=\"viewClicked(view, i)\" class=\"context-card-view\">\n                <img class=\"view-image\" :src=\"getFileFromPath(view.thumbnail)\"/> \n                <div class=\"view-description\">{{view.description}}<i class=\"el-icon-warning-outline info\"></i> </div>\n              </span>\n              <div v-if=\"sampleDetails[i]\" v-html=\"samplesMatching(view.id).description\" :key=\"i+'_2'\"/>\n              <a v-bind:key=\"i+'_5'\" v-if=\"sampleDetails[i] && samplesMatching(view.id).path\" :href=\"generateFileLink(samplesMatching(view.id))\" target=\"_blank\">View Source</a>\n              <div :key=\"i\" class=\"padding\"/>\n\n              <!-- Extra padding if sample details is open -->\n              <div :key=\"i+'_6'\" v-if=\"sampleDetails[i]\" class=\"padding\"/>\n            </template>\n          </template>\n        </div>\n      </el-card>\n    </div>\n  </div>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport { Link, Icon, Card, Button, Select, Input } from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\nimport EventBus from \"./EventBus\"\nimport hardcoded_info from './hardcoded-context-info'\n\n//provide the s3Bucket related methods and data.\nimport S3Bucket from \"../mixins/S3Bucket\";\n\nimport { marked } from 'marked'\nimport xss from 'xss'\n\nlocale.use(lang);\nVue.use(Link);\nVue.use(Icon);\nVue.use(Card);\nVue.use(Button);\nVue.use(Select);\nVue.use(Input);\n\nconst addFilesToPathIfMissing = function(path){\n  if (!path.includes('files')){\n    return 'files/' + path\n  } else {\n    return path\n  }\n}\n\nconst convertBackslashToForwardSlash = function(path){\n  path = path.replaceAll('\\\\','/')\n  path = path.replaceAll('\\\\\\\\', '/')\n  return path\n}\n\n// const switchPathToDirectory = function(path){\n//   let newPath = path.split('/')\n//   newPath.pop()\n//   return newPath.join('/')\n// }\n\n\nexport default {\n  name: \"contextCard\",\n  mixins: [S3Bucket],\n  props: {\n    /**\n     * Object containing information for\n     * the required viewing.\n     */\n    entry: Object,\n    envVars: Object,\n  },\n  data: function () {\n    return {\n      contextData: {},\n      showDetails: true,\n      showContextCard: true,\n      sampleDetails: {},\n      loading: false\n    };\n  },\n  watch: {\n    'entry.contextCardUrl': {\n      handler(val){\n        if (val) {\n          // used for hardcoding data\n          if (val === true){\n            this.contextData = hardcoded_info[this.entry.discoverId]\n          } else {\n            this.getContextFile(val)\n            this.showContextCard = true\n          }\n        } else {\n          this.showContextCard = false\n        }\n      },\n      immediate: true\n    },\n    'entry.s3uri': {\n      handler(val){\n        this.updateS3Bucket(val);\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    samplesUnderViews: function(){\n      if (this.contextData){\n        if (this.contextData.samplesUnderViews){\n          return true\n        } else {\n          let viewId = this.contextData.views.map(v=>v.id)\n          let samplesView = this.contextData.samples.map(s=>s.view)\n\n          // get matching values\n          let matching = viewId.filter(v=>samplesView.includes(v))\n\n          // check all arrays have the same length (which means all values are in all three)\n          if ( viewId.length === matching.length && matching.length === samplesView.length){\n            return true\n          }\n          return false\n        }\n      }\n      else return false\n    },\n    banner: function(){\n      if (this.contextData.banner){\n        return this.getFileFromPath(this.contextData.banner) \n      } else if (this.contextData && this.contextData.views && this.contextData.views.length > 0) {\n        if(this.contextData.views[0].thumbnail){\n          return this.getFileFromPath(this.contextData.views[0].thumbnail)\n        }\n      } \n      return this.entry.banner\n    }\n  },\n  methods: {\n    samplesMatching: function(viewId){\n      if (this.contextData && this.contextData.samples){\n        return this.contextData.samples.filter(s=>s.view == viewId)[0]\n      }\n      else return []\n    },\n    viewClicked: function(view, i){\n      this.openViewFile(view) \n      this.toggleSampleDetails(i)\n    },\n    getContextFile: function (contextFileUrl) {\n      this.loading = true\n      fetch(contextFileUrl)\n        .then((response) =>{\n          if (!response.ok){\n            throw Error(response.statusText)\n          } else {\n             return response.json()\n          }\n        })\n        .then((data) => {\n          this.contextData = data\n          this.loading = false\n          this.addDiscoverIdsToContextData() \n        })\n        .catch((err) => {\n          //set defaults if we hit an error\n          console.error('caught error!', err)\n          this.thumbnail = require('@/../assets/missing-image.svg')\n          this.discoverId = undefined\n          this.loading = false\n        });\n    },\n    removeDoubleFilesPath: function(path){\n      if (path.includes('files/')){\n        return path.replace('files/', '')\n      } else if (path.includes('files\\\\')) {\n        return path.replace('files\\\\', '')\n      } else {\n        return path\n      }\n    },\n    toggleSampleDetails: function(i){\n      if (this.sampleDetails[i] === undefined){\n        Vue.set(this.sampleDetails, i, true)\n      } else {\n        Vue.set(this.sampleDetails, i, !this.sampleDetails[i])\n      }\n    },\n    getFileFromPath: function(path){\n      // for hardcoded data\n      if(this.entry.contextCardUrl === true){\n        return path\n      }\n      path = this.removeDoubleFilesPath(path)\n      return  `${this.envVars.API_LOCATION}s3-resource/${this.entry.discoverId}/${this.entry.version}/files/${path}${this.getS3Args()}`\n    },\n    //  This is used later when generateing links to the resource on sparc.science (see generateFileLink)\n    addDiscoverIdsToContextData(){\n      this.contextData.samples.forEach((sample, i)=>{\n        if (sample && sample.doi && sample.doi !== \"\"){\n          fetch(`${this.envVars.PENNSIEVE_API_LOCATION}/discover/datasets/doi/${this.splitDoiFromUrl(sample.doi)}`)\n          .then((response) => response.json())\n          .then((data) => {\n            this.contextData.samples[i].discoverId = data.id\n            this.contextData.samples[i].version = data.version\n          })\n        } else {\n            this.contextData.samples[i].discoverId = this.entry.discoverId\n            this.contextData.samples[i].version = this.entry.version\n        }\n      })\n    },\n    processPathForUrl(path){\n      path = convertBackslashToForwardSlash(path)\n      path = addFilesToPathIfMissing(path)\n      return encodeURI(path)\n    },\n    splitDoiFromUrl(url){\n      return url.split('https://doi.org/').pop()\n    },\n    generateFileLink(sample){\n      return `${this.envVars.ROOT_URL}/file/${sample.discoverId}/${sample.version}?path=${this.processPathForUrl(sample.path)}`\n\n    },\n    parseMarkdown(markdown){\n      return xss(marked.parse(markdown))\n    },\n    openViewFile: function(view){\n      // note that we assume that the view file is in the same directory as the scaffold (viewUrls take relative paths)\n      this.entry.viewUrl = `${this.envVars.API_LOCATION}s3-resource/${this.entry.discoverId}/${this.entry.version}/${view.path}${this.getS3Args()}`\n      this.entry.type = 'Scaffold View'\n      EventBus.$emit(\"PopoverActionClick\", this.entry)\n    }\n  }\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/button\";\n@import \"~element-ui/packages/theme-chalk/src/card\";\n@import \"~element-ui/packages/theme-chalk/src/icon\";\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/link\";\n@import \"~element-ui/packages/theme-chalk/src/select\";\n\n.hide{\n  color: #e4e7ed;\n  cursor: pointer;\n}\n\n.context-card{\n  background-color: white;\n  max-height: 10  50px;\n  padding: 8px;\n  font-size: 14px;\n  margin-bottom: 18px;\n  position: relative;\n  border: solid 1px #e4e7ed;\n  display: flex;\n  width: 500px;\n  max-height: 258px;\n}\n\n.context-card-view{\n  cursor: pointer;\n  padding-bottom: 8px;\n  display: flex;\n}\n\n.view-image {\n  width: 34px;\n  height: 34px;\n  flex: 1;\n  margin-right: 4px;\n}\n\n.view-descriptions {\n  flex: 8;\n}\n\n.context-card ::v-deep .el-card__body {\n  padding: 0px;\n  display: flex;\n  width: 516px;\n}\n\n.context-image{\n  width: 250px;\n  height: auto;\n}\n\n.color-box {\n  width: 16px;\n  height: 16px;\n  border: solid 1px $app-primary-color;\n  border-radius: 2px;\n  margin-right: 8px;\n}\n\n.card-left{\n  flex: 1\n}\n\n.card-right {\n  flex: 1.3;\n  padding-left: 6px;\n  overflow-y: scroll;\n  scrollbar-width: thin;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.info{\n  transform: rotate(180deg);\n  color: $app-primary-color;\n  margin-left: 8px;\n}\n\n.padding {\n  padding-bottom: 8px;\n}\n\n.title{\n  font-weight: bold;\n}\n\n.subtitle{\n  font-weight: bold;\n}\n\n.scrollbar::-webkit-scrollbar-track {\n  border-radius: 10px;\n  background-color: #f5f5f5;\n}\n\n.scrollbar::-webkit-scrollbar {\n  width: 12px;\n  right: -12px;\n  background-color: #f5f5f5;\n}\n\n.scrollbar::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n  background-color: #979797;\n}\n\n</style>\n"]}]}