Skip to content

Commit 15f83d5

Browse files
WytammaWytamma
committed
🎨 Add tabs
1 parent 295ac9e commit 15f83d5

19 files changed

+177
-71
lines changed

‎backend/beastiary/webapp-dist/css/main-dashboard.1bf44c98.css ‎backend/beastiary/webapp-dist/css/main-dashboard.084cf33c.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><title>Beastiary</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"><link href="/css/login.4b7f13da.css" rel="prefetch"><link href="/css/login~main-dashboard.49552835.css" rel="prefetch"><link href="/css/login~main~main-dashboard.87cb79bc.css" rel="prefetch"><link href="/css/main-dashboard.1bf44c98.css" rel="prefetch"><link href="/css/main.ccc0de8f.css" rel="prefetch"><link href="/css/main~main-dashboard.7a0daa79.css" rel="prefetch"><link href="/js/login.f7822881.js" rel="prefetch"><link href="/js/login~main-dashboard.b88e9356.js" rel="prefetch"><link href="/js/login~main~main-dashboard.274e0fba.js" rel="prefetch"><link href="/js/main-dashboard.032c1394.js" rel="prefetch"><link href="/js/main.44edea84.js" rel="prefetch"><link href="/js/main~main-dashboard.3a8668ab.js" rel="prefetch"><link href="/js/reset-password.c0004f3e.js" rel="prefetch"><link href="/js/start.9ba6b7cc.js" rel="prefetch"><link href="/css/chunk-vendors.5b404c1b.css" rel="preload" as="style"><link href="/js/app.1cafd64d.js" rel="preload" as="script"><link href="/js/chunk-vendors.6182fc5b.js" rel="preload" as="script"><link href="/css/chunk-vendors.5b404c1b.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="frontend"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but Beastiary doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.6182fc5b.js"></script><script src="/js/app.1cafd64d.js"></script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><title>Beastiary</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"><link href="/css/login.4b7f13da.css" rel="prefetch"><link href="/css/login~main-dashboard.49552835.css" rel="prefetch"><link href="/css/login~main~main-dashboard.87cb79bc.css" rel="prefetch"><link href="/css/main-dashboard.084cf33c.css" rel="prefetch"><link href="/css/main.ccc0de8f.css" rel="prefetch"><link href="/css/main~main-dashboard.7a0daa79.css" rel="prefetch"><link href="/js/login.ce679843.js" rel="prefetch"><link href="/js/login~main-dashboard.e37733e4.js" rel="prefetch"><link href="/js/login~main~main-dashboard.274e0fba.js" rel="prefetch"><link href="/js/main-dashboard.7a648762.js" rel="prefetch"><link href="/js/main.44edea84.js" rel="prefetch"><link href="/js/main~main-dashboard.3a8668ab.js" rel="prefetch"><link href="/js/reset-password.c0004f3e.js" rel="prefetch"><link href="/js/start.9ba6b7cc.js" rel="prefetch"><link href="/css/chunk-vendors.5b404c1b.css" rel="preload" as="style"><link href="/js/app.ca96618a.js" rel="preload" as="script"><link href="/js/chunk-vendors.6182fc5b.js" rel="preload" as="script"><link href="/css/chunk-vendors.5b404c1b.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="frontend"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but Beastiary doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.6182fc5b.js"></script><script src="/js/app.ca96618a.js"></script></body></html>

‎backend/beastiary/webapp-dist/js/app.1cafd64d.js ‎backend/beastiary/webapp-dist/js/app.ca96618a.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/app.1cafd64d.js.map ‎backend/beastiary/webapp-dist/js/app.ca96618a.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/login.f7822881.js ‎backend/beastiary/webapp-dist/js/login.ce679843.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/login.ce679843.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/login.f7822881.js.map

-1
This file was deleted.

‎backend/beastiary/webapp-dist/js/login~main-dashboard.b88e9356.js.map

-1
This file was deleted.

‎backend/beastiary/webapp-dist/js/login~main-dashboard.b88e9356.js ‎backend/beastiary/webapp-dist/js/login~main-dashboard.e37733e4.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/login~main-dashboard.e37733e4.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/main-dashboard.032c1394.js ‎backend/beastiary/webapp-dist/js/main-dashboard.7a648762.js

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/js/main-dashboard.032c1394.js.map ‎backend/beastiary/webapp-dist/js/main-dashboard.7a648762.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/beastiary/webapp-dist/precache-manifest.ea2828f220ea62d581c961ec525b3fdb.js ‎backend/beastiary/webapp-dist/precache-manifest.51a7127178890587a08f8a0dcc747654.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
44
"url": "/css/chunk-vendors.5b404c1b.css"
55
},
66
{
7-
"revision": "ef8e437d6b58e7d9ab65",
7+
"revision": "4902d63aa3a1a3209bce",
88
"url": "/css/login.4b7f13da.css"
99
},
1010
{
11-
"revision": "c8875e6e0880bf137dcd",
11+
"revision": "661653d25af73b1e6a25",
1212
"url": "/css/login~main-dashboard.49552835.css"
1313
},
1414
{
1515
"revision": "a290784cd65bd8c83e7b",
1616
"url": "/css/login~main~main-dashboard.87cb79bc.css"
1717
},
1818
{
19-
"revision": "dba82766890e16146665",
20-
"url": "/css/main-dashboard.1bf44c98.css"
19+
"revision": "3a75d466cd815c798ab1",
20+
"url": "/css/main-dashboard.084cf33c.css"
2121
},
2222
{
2323
"revision": "264fef3b4fe68f40abb3",
@@ -28,32 +28,32 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
2828
"url": "/css/main~main-dashboard.7a0daa79.css"
2929
},
3030
{
31-
"revision": "1f3edeef83e68f77cbdd23f4224e9dd3",
31+
"revision": "9910a878d4f5dd9ad54064f9d46c31ac",
3232
"url": "/index.html"
3333
},
3434
{
35-
"revision": "e15d2792cebcb1dd0014",
36-
"url": "/js/app.1cafd64d.js"
35+
"revision": "0e62d7f05a717b0eef7d",
36+
"url": "/js/app.ca96618a.js"
3737
},
3838
{
3939
"revision": "507309ef8a940967a18a",
4040
"url": "/js/chunk-vendors.6182fc5b.js"
4141
},
4242
{
43-
"revision": "ef8e437d6b58e7d9ab65",
44-
"url": "/js/login.f7822881.js"
43+
"revision": "4902d63aa3a1a3209bce",
44+
"url": "/js/login.ce679843.js"
4545
},
4646
{
47-
"revision": "c8875e6e0880bf137dcd",
48-
"url": "/js/login~main-dashboard.b88e9356.js"
47+
"revision": "661653d25af73b1e6a25",
48+
"url": "/js/login~main-dashboard.e37733e4.js"
4949
},
5050
{
5151
"revision": "a290784cd65bd8c83e7b",
5252
"url": "/js/login~main~main-dashboard.274e0fba.js"
5353
},
5454
{
55-
"revision": "dba82766890e16146665",
56-
"url": "/js/main-dashboard.032c1394.js"
55+
"revision": "3a75d466cd815c798ab1",
56+
"url": "/js/main-dashboard.7a648762.js"
5757
},
5858
{
5959
"revision": "264fef3b4fe68f40abb3",

‎backend/beastiary/webapp-dist/service-worker.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
1515

1616
importScripts(
17-
"/precache-manifest.ea2828f220ea62d581c961ec525b3fdb.js"
17+
"/precache-manifest.51a7127178890587a08f8a0dcc747654.js"
1818
);
1919

2020
workbox.core.setCacheNameDetails({prefix: "frontend"});

‎backend/pyproject.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "beastiary"
3-
version = "1.1.1"
3+
version = "1.1.2"
44
description = ""
55
authors = ["Wytamma Wirth <wytamma.wirth@me.com>"]
66
readme = "PYPI-README.md"

‎frontend/src/components/data/ESSChip.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default class ESSChip extends Vue {
1616
1717
get color() {
1818
if (this.ESS === null) {
19-
return 'red'
19+
return 'red';
2020
}
2121
if (this.ESS < 100) {
2222
return 'red';
@@ -81,7 +81,7 @@ export default class ESSChip extends Vue {
8181
return ESS;
8282
}},
8383
];
84-
84+
8585
// @ts-ignore
8686
public worker = this.$worker.create(this.actions);
8787

‎frontend/src/components/data/graphs/Trace.vue

+28-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
22
<div>
3-
<Plotly :data="traceData" :layout="layout" :display-mode-bar="false"></Plotly>
3+
<Plotly :data="traceData" :layout="layout"
4+
:toImageButtonOptions="{
5+
filename: 'trace',
6+
width: null,
7+
height: null,
8+
format: 'svg'
9+
}" :displaylogo="false" :mode-bar-buttons-to-remove="modeBarButtons" :display-mode-bar="true"></Plotly>
410
</div>
511
</template>
612

@@ -15,6 +21,22 @@ import { Trace } from '../../../interfaces';
1521
},
1622
})
1723
export default class Histogram extends Vue {
24+
get modeBarButtons() {
25+
return [
26+
'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d',
27+
'hoverClosestCartesian', 'hoverCompareCartesian',
28+
'zoom3d', 'pan3d', 'resetCameraDefault3d', 'resetCameraLastSave3d', 'hoverClosest3d',
29+
'orbitRotation', 'tableRotation',
30+
'zoomInGeo', 'zoomOutGeo', 'resetGeo', 'hoverClosestGeo',
31+
'sendDataToCloud',
32+
'hoverClosestGl2d',
33+
'hoverClosestPie',
34+
'toggleHover',
35+
'resetViews',
36+
'toggleSpikelines',
37+
'resetViewMapbox',
38+
];
39+
}
1840
get traces() {
1941
return readTraces(this.$store);
2042
}
@@ -28,18 +50,18 @@ export default class Histogram extends Vue {
2850
yaxis: {showgrid: true, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
2951
yaxis2: {showgrid: true, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
3052
xaxis2: {domain: [0.73, 1], showline: false, zeroline: false, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
31-
plot_bgcolor: 'rgba(0, 0, 0, 0)',
32-
paper_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'rgba(0, 0, 0, 0)',
53+
plot_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'white',
54+
paper_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'white',
3355
barmode: 'overlay',
34-
legend: {orientation: 'h', x: 0.5, y: 1.15, xanchor: 'center', font: {color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'}},
56+
legend: {orientation: 'h', x: 0.5, y: 1.15, xanchor: 'center', font: {size: 15, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'}},
3557
margin: {
3658
l: 50,
37-
r: 30,
59+
r: 10,
3860
b: 30,
3961
t: 0,
4062
pad: 0,
4163
},
42-
height: 400,
64+
// height: 400,
4365
};
4466
}
4567
get traceData() {

‎frontend/src/components/data/graphs/Violin.vue

+42-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<Plotly :data="ViolinData" :layout="layout" :display-mode-bar="false" class="mt-0"></Plotly>
2+
<Plotly :data="ViolinData" :layout="layout" :toImageButtonOptions="{
3+
filename: 'violin',
4+
width: null,
5+
height: null,
6+
format: 'svg'
7+
}" :displaylogo="false" :mode-bar-buttons-to-remove="modeBarButtons" :display-mode-bar="true"></Plotly>
38
</template>
49

510
<script lang="ts">
@@ -13,27 +18,48 @@ import { Trace } from '../../../interfaces';
1318
},
1419
})
1520
export default class Violin extends Vue {
21+
get modeBarButtons() {
22+
return [
23+
'zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d',
24+
'hoverClosestCartesian', 'hoverCompareCartesian',
25+
'zoom3d', 'pan3d', 'resetCameraDefault3d', 'resetCameraLastSave3d', 'hoverClosest3d',
26+
'orbitRotation', 'tableRotation',
27+
'zoomInGeo', 'zoomOutGeo', 'resetGeo', 'hoverClosestGeo',
28+
'sendDataToCloud',
29+
'hoverClosestGl2d',
30+
'hoverClosestPie',
31+
'toggleHover',
32+
'resetViews',
33+
'toggleSpikelines',
34+
'resetViewMapbox',
35+
];
36+
}
1637
get traces() {
1738
return readTraces(this.$store);
1839
}
1940
get activeTraceIDs() {
2041
return readActiveTraceIDs(this.$store);
2142
}
2243
get layout() {
23-
return {
24-
plot_bgcolor: 'rgba(0, 0, 0, 0)',
25-
paper_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'rgba(0, 0, 0, 0)',
26-
yaxis: {showticklabels: false, zeroline: false},
27-
xaxis: { zeroline: false, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
28-
margin: {
29-
l: 50,
30-
r: 30,
31-
b: 30,
32-
t: 10,
33-
pad: 0,
34-
},
35-
height: 270,
36-
};
44+
return {
45+
plot_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'white',
46+
paper_bgcolor: this.$vuetify.theme.dark ? '#1E1E1E' : 'white',
47+
yaxis: {showticklabels: false, zeroline: false},
48+
xaxis: { zeroline: false, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
49+
legend: {
50+
orientation: 'h', x: 0.5, y: 1.15,
51+
xanchor: 'center',
52+
font: {size: 15, color: this.$vuetify.theme.dark ? 'white' : '#2c3e50'},
53+
},
54+
displayModeBar: true,
55+
margin: {
56+
l: 10,
57+
r: 10,
58+
b: 30,
59+
t: 0,
60+
pad: 0,
61+
},
62+
};
3763
}
3864
get ViolinData() {
3965
const data: any[] = [];
@@ -84,10 +110,7 @@ export default class Violin extends Vue {
84110
fillcolor: colours[count],
85111
name: Object.values(this.traces).filter((t) => t.activeParams.length > 0).length === 1 ? `${param}` : `${this.fileName(trace.path)} - ${param}`,
86112
hovertemplate: '%{y}',
87-
// @ts-ignore
88-
showlegend: false,
89-
// @ts-ignore
90-
legendgroup: `${param}`,
113+
showlegend: true,
91114
});
92115
93116
count++;

‎frontend/src/views/main/Dashboard.vue

+69-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-layout fill-height style=" overflow: hidden;">
3-
<v-row class="ml-4 mr-2 pb-8 mt-4">
4-
<v-col cols="3" class="pa-0">
3+
<v-row class="ml-4 mr-2 pb-8 mt-0">
4+
<v-col cols="3" class="pa-0 mt-4">
55
<div class="mt-0 fill-height elevation-4 rounded-lg">
66
<v-toolbar
77
class="rounded-t-lg"
@@ -17,12 +17,71 @@
1717
<TraceList />
1818
</div>
1919
</v-col>
20-
<v-col cols="9" class="pl-4 pt-0">
21-
<div v-if="activeParams" class="">
22-
23-
<Trace class="elevation-3 mb-4 rounded-lg" />
24-
<Violin class="elevation-3 rounded-lg" />
25-
</div>
20+
<v-col cols="9" class="pl-4 mt-4 pt-0">
21+
<v-card v-if="activeParams" class="rounded-lg ">
22+
<v-tabs v-model="tab" right class="mb-4">
23+
<v-tab >
24+
Trace
25+
</v-tab>
26+
<v-tab>
27+
Violin
28+
</v-tab>
29+
<v-tab>
30+
Histogram
31+
</v-tab>
32+
<v-tab>
33+
Density
34+
</v-tab>
35+
<v-tab>
36+
Joint
37+
</v-tab>
38+
<v-tab>
39+
ESS
40+
</v-tab>
41+
<v-tab>
42+
Estimates
43+
</v-tab>
44+
</v-tabs>
45+
<v-tabs-items v-model="tab">
46+
<v-tab-item >
47+
<v-card flat class="pa-2" >
48+
<Trace v-if="tab === 0" />
49+
</v-card>
50+
</v-tab-item>
51+
<v-tab-item>
52+
<v-card flat class="pa-2" fill-height>
53+
<Violin v-if="tab === 1"/>
54+
</v-card>
55+
</v-tab-item>
56+
<v-tab-item>
57+
<v-card flat class="pa-2" fill-height>
58+
WIP
59+
</v-card>
60+
</v-tab-item>
61+
<v-tab-item>
62+
<v-card flat class="pa-2" fill-height>
63+
WIP
64+
</v-card>
65+
</v-tab-item>
66+
<v-tab-item>
67+
<v-card flat class="pa-2" fill-height>
68+
WIP
69+
</v-card>
70+
</v-tab-item>
71+
<v-tab-item>
72+
<v-card flat class="pa-2" fill-height>
73+
WIP
74+
</v-card>
75+
</v-tab-item>
76+
<v-tab-item>
77+
<v-card flat class="pa-2" fill-height>
78+
WIP
79+
</v-card>
80+
</v-tab-item>
81+
</v-tabs-items>
82+
83+
</v-card>
84+
2685
</v-col>
2786
</v-row>
2887
</v-layout>
@@ -52,6 +111,8 @@ import { Component, Vue } from 'vue-property-decorator';
52111
},
53112
})
54113
export default class Dashboard extends Vue {
114+
public tab = null;
115+
55116
get activeTraceIDs() {
56117
const IDs = readActiveTraceIDs(this.$store);
57118
return IDs;

0 commit comments

Comments
 (0)