feat: Rounded corners for Vega plots (#394, #405) (#406)

bihealth · Jan 22, 2024 · 84dfd86 · 84dfd86
1 parent 8918b20
commit 84dfd86
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/frontend/src/components/GeneDetails/ExpressionCard.vue b/frontend/src/components/GeneDetails/ExpressionCard.vue
@@ -167,7 +167,7 @@ const vegaLayer = [
         Tissue-Specific Gene Expression from GTeX
       </v-card-subtitle>
       <v-card-text class="pt-3 pb-0">
-        <v-sheet color="background">
+        <v-sheet color="background" class="pa-2">
           <VegaPlot
             data-name="expression"
             :data-values="vegaData"

diff --git a/frontend/src/components/SeqvarDetails/ClinsigCard.vue b/frontend/src/components/SeqvarDetails/ClinsigCard.vue
@@ -7,6 +7,7 @@ component via the `errorDisplay` event and are handled there.
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { useTheme } from 'vuetify'
 
 import DocsLink from '@/components/DocsLink.vue'
 import CriterionSwitch from '@/components/SeqvarDetails/ClinsigCard/CriterionSwitch.vue'
@@ -33,6 +34,9 @@ interface Props {
 /** Define component's props. */
 const props = defineProps<Props>()
 
+/** Vuetify theme. */
+const theme = useTheme()
+
 /** Define emits. */
 const emit = defineEmits<{
   /** Display error to user. */
@@ -150,6 +154,11 @@ const currentConflicts = computed<Conflict[]>(() => {
   return result
 })
 
+/** Return font color for genome build based on current theme. */
+const fontColor = computed(() => {
+  return theme.global.current.value.dark ? 'white' : 'black'
+})
+
 /** Re-compute ACMG rating from InterVar when the sequence variant changed. */
 watch(
   () => [props.seqvar, acmgRatingStore.storeState],
@@ -239,7 +248,7 @@ onMounted(async () => {
               </template>
             </div>
             <v-btn
-              color="black"
+              :color="fontColor"
               variant="text"
               rounded="sm"
               :prepend-icon="showTerse ? 'mdi-playlist-remove' : 'mdi-playlist-check'"
@@ -248,7 +257,7 @@ onMounted(async () => {
               {{ showTerse ? 'Hide' : 'Show' }} terse mode
             </v-btn>
             <v-btn
-              color="black"
+              :color="fontColor"
               variant="text"
               rounded="sm"
               :prepend-icon="showFailed ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
@@ -270,7 +279,7 @@ onMounted(async () => {
         <v-col cols="3">
           <div class="d-flex flex-column">
             <v-btn
-              color="black"
+              :color="fontColor"
               variant="text"
               rounded="sm"
               prepend-icon="mdi-cloud-upload-outline"
@@ -280,7 +289,7 @@ onMounted(async () => {
               Save to Server
             </v-btn>
             <v-btn
-              color="black"
+              :color="fontColor"
               variant="text"
               rounded="sm"
               prepend-icon="mdi-cloud-download-outline"
@@ -290,7 +299,7 @@ onMounted(async () => {
               Load from Server
             </v-btn>
             <v-btn
-              color="black"
+              :color="fontColor"
               variant="text"
               rounded="sm"
               prepend-icon="mdi-cloud-remove-outline"

diff --git a/frontend/src/components/SeqvarDetails/ClinsigCard/SummarySheet.vue b/frontend/src/components/SeqvarDetails/ClinsigCard/SummarySheet.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+
 import { classColor } from '@/lib/utils'
 
 interface Props {
@@ -12,7 +15,14 @@ const props = withDefaults(defineProps<Props>(), {
   interVaravailable: false
 })
 
+const theme = useTheme()
+
 const emit = defineEmits(['clearAll', 'resetToAuto'])
+
+/** Return font color for genome build based on current theme. */
+const fontColor = computed(() => {
+  return theme.global.current.value.dark ? 'white' : 'black'
+})
 </script>
 
 <template>
@@ -27,7 +37,7 @@ const emit = defineEmits(['clearAll', 'resetToAuto'])
 
     <div class="mt-3 d-flex flex-row">
       <v-btn
-        color="black"
+        :color="fontColor"
         variant="text"
         rounded="sm"
         prepend-icon="mdi-file-outline"
@@ -36,7 +46,7 @@ const emit = defineEmits(['clearAll', 'resetToAuto'])
         Clear
       </v-btn>
       <v-btn
-        color="black"
+        :color="fontColor"
         variant="text"
         rounded="sm"
         prepend-icon="mdi-file-restore-outline"

diff --git a/frontend/src/components/VegaPlot.vue b/frontend/src/components/VegaPlot.vue
@@ -110,10 +110,16 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="plotDivRef" />
+  <div ref="plotDivRef" class="vega-embed" />
 </template>
 
 <style>
+.vega-embed {
+  padding-top: 2px;
+  padding-left: 2px;
+  border-radius: 8px;
+  background-color: #eeeeee;
+}
 /* .vega-embed summary {
   top: -25px !important;
   left: -5px;