-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathsciviz_spec.yaml
247 lines (218 loc) · 9.72 KB
/
sciviz_spec.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
version: '0.0.0'
SciViz:
auth: null
component_interface:
override: |
from pharus.component_interface import type_map, Component
class PlotPlotlyCustom(Component):
rest_verb = ["GET"]
def dj_query_route(self):
plot = {
"data": [
{
"x": [x for x in range(-5, 6)],
"y": [x**2 for x in range(-5, 6)],
"type": "scatter",
}
],
'layout': {
'title': f"x^2",
'xaxis': {"title": "x"},
'yaxis': {"title": "y"},
}
}
return plot
type_map = dict({
'plot:plotly:custom': PlotPlotlyCustom,
}, **type_map)
pages:
Home:
route: /home
grids:
grid1:
type: fixed
columns: 1
row_height: 1700
components:
landing description:
x: 0
y: 0
height: 1
width: 1
type: markdown
text: |
# DataJoint™ powered visualization that adapts to *your* workflows
## Features
- Visualization that can **keep up with changing needs** of your lab
- Standardized YAML build specification providing a **Low-Code web application
design** experience
- Transport-optimization by leveraging **client-side rendering** with
[React](https://reactjs.org/)
- **Python+[DataJoint](https://www.datajoint.org/) interoperability** to allow
streamlined integration
- Clear separation between business logic from product features i.e. **customization
through configuration**
- **Backend-optimized** page rendering built for big-data and scale
- Comprehensive permission and security design enabling **flexible access control**
modes
- Securely **manage sensitive information** by configuring it separtely and referencing it in LC spec
- Pain-free deployments by supporting **live-reload** on changes to configuration
- Shared, immutable **global variables** available to all components
## Component Library Types
- `markdown`: Often it is necessary to document or describe views via Markdown
- `page`:
- Unique tabbed pages to separate areas within your single-page application
- Hidden pages accessible through linking from records in table components
- `grid`: Layout structure for organizing subcomponents (as seen in
[Grafana, AWS Console](https://github.com/react-grid-layout/react-grid-layout#projects-using-react-grid-layout))
- `fixed`: For when you know exactly how many components you'd like to render
- `dynamic`: Component templating mode when you need to render realtime views that
vary in number of components
- `table`: Sometimes there's nothing better than a table view
- paging
- sorting
- filtering
- `metadata`: Great for showing context info for particular views
- `plot`: Let's face it, we are going to need to be able to plot stuff
- plotly
- `image`: When you need to render an image file's data directly within the grid
- `*.apng`
- `*.avif`
- `*.gif`
- `*.jpeg`
- `*.png`
- `*.svg`
- `*.webp`
- `custom`: Adding new, custom components is easy with our extensibility hook. See our currently supported components [here](https://github.com/datajoint/pharus/blob/master/pharus/component_interface.py) which you can reference when creating your own.
Table:
route: /table
grids:
grid1:
type: fixed
columns: 2
row_height: 500
components:
table description:
x: 1
y: 0
height: 1
width: 1
type: markdown
text: |
## Description
This is an example of the `antd-table` component.
The data set is certainly not in the realm of *big data* but there is
sufficient records here to demonstrate the **backend-optimized** paging,
sorting, and filtering. This is currently pointed to a local test pipeline so
feel free to try out the features and interact with the data.
The backend query is entirely configurable using the SciViz spec file and
the DataJoint query syntax.
Have a look at the `Table` page in `sciviz_spec.yaml` to learn how to configure this page.
Have a look in `initialize.ipynb` to learn the test pipeline.
<!---
Also, feel free to *click* below on a specific row of interest to be taken to
the single-scientist, hidden page.
-->
table comp:
route: /table_query
x: 0
y: 0
height: 1
width: 1
type: antd-table
dj_query: >
def dj_query(demo):
q = demo.Scientist()
return dict(query=q, fetch_args={})
Plot:
route: /plot
grids:
grid1:
type: fixed
columns: 2
row_height: 500
components:
plot description:
x: 1
y: 0
height: 1
width: 1
type: markdown
text: |
## Description
This is an example of the `plot:plotly:stored_json` component. This is a good
solution when you want to improve performance by prebuilding figures and
simply fetch to display.
This component assumes the plot is precompiled and stored as a [plotly JSON](https://plotly.com/chart-studio-help/json-chart-schema/) in
a [longblob](https://datajoint.com/docs/core/concepts/query-lang/data-types) table attribute in the pipeline.
The backend query is entirely configurable using the SciViz spec file and
the DataJoint query syntax.
Have a look at the `Plot` page in `sciviz_spec.yaml` to learn how to configure this page.
Have a look in `initialize.ipynb` to learn the test pipeline.
plot comp:
route: /plot_query
x: 0
y: 0
height: 1
width: 1
type: plot:plotly:stored_json
dj_query: >
def dj_query(demo):
q = demo.ScientistPerformance & dict(scientist_id=0)
return dict(query=q, fetch_args=['performance_plot'])
Custom Plot:
route: /custom-plot
grids:
grid1:
type: fixed
columns: 2
row_height: 1000
components:
plot description:
x: 1
y: 0
height: 1
width: 1
type: markdown
text: |
## Description
Sometimes, generating figures on the fly is better because creating them is
computationally inexpensive and this saves you from managing a build job.
Another similar use case is if you simply need to access data external to the
pipeline dynamically e.g. query an external REST API.
These are good cases that can be solved by creating a *custom* component.
Let's demonstrate this by creating a component (`plot:plotly:custom`) that simply displays a hard-coded [plotly JSON](https://plotly.com/chart-studio-help/json-chart-schema/).
In the SciViz spec file (`SciViz.component_interface.override`), we can define
a new component like this:
```python
from pharus.component_interface import type_map, Component
class PlotPlotlyCustom(Component):
rest_verb = ["GET"]
def dj_query_route(self):
plot = {
"data": [
{
"x": [x for x in range(-5, 6)],
"y": [x**2 for x in range(-5, 6)],
"type": "scatter",
}
],
'layout': {
'title': f"x^2",
'xaxis': {"title": "x"},
'yaxis': {"title": "y"},
}
}
return plot
type_map = dict({
'plot:plotly:custom': PlotPlotlyCustom,
}, **type_map)
```
plot comp:
route: /custom_plot_query
x: 0
y: 0
height: 1
width: 1
type: plot:plotly:custom