Skip to content
Snippets Groups Projects
Commit fdbf6b59 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

fix some ux

parent e175ffb0
No related branches found
No related tags found
No related merge requests found
Pipeline #112839 passed
<template>
<v-footer app border text-center d-flex flex-column>
<div class="px-4 py-1 text-center w-100">
<span><a href="https://mdmlab.fr/" target="_blank"><v-img src="/cropped-logoblue-288x129.png" inline :width="80"
<div class="px-4 text-center w-100">
<span><a href="https://mdmlab.fr/" target="_blank"><v-img src="/cropped-logoblue-288x129.png" inline :width="70"
:aspect-ratio="288 / 129"></v-img></a></span>
</div>
</v-footer>
......
<!-- from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/BackToTop.vue -->
<template>
<v-layout-item
v-scroll="onScroll"
class="text-end pointer-events-none"
model-value
position="bottom"
size="88"
>
<div class="ma-4">
<v-fab-transition>
<v-btn
v-show="model"
class="mt-auto pointer-events-initial"
color="primary"
elevation="8"
icon="mdi-chevron-up"
size="large"
@click="onClick"
/>
</v-fab-transition>
</div>
</v-layout-item>
</template>
<v-layout-item v-scroll="onScroll" class="text-end pointer-events-none" model-value position="bottom"
:size="model ? 88 : 0">
<div class="ma-4">
<v-fab-transition>
<v-btn v-show="model" class="mt-auto pointer-events-initial" color="primary" elevation="8" icon="mdi-chevron-up"
size="large" @click="onClick" />
</v-fab-transition>
</div>
</v-layout-item>
</template>
<script setup>
import { ref } from 'vue'
const model = ref(false)
function onScroll () {
model.value = window.scrollY > 200
}
function onClick () {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
</script>
<style scoped>
.pointer-events-none {
pointer-events: none;
}
<script setup>
import { ref } from 'vue'
const model = ref(false)
function onScroll() {
model.value = window.scrollY > 200
}
function onClick() {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
</script>
.pointer-events-initial {
pointer-events: initial;
}
</style>
<style scoped>
.pointer-events-none {
pointer-events: none;
}
.pointer-events-initial {
pointer-events: initial;
}
</style>
\ No newline at end of file
......@@ -3,7 +3,7 @@ const { surround } = useContent();
</script>
<template>
<v-row justify="space-between">
<v-row justify="space-between" class="mt-0">
<v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" :cols="mobile ? '12' : 'auto'">
<v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
:append-icon="i === 1 ? 'mdi-arrow-right' : undefined" :block="mobile ? true : false" variant="outlined"
......
......@@ -37,14 +37,14 @@ const { initPfam } = usePfamStore();
initPfam();
</script>
<template>
<v-card variant="outlined" class="my-5">
<v-toolbar color="primary">
<v-card>
<v-toolbar density="compact">
<v-toolbar-title>Defense Systems</v-toolbar-title>
<v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
</v-toolbar>
<v-data-table-virtual :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
<v-data-table-virtual fixed-header :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
:headers="props.headers" density="compact" :custom-filter="filterOnlyCapsText" :items="props.systems"
:search="search" item-value="system.name">
<template #[`item.system`]="{ item }">
......
......@@ -53,6 +53,6 @@ const systems = computed(() => {
</script>
<template>
<v-card flat color="transparent">
<ListSystems :headers="headers" :systems="systems" :height="height - 405"></ListSystems>
<ListSystems :headers="headers" :systems="systems" :height="height - 350"></ListSystems>
</v-card>
</template>
\ No newline at end of file
......@@ -3,7 +3,11 @@ import * as Plot from "@observablehq/plot";
import PlotFigure from "~/components/PlotFigure";
import { useDisplay } from "vuetify";
const { width, lgAndDown } = useDisplay();
const { width, height } = useDisplay();
const computedTableHeight = computed(() => {
return height.value - 350
})
const drawer = ref(true);
// const { data } = await useAsyncData("refseq", () =>
......@@ -21,7 +25,7 @@ const {
);
const availableTaxo = ref(["species", "genus", "phylum"]);
const selectedTaxoRank = ref("phylum");
const selectedTaxoRank = ref("genus");
const sanitizedRefseq = computed(() => {
if (refseqData.value?.body) {
return refseqData.value.body;
......@@ -34,8 +38,8 @@ const computedWidth = computed(() => {
return Math.max(width.value, 550);
});
const height = computed(() => {
return computedWidth.value / 3;
const plotHeight = computed(() => {
return computedWidth.value / 4;
});
const search = ref("");
......@@ -90,24 +94,25 @@ const computedDistriSystemOptions = computed(() => {
: {
x: "type",
tip: true,
fill: "#6750a4",
// fill: selectedTaxoRank.value,
sort: { x: "-y" },
};
return {
marginLeft: facetDistriSystem.value ? 120 : 30,
marginBottom: facetDistriSystem.value ? 120 : 120,
marginLeft: 30,
marginBottom: 120,
x: { label: null, tickRotate: 70 },
y: { grid: true },
color: { legend: true },
width: computedWidth.value,
height: facetDistriSystem.value ? height.value * 8 : height.value * 2,
height: plotHeight.value,
marks: [
Plot.frame(),
// Plot.frame(),
Plot.barY(
unref(selectedRefSeq.value),
Plot.groupX(
{ y: facetDistriSystem.value ? "proportion-facet" : "count" },
{ y: "count" },
groupYOption
)
),
......@@ -116,43 +121,31 @@ const computedDistriSystemOptions = computed(() => {
});
const computedDistriTaxoOptions = computed(() => {
const groupYOption = facet.value
? {
y: "type",
fy: selectedTaxoRank.value,
fill: "type",
tip: true,
sort: { x: "-y" },
}
: {
y: selectedTaxoRank.value,
tip: true,
fill: "type",
// offset: "normalize",
sort: { y: "x", reverse: true },
};
const groupYOption = {
x: selectedTaxoRank.value,
// fx: selectedTaxoRank.value,
tip: true,
// fill: "type",
fill: "#6750a4",
// offset: "normalize",
sort: { x: "-y" },
};
return {
// style: {
// width: "100%",
// "max-width": "100%",
// },
marginLeft: 110,
marginRight: facet.value ? 110 : 20,
// marginLeft: 110,
marginBottom: 100,
grid: true,
x: { percent: true },
// x: { percent: true },
// x: { label: facet.value ? "Count" : null, tickRotate: 90 },
// y: { nice: true },
color: { legend: true },
width: computedWidth.value,
height: facet.value ? height.value * 4.3 : height.value,
height: plotHeight.value,
marks: [
Plot.frame(),
Plot.barX(
// Plot.frame(),
Plot.barY(
unref(selectedRefSeq.value),
Plot.groupY({ x: "count" }, groupYOption)
Plot.groupX({ y: "proportion" }, groupYOption)
),
],
};
......@@ -161,11 +154,12 @@ const computedDistriTaxoOptions = computed(() => {
<template>
<v-card>
<v-toolbar color="primary"><v-toolbar-title> REFSEQ</v-toolbar-title>
<v-toolbar density="compact"><v-toolbar-title> REFSEQ</v-toolbar-title>
<v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field></v-toolbar>
<v-data-table-virtual v-model="selected" :headers="headers" :items="sanitizedRefseq" :item-value="itemValue"
density="compact" :search="search" :custom-filter="filterOnlyCapsText" height="800" show-select class="elevation-1">
<v-data-table-virtual fixed-header v-model="selected" :headers="headers" :items="sanitizedRefseq"
:item-value="itemValue" density="compact" :search="search" :custom-filter="filterOnlyCapsText"
:height="computedTableHeight" show-select class="elevation-1">
<template #[`item.type`]="{ item }">
<v-chip variant="text" link :to="`/defense-systems/${item.type.toLowerCase()}`">{{
......@@ -175,13 +169,13 @@ const computedDistriTaxoOptions = computed(() => {
</v-data-table-virtual>
</v-card>
<v-card class="my-3">
<v-toolbar color="primary"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar>
<v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar>
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
<v-card>
<v-toolbar color="primary"><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar>
<v-toolbar color="primary" density="compact"><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar>
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment