@abi-software/map-side-bar 1.3.34 → 1.3.35
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.
- package/LICENSE +201 -201
- package/README.md +146 -146
- package/babel.config.js +14 -14
- package/del.json +27 -0
- package/delte.json +30 -0
- package/dist/map-side-bar.common.js +224 -261
- package/dist/map-side-bar.common.js.map +1 -1
- package/dist/map-side-bar.css +1 -1
- package/dist/map-side-bar.umd.js +224 -261
- package/dist/map-side-bar.umd.js.map +1 -1
- package/dist/map-side-bar.umd.min.js +1 -1
- package/dist/map-side-bar.umd.min.js.map +1 -1
- package/package-lock.json +13716 -13716
- package/package.json +67 -67
- package/public/index.html +17 -17
- package/scaffold_context_info.json +31 -0
- package/src/App.vue +152 -152
- package/src/algolia/algolia.js +182 -182
- package/src/algolia/utils.js +69 -69
- package/src/components/BadgesGroup.vue +142 -142
- package/src/components/Cascader.vue +49 -49
- package/src/components/ContextCard.vue +381 -381
- package/src/components/DatasetCard.vue +325 -325
- package/src/components/EventBus.js +3 -3
- package/src/components/ImageGallery.vue +515 -515
- package/src/components/SearchFilters.vue +586 -609
- package/src/components/SideBar.vue +224 -224
- package/src/components/SidebarContent.vue +508 -508
- package/src/components/Tabs.vue +78 -78
- package/src/components/hardcoded-context-info.js +79 -79
- package/src/components/index.js +8 -8
- package/src/components/processFilters.js +22 -0
- package/src/components/species-map.js +8 -8
- package/src/main.js +8 -8
- package/static.json +6 -6
- package/vue.config.js +11 -11
package/README.md
CHANGED
|
@@ -1,146 +1,146 @@
|
|
|
1
|
-
# map-side-bar
|
|
2
|
-
|
|
3
|
-
[](https://badge.fury.io/js/%40abi-software%2Fmap-side-bar)
|
|
4
|
-
|
|
5
|
-
This project aims to provide a sidebar for searching capability for
|
|
6
|
-
SPARC portal.
|
|
7
|
-
|
|
8
|
-
## Project installation
|
|
9
|
-
```
|
|
10
|
-
npm i @abi-software/map-side-bar
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## Project setup
|
|
15
|
-
```
|
|
16
|
-
npm install
|
|
17
|
-
npm run serve
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
### Compiles and minifies for production
|
|
21
|
-
```
|
|
22
|
-
npm run build-bundle
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## How to use
|
|
26
|
-
Include the package in your script.
|
|
27
|
-
```javascript
|
|
28
|
-
import '@abi-software/map-side-bar'
|
|
29
|
-
import '@abi-software/map-side-bar/dist/map-side-bar.css'
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
#Template
|
|
33
|
-
The code should looks like this
|
|
34
|
-
|
|
35
|
-
```html
|
|
36
|
-
<SideBar :envVars="envVars"
|
|
37
|
-
:visible="sideBarVisibility"
|
|
38
|
-
@actionClick="actionClick">
|
|
39
|
-
</SideBar>
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
envVars contains environment varibables like so:
|
|
43
|
-
|
|
44
|
-
```yaml
|
|
45
|
-
{
|
|
46
|
-
API_LOCATION: 'http://localhost:5000/',
|
|
47
|
-
ALGOLIA_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
|
|
48
|
-
ALGOLIA_ID: 'xxxxx',
|
|
49
|
-
ALGOLIA_INDEX: 'k-core_dev_published_time_desc',
|
|
50
|
-
}
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
actionClick event is called when an action button has benn clicked on.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
## Sidebar Data formats
|
|
57
|
-
### Algolia
|
|
58
|
-
|
|
59
|
-
Data retrieved from Algolia can be found here:
|
|
60
|
-
https://github.com/ABI-Software/map-sidebar/blob/3310b165489b10901f50a21e5689ef046251dbd9/src/algolia/algolia.js#L136
|
|
61
|
-
|
|
62
|
-
```
|
|
63
|
-
[
|
|
64
|
-
'pennsieve.publishDate', // optional
|
|
65
|
-
'pennsieve.updatedAt', // optional
|
|
66
|
-
'Item.curie', //contains the DOI for the dataset (required)
|
|
67
|
-
'Item.name', // dataset title (required)
|
|
68
|
-
'Item.description', // dataset description (required)
|
|
69
|
-
'objectID', // Pennsieve discover ID (required)
|
|
70
|
-
],
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
### Scicrunch
|
|
74
|
-
|
|
75
|
-
Data retrieved from scicrunch can be found here:
|
|
76
|
-
https://github.com/nih-sparc/sparc-api/blob/f3444a32964f5340e0ee1f10a08a05839620d098/app/scicrunch_processing_common.py#L25
|
|
77
|
-
|
|
78
|
-
And mimetypes can be viewed here
|
|
79
|
-
https://github.com/nih-sparc/sparc-api/blob/f3444a32964f5340e0ee1f10a08a05839620d098/app/scicrunch_processing_common.py#L28
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
ADDITIONAL_LINKS = 'additionalLinks'
|
|
83
|
-
BIOLUCIDA_2D = 'biolucida-2d'
|
|
84
|
-
BIOLUCIDA_3D = 'biolucida-3d'
|
|
85
|
-
COMMON_IMAGES = 'common-images'
|
|
86
|
-
CONTEXT_FILE = 'abi-context-file'
|
|
87
|
-
CSV = 'csv'
|
|
88
|
-
NAME = 'name'
|
|
89
|
-
ORGANS = 'organs'
|
|
90
|
-
PLOT_FILE = 'abi-plot'
|
|
91
|
-
SEGMENTATION_FILES = 'mbf-segmentation'
|
|
92
|
-
SCAFFOLD_DIR = 'abi-scaffold-dir'
|
|
93
|
-
SCAFFOLD_FILE = 'abi-scaffold-metadata-file'
|
|
94
|
-
THUMBNAIL_IMAGE = 'abi-thumbnail'
|
|
95
|
-
SCAFFOLD_VIEW_FILE = 'abi-scaffold-view-file'
|
|
96
|
-
SIMULATION_FILE = 'abi-simulation-file'
|
|
97
|
-
VIDEO = 'video'
|
|
98
|
-
VERSION = 'version'
|
|
99
|
-
README = 'readme'
|
|
100
|
-
TITLE = 'title'
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
Note: All are optional except for ‘name’
|
|
104
|
-
|
|
105
|
-
### Sidebar input processing
|
|
106
|
-
Sidebar input processing can be viewed here:
|
|
107
|
-
https://github.com/ABI-Software/map-sidebar/blob/3310b165489b10901f50a21e5689ef046251dbd9/src/components/SidebarContent.vue#L318
|
|
108
|
-
|
|
109
|
-
It is used to keep the code from attempting to access an object property that does not exist
|
|
110
|
-
|
|
111
|
-
### Context card data format
|
|
112
|
-
All fields are strings:
|
|
113
|
-
```
|
|
114
|
-
{
|
|
115
|
-
"description": required ,
|
|
116
|
-
"id": optional,
|
|
117
|
-
"samples": [ // array required here (can be empty)
|
|
118
|
-
{
|
|
119
|
-
"annotation": optional,
|
|
120
|
-
"description": required,
|
|
121
|
-
"doi": optional // Doi will be used to link sample to a separate dataset,
|
|
122
|
-
"heading": required,
|
|
123
|
-
"id": required,
|
|
124
|
-
"path": optional // path will be used to link to file location,
|
|
125
|
-
"view": optional // Will be used to link to “views[i].id”
|
|
126
|
-
}
|
|
127
|
-
],
|
|
128
|
-
"version": // not currently used,
|
|
129
|
-
"views": [ // array required here (can be empty)
|
|
130
|
-
{
|
|
131
|
-
"annotation": optional,
|
|
132
|
-
"description": required,
|
|
133
|
-
"id": requried,
|
|
134
|
-
"path": required // relative path to the view file, eg "derivative\\Scaffolds\\scaffoldMap_tenial_view.json",
|
|
135
|
-
"sample": optional // used to link to views to samples
|
|
136
|
-
"thumbnail": optional // technically optional but it won’t look great
|
|
137
|
-
}
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
An example context card file can be viewed here:
|
|
143
|
-
https://drive.google.com/file/d/15NVRBny7WGltpMSRbsgMglXo0xOC3-Q9/view?usp=sharing
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
1
|
+
# map-side-bar
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/%40abi-software%2Fmap-side-bar)
|
|
4
|
+
|
|
5
|
+
This project aims to provide a sidebar for searching capability for
|
|
6
|
+
SPARC portal.
|
|
7
|
+
|
|
8
|
+
## Project installation
|
|
9
|
+
```
|
|
10
|
+
npm i @abi-software/map-side-bar
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## Project setup
|
|
15
|
+
```
|
|
16
|
+
npm install
|
|
17
|
+
npm run serve
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Compiles and minifies for production
|
|
21
|
+
```
|
|
22
|
+
npm run build-bundle
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## How to use
|
|
26
|
+
Include the package in your script.
|
|
27
|
+
```javascript
|
|
28
|
+
import '@abi-software/map-side-bar'
|
|
29
|
+
import '@abi-software/map-side-bar/dist/map-side-bar.css'
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
#Template
|
|
33
|
+
The code should looks like this
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<SideBar :envVars="envVars"
|
|
37
|
+
:visible="sideBarVisibility"
|
|
38
|
+
@actionClick="actionClick">
|
|
39
|
+
</SideBar>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
envVars contains environment varibables like so:
|
|
43
|
+
|
|
44
|
+
```yaml
|
|
45
|
+
{
|
|
46
|
+
API_LOCATION: 'http://localhost:5000/',
|
|
47
|
+
ALGOLIA_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
|
|
48
|
+
ALGOLIA_ID: 'xxxxx',
|
|
49
|
+
ALGOLIA_INDEX: 'k-core_dev_published_time_desc',
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
actionClick event is called when an action button has benn clicked on.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## Sidebar Data formats
|
|
57
|
+
### Algolia
|
|
58
|
+
|
|
59
|
+
Data retrieved from Algolia can be found here:
|
|
60
|
+
https://github.com/ABI-Software/map-sidebar/blob/3310b165489b10901f50a21e5689ef046251dbd9/src/algolia/algolia.js#L136
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
[
|
|
64
|
+
'pennsieve.publishDate', // optional
|
|
65
|
+
'pennsieve.updatedAt', // optional
|
|
66
|
+
'Item.curie', //contains the DOI for the dataset (required)
|
|
67
|
+
'Item.name', // dataset title (required)
|
|
68
|
+
'Item.description', // dataset description (required)
|
|
69
|
+
'objectID', // Pennsieve discover ID (required)
|
|
70
|
+
],
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Scicrunch
|
|
74
|
+
|
|
75
|
+
Data retrieved from scicrunch can be found here:
|
|
76
|
+
https://github.com/nih-sparc/sparc-api/blob/f3444a32964f5340e0ee1f10a08a05839620d098/app/scicrunch_processing_common.py#L25
|
|
77
|
+
|
|
78
|
+
And mimetypes can be viewed here
|
|
79
|
+
https://github.com/nih-sparc/sparc-api/blob/f3444a32964f5340e0ee1f10a08a05839620d098/app/scicrunch_processing_common.py#L28
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
ADDITIONAL_LINKS = 'additionalLinks'
|
|
83
|
+
BIOLUCIDA_2D = 'biolucida-2d'
|
|
84
|
+
BIOLUCIDA_3D = 'biolucida-3d'
|
|
85
|
+
COMMON_IMAGES = 'common-images'
|
|
86
|
+
CONTEXT_FILE = 'abi-context-file'
|
|
87
|
+
CSV = 'csv'
|
|
88
|
+
NAME = 'name'
|
|
89
|
+
ORGANS = 'organs'
|
|
90
|
+
PLOT_FILE = 'abi-plot'
|
|
91
|
+
SEGMENTATION_FILES = 'mbf-segmentation'
|
|
92
|
+
SCAFFOLD_DIR = 'abi-scaffold-dir'
|
|
93
|
+
SCAFFOLD_FILE = 'abi-scaffold-metadata-file'
|
|
94
|
+
THUMBNAIL_IMAGE = 'abi-thumbnail'
|
|
95
|
+
SCAFFOLD_VIEW_FILE = 'abi-scaffold-view-file'
|
|
96
|
+
SIMULATION_FILE = 'abi-simulation-file'
|
|
97
|
+
VIDEO = 'video'
|
|
98
|
+
VERSION = 'version'
|
|
99
|
+
README = 'readme'
|
|
100
|
+
TITLE = 'title'
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Note: All are optional except for ‘name’
|
|
104
|
+
|
|
105
|
+
### Sidebar input processing
|
|
106
|
+
Sidebar input processing can be viewed here:
|
|
107
|
+
https://github.com/ABI-Software/map-sidebar/blob/3310b165489b10901f50a21e5689ef046251dbd9/src/components/SidebarContent.vue#L318
|
|
108
|
+
|
|
109
|
+
It is used to keep the code from attempting to access an object property that does not exist
|
|
110
|
+
|
|
111
|
+
### Context card data format
|
|
112
|
+
All fields are strings:
|
|
113
|
+
```
|
|
114
|
+
{
|
|
115
|
+
"description": required ,
|
|
116
|
+
"id": optional,
|
|
117
|
+
"samples": [ // array required here (can be empty)
|
|
118
|
+
{
|
|
119
|
+
"annotation": optional,
|
|
120
|
+
"description": required,
|
|
121
|
+
"doi": optional // Doi will be used to link sample to a separate dataset,
|
|
122
|
+
"heading": required,
|
|
123
|
+
"id": required,
|
|
124
|
+
"path": optional // path will be used to link to file location,
|
|
125
|
+
"view": optional // Will be used to link to “views[i].id”
|
|
126
|
+
}
|
|
127
|
+
],
|
|
128
|
+
"version": // not currently used,
|
|
129
|
+
"views": [ // array required here (can be empty)
|
|
130
|
+
{
|
|
131
|
+
"annotation": optional,
|
|
132
|
+
"description": required,
|
|
133
|
+
"id": requried,
|
|
134
|
+
"path": required // relative path to the view file, eg "derivative\\Scaffolds\\scaffoldMap_tenial_view.json",
|
|
135
|
+
"sample": optional // used to link to views to samples
|
|
136
|
+
"thumbnail": optional // technically optional but it won’t look great
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
An example context card file can be viewed here:
|
|
143
|
+
https://drive.google.com/file/d/15NVRBny7WGltpMSRbsgMglXo0xOC3-Q9/view?usp=sharing
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
package/babel.config.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
presets: [
|
|
3
|
-
'@vue/cli-plugin-babel/preset'
|
|
4
|
-
],
|
|
5
|
-
plugins: [
|
|
6
|
-
[
|
|
7
|
-
"component",
|
|
8
|
-
{
|
|
9
|
-
libraryName: "element-ui",
|
|
10
|
-
styleLibraryName: "theme-chalk"
|
|
11
|
-
}
|
|
12
|
-
]
|
|
13
|
-
]
|
|
14
|
-
}
|
|
1
|
+
module.exports = {
|
|
2
|
+
presets: [
|
|
3
|
+
'@vue/cli-plugin-babel/preset'
|
|
4
|
+
],
|
|
5
|
+
plugins: [
|
|
6
|
+
[
|
|
7
|
+
"component",
|
|
8
|
+
{
|
|
9
|
+
libraryName: "element-ui",
|
|
10
|
+
styleLibraryName: "theme-chalk"
|
|
11
|
+
}
|
|
12
|
+
]
|
|
13
|
+
]
|
|
14
|
+
}
|
package/del.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "Mean luminal pressure (represented by a color field with red as high pressure and blue as low pressure) recorded from the proximal, transverse and distal sections of the pig colon are mapped on the scaffold. \n\nBaseline data was collected for 30min, followed by 15min of stimulation and 30min of post-stimulation.",
|
|
3
|
+
"heading": "Direct proximal colon stimulation",
|
|
4
|
+
"id": "sparc.science.context_data",
|
|
5
|
+
"samples": [
|
|
6
|
+
{
|
|
7
|
+
"annotation": "",
|
|
8
|
+
"description": "Manometry data recorded from pigs under direct proximal colon stimulation.",
|
|
9
|
+
"doi": "https://doi.org/10.26275/up27-ibcr",
|
|
10
|
+
"heading": "Proximal direct stimulation samples",
|
|
11
|
+
"id": "Sample 1",
|
|
12
|
+
"path": "derivative\\stim_proximal-colon_manometry.csv",
|
|
13
|
+
"view": "View 1"
|
|
14
|
+
}
|
|
15
|
+
],
|
|
16
|
+
"version": "0.1.0",
|
|
17
|
+
"views": [
|
|
18
|
+
{
|
|
19
|
+
"annotation": "--",
|
|
20
|
+
"description": "Sections of pig colon scaffold with mapped manometry data where the data are collected from. ",
|
|
21
|
+
"id": "View 1",
|
|
22
|
+
"path": "colon_Layout1_view.json",
|
|
23
|
+
"sample": "Sample 1",
|
|
24
|
+
"thumbnail": "derivative\\pig_colon_main_thumbnail.jpeg"
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
}
|
package/delte.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "This dataset contains single cell scale anatomical map of the rat intrinsic cardiac nervous system (ICNS) across four male and three female hearts. These cell clusters can be seen by the yellow data points on the image as well as spherical markers on the 3D heart scaffold. The dataset provides an integrative framework to visualise the spatial distribution of ICNS across different hearts.",
|
|
3
|
+
"heading": "Mapped ICN samples",
|
|
4
|
+
"id": "sparc.science.context_data",
|
|
5
|
+
"samples": [
|
|
6
|
+
{
|
|
7
|
+
"annotation": "",
|
|
8
|
+
"description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
|
|
9
|
+
"doi": "",
|
|
10
|
+
"heading": "ICNS from subject M54-8",
|
|
11
|
+
"id": "Sample 1",
|
|
12
|
+
"path": "",
|
|
13
|
+
"view": "View 1",
|
|
14
|
+
"color": "#FFFF00",
|
|
15
|
+
"thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/orange.png"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"annotation": "",
|
|
19
|
+
"description": "Spatial location of isolated ICNS mapped onto a generic heart scaffold",
|
|
20
|
+
"doi": "",
|
|
21
|
+
"heading": "ICNS from subject M54-5",
|
|
22
|
+
"id": "Sample 2",
|
|
23
|
+
"path": "",
|
|
24
|
+
"view": "View 2",
|
|
25
|
+
"color": "#FFA500",
|
|
26
|
+
"thumbnail": "https://raw.githubusercontent.com/ABI-Software/map-sidebar/main/assets/temp-pics/teal.png"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"version": "0.1.0"
|
|
30
|
+
}
|