@abi-software/map-side-bar 1.3.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,141 +1,141 @@
1
- <template>
2
- <div v-if="categories['All'].size > 1" class="container" ref="container">
3
- <div>
4
- View data types:
5
- </div>
6
- <template v-for="(item, key) in categories" >
7
- <el-button
8
- v-if="item.size > 0"
9
- :class="[{ 'active': key == active},'tag-button']"
10
- @click="categoryClicked(key)"
11
- size="small" :key="key">{{ key + " (" + item.size + ")" }}
12
- </el-button>
13
- </template>
14
- </div>
15
- </template>
16
-
17
-
18
- <script>
19
- /* eslint-disable no-alert, no-console */
20
- import Vue from "vue";
21
- import { Button } from "element-ui";
22
- import lang from "element-ui/lib/locale/lang/en";
23
- import locale from "element-ui/lib/locale";
24
-
25
- locale.use(lang);
26
- Vue.use(Button);
27
-
28
- export default {
29
- name: "BadgesGroup",
30
- props: {
31
- /**
32
- * Object containing information for
33
- * the required viewing.
34
- */
35
- additionalLinks: {
36
- type: Array,
37
- default: () => {
38
- return [];
39
- },
40
- },
41
- datasetBiolucida: {
42
- type: Object,
43
- default: () => {
44
- return {};
45
- },
46
- },
47
- entry: {
48
- type: Object,
49
- default: () => {
50
- return {};
51
- },
52
- },
53
- },
54
- data: function () {
55
- return {
56
- categories: { "All": {size: 1} },
57
- active: "All"
58
- };
59
- },
60
- methods: {
61
- addToCategories: function (array, name) {
62
- if (array && array.length > 0) {
63
- this.categories[name] = { size: array.length };
64
- this.categories["All"].size += array.length;
65
- }
66
- },
67
- addSimulationsToCategories: function (array) {
68
- if (array && array.length > 0) {
69
- const size = 1;
70
- this.categories["Simulations"] = { size };
71
- this.categories["All"].size += size;
72
- }
73
- },
74
- categoryClicked: function(name) {
75
- this.active = name;
76
- this.$emit("categoryChanged", name);
77
- }
78
- },
79
- watch: {
80
- datasetBiolucida: {
81
- deep: true,
82
- immediate: true,
83
- handler: function (biolucidaData) {
84
- if ("dataset_images" in biolucidaData) {
85
- this.addToCategories(biolucidaData["dataset_images"], "Biolucida Images");
86
- }
87
- }
88
- },
89
- entry: {
90
- deep: true,
91
- immediate: true,
92
- handler: function () {
93
- this.addToCategories(this.entry.scaffolds, 'Scaffolds');
94
- this.addToCategories(this.entry.segmentation, 'Segmentations');
95
- this.addToCategories(this.entry.plots, 'Plots');
96
- this.addSimulationsToCategories(this.entry.simulation);
97
- /** disable the following
98
- this.addToCategories(this.entry.images, 'Images');
99
- this.addToCategories(this.entry.videos, 'Videos');
100
- **/
101
- }
102
- }
103
- },
104
- };
105
- </script>
106
-
107
- <!-- Add "scoped" attribute to limit CSS to this component only -->
108
- <style scoped>
109
- .tag-button,
110
- .tag-button:hover,
111
- .tag-button:focus,
112
- .tag-button.active
113
- {
114
- border-radius: 4px;
115
- font-size: 0.75rem;
116
- padding: 0.2rem 0.2rem;
117
- margin: 0.5rem 0 0 0;
118
- margin-right: 0.75rem!important;
119
- }
120
-
121
- .tag-button,
122
- .tag-button:hover,
123
- .tag-button:focus
124
- {
125
- background: #f9f2fc;
126
- border: 1px solid #8300BF;
127
- color: #8300BF;
128
- }
129
-
130
- .tag-button.active
131
- {
132
- background: #8300BF;
133
- border: 1px solid #8300BF;
134
- color: #fff;
135
- }
136
-
137
- .tag-button+.tag-button
138
- {
139
- margin-left:0;
140
- }
141
- </style>
1
+ <template>
2
+ <div v-if="categories['All'].size > 1" class="container" ref="container">
3
+ <div>
4
+ View data types:
5
+ </div>
6
+ <template v-for="(item, key) in categories" >
7
+ <el-button
8
+ v-if="item.size > 0"
9
+ :class="[{ 'active': key == active},'tag-button']"
10
+ @click="categoryClicked(key)"
11
+ size="small" :key="key">{{ key + " (" + item.size + ")" }}
12
+ </el-button>
13
+ </template>
14
+ </div>
15
+ </template>
16
+
17
+
18
+ <script>
19
+ /* eslint-disable no-alert, no-console */
20
+ import Vue from "vue";
21
+ import { Button } from "element-ui";
22
+ import lang from "element-ui/lib/locale/lang/en";
23
+ import locale from "element-ui/lib/locale";
24
+
25
+ locale.use(lang);
26
+ Vue.use(Button);
27
+
28
+ export default {
29
+ name: "BadgesGroup",
30
+ props: {
31
+ /**
32
+ * Object containing information for
33
+ * the required viewing.
34
+ */
35
+ additionalLinks: {
36
+ type: Array,
37
+ default: () => {
38
+ return [];
39
+ },
40
+ },
41
+ datasetBiolucida: {
42
+ type: Object,
43
+ default: () => {
44
+ return {};
45
+ },
46
+ },
47
+ entry: {
48
+ type: Object,
49
+ default: () => {
50
+ return {};
51
+ },
52
+ },
53
+ },
54
+ data: function () {
55
+ return {
56
+ categories: { "All": {size: 1} },
57
+ active: "All"
58
+ };
59
+ },
60
+ methods: {
61
+ addToCategories: function (array, name) {
62
+ if (array && array.length > 0) {
63
+ this.categories[name] = { size: array.length };
64
+ this.categories["All"].size += array.length;
65
+ }
66
+ },
67
+ addSimulationsToCategories: function (array) {
68
+ if (array && array.length > 0) {
69
+ const size = 1;
70
+ this.categories["Simulations"] = { size };
71
+ this.categories["All"].size += size;
72
+ }
73
+ },
74
+ categoryClicked: function(name) {
75
+ this.active = name;
76
+ this.$emit("categoryChanged", name);
77
+ }
78
+ },
79
+ watch: {
80
+ datasetBiolucida: {
81
+ deep: true,
82
+ immediate: true,
83
+ handler: function (biolucidaData) {
84
+ if ("dataset_images" in biolucidaData) {
85
+ this.addToCategories(biolucidaData["dataset_images"], "Biolucida Images");
86
+ }
87
+ }
88
+ },
89
+ entry: {
90
+ deep: true,
91
+ immediate: true,
92
+ handler: function () {
93
+ this.addToCategories(this.entry.scaffolds, 'Scaffolds');
94
+ this.addToCategories(this.entry.segmentation, 'Segmentations');
95
+ this.addToCategories(this.entry.plots, 'Plots');
96
+ this.addSimulationsToCategories(this.entry.simulation);
97
+ /** disable the following
98
+ this.addToCategories(this.entry.images, 'Images');
99
+ this.addToCategories(this.entry.videos, 'Videos');
100
+ **/
101
+ }
102
+ }
103
+ },
104
+ };
105
+ </script>
106
+
107
+ <!-- Add "scoped" attribute to limit CSS to this component only -->
108
+ <style scoped>
109
+ .tag-button,
110
+ .tag-button:hover,
111
+ .tag-button:focus,
112
+ .tag-button.active
113
+ {
114
+ border-radius: 4px;
115
+ font-size: 0.75rem;
116
+ padding: 0.2rem 0.2rem;
117
+ margin: 0.5rem 0 0 0;
118
+ margin-right: 0.75rem!important;
119
+ }
120
+
121
+ .tag-button,
122
+ .tag-button:hover,
123
+ .tag-button:focus
124
+ {
125
+ background: #f9f2fc;
126
+ border: 1px solid #8300BF;
127
+ color: #8300BF;
128
+ }
129
+
130
+ .tag-button.active
131
+ {
132
+ background: #8300BF;
133
+ border: 1px solid #8300BF;
134
+ color: #fff;
135
+ }
136
+
137
+ .tag-button+.tag-button
138
+ {
139
+ margin-left:0;
140
+ }
141
+ </style>
@@ -1,49 +1,49 @@
1
- <script>
2
- /* eslint-disable no-alert, no-console */
3
- import { Cascader } from "element-ui";
4
-
5
- export default {
6
- name: 'CustomCascader',
7
- extends: Cascader,
8
- methods:{
9
- //Modify this internal function to disable Show all tags
10
- computePresentTags() {
11
- const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
12
- const checkedNodes = this.getCheckedNodes(leafOnly);
13
- const tags = [];
14
- const genTag = node => ({
15
- node,
16
- key: node.uid,
17
- text: node.getText(showAllLevels, separator),
18
- hitState: false,
19
- closable: !isDisabled && !node.isDisabled
20
- });
21
- let customNodes = checkedNodes.filter(node =>
22
- {
23
- return !(node.getText(showAllLevels, separator).includes("Show all"));
24
- }
25
- );
26
- if (customNodes.length) {
27
- const [first, ...rest] = customNodes;
28
- const restCount = rest.length;
29
- tags.push(genTag(first));
30
- if (restCount) {
31
- if (collapseTags) {
32
- tags.push({
33
- key: -1,
34
- text: `+ ${restCount}`,
35
- closable: false
36
- });
37
- } else {
38
- rest.forEach(node => tags.push(genTag(node)));
39
- }
40
- }
41
- }
42
- this.checkedNodes = checkedNodes;
43
- this.presentTags = tags;
44
- this.$emit("tags-changed", this.presentTags);
45
- }
46
- }
47
- }
48
-
49
- </script>
1
+ <script>
2
+ /* eslint-disable no-alert, no-console */
3
+ import { Cascader } from "element-ui";
4
+
5
+ export default {
6
+ name: 'CustomCascader',
7
+ extends: Cascader,
8
+ methods:{
9
+ //Modify this internal function to disable Show all tags
10
+ computePresentTags() {
11
+ const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
12
+ const checkedNodes = this.getCheckedNodes(leafOnly);
13
+ const tags = [];
14
+ const genTag = node => ({
15
+ node,
16
+ key: node.uid,
17
+ text: node.getText(showAllLevels, separator),
18
+ hitState: false,
19
+ closable: !isDisabled && !node.isDisabled
20
+ });
21
+ let customNodes = checkedNodes.filter(node =>
22
+ {
23
+ return !(node.getText(showAllLevels, separator).includes("Show all"));
24
+ }
25
+ );
26
+ if (customNodes.length) {
27
+ const [first, ...rest] = customNodes;
28
+ const restCount = rest.length;
29
+ tags.push(genTag(first));
30
+ if (restCount) {
31
+ if (collapseTags) {
32
+ tags.push({
33
+ key: -1,
34
+ text: `+ ${restCount}`,
35
+ closable: false
36
+ });
37
+ } else {
38
+ rest.forEach(node => tags.push(genTag(node)));
39
+ }
40
+ }
41
+ }
42
+ this.checkedNodes = checkedNodes;
43
+ this.presentTags = tags;
44
+ this.$emit("tags-changed", this.presentTags);
45
+ }
46
+ }
47
+ }
48
+
49
+ </script>