From 02cb3cffcf4899519f08a0810b4881ad4122bee2 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Thu, 14 Sep 2023 14:20:24 +0200
Subject: [PATCH] feat: ClinVar and GTEx info cards

---
 frontend/package-lock.json                    | 897 +++++++++++++++++-
 frontend/package.json                         |   2 +
 frontend/src/api/annonars.ts                  |  47 +-
 frontend/src/components/ClinVarFreqPlot.vue   | 136 +++
 frontend/src/components/GtexGenePlot.vue      | 188 ++++
 .../components/VariantDetails/VariantGene.vue |  79 +-
 frontend/src/components/VegaPlot.vue          | 136 +++
 frontend/src/stores/geneInfo.ts               |  20 +-
 frontend/src/stores/variantInfo.ts            |   8 +-
 frontend/src/views/GeneDetailView.vue         | 149 ++-
 frontend/src/views/VariantDetailView.vue      |   2 +-
 11 files changed, 1513 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/components/ClinVarFreqPlot.vue
 create mode 100644 frontend/src/components/GtexGenePlot.vue
 create mode 100644 frontend/src/components/VegaPlot.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1890d042..2ab35697 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,8 @@
         "@mdi/font": "^7.2.96",
         "pinia": "^2.1.6",
         "resize-observer-polyfill": "^1.5.1",
+        "vega": "^5.25.0",
+        "vega-embed": "^6.22.2",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
         "vuetify": "^3.3.14"
@@ -1662,9 +1664,12 @@
     "node_modules/@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.4",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
+      "integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q=="
     },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.1",
@@ -2737,7 +2742,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3403,6 +3407,70 @@
         "@colors/colors": "1.5.0"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/cliui/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3580,6 +3648,227 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
@@ -3748,6 +4037,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3913,8 +4210,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -3929,7 +4225,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -4117,7 +4412,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4600,6 +4894,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-json-patch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.1.tgz",
+      "integrity": "sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ=="
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -4889,6 +5188,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "peer": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-func-name": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
@@ -5341,7 +5649,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -5473,6 +5780,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -5615,7 +5930,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6214,6 +6528,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+      "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -6903,7 +7222,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -6922,20 +7240,17 @@
     "node_modules/node-fetch/node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -8716,6 +9031,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -8837,6 +9161,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
       "version": "3.28.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
@@ -8986,6 +9315,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
@@ -9041,8 +9375,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -9435,7 +9768,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -9526,7 +9858,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -9865,6 +10196,24 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -10285,6 +10634,478 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/vega": {
+      "version": "5.25.0",
+      "resolved": "https://registry.npmjs.org/vega/-/vega-5.25.0.tgz",
+      "integrity": "sha512-lr+uj0mhYlSN3JOKbMNp1RzZBenWp9DxJ7kR3lha58AFNCzzds7pmFa7yXPbtbaGhB7Buh/t6n+Bzk3Y0VnF5g==",
+      "dependencies": {
+        "vega-crossfilter": "~4.1.1",
+        "vega-dataflow": "~5.7.5",
+        "vega-encode": "~4.9.2",
+        "vega-event-selector": "~3.0.1",
+        "vega-expression": "~5.1.0",
+        "vega-force": "~4.2.0",
+        "vega-format": "~1.1.1",
+        "vega-functions": "~5.13.2",
+        "vega-geo": "~4.4.1",
+        "vega-hierarchy": "~4.1.1",
+        "vega-label": "~1.2.1",
+        "vega-loader": "~4.5.1",
+        "vega-parser": "~6.2.0",
+        "vega-projection": "~1.6.0",
+        "vega-regression": "~1.2.0",
+        "vega-runtime": "~6.1.4",
+        "vega-scale": "~7.3.0",
+        "vega-scenegraph": "~4.10.2",
+        "vega-statistics": "~1.9.0",
+        "vega-time": "~2.1.1",
+        "vega-transforms": "~4.10.2",
+        "vega-typings": "~0.24.0",
+        "vega-util": "~1.17.2",
+        "vega-view": "~5.11.1",
+        "vega-view-transforms": "~4.5.9",
+        "vega-voronoi": "~4.2.1",
+        "vega-wordcloud": "~4.1.4"
+      }
+    },
+    "node_modules/vega-canvas": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/vega-canvas/-/vega-canvas-1.2.7.tgz",
+      "integrity": "sha512-OkJ9CACVcN9R5Pi9uF6MZBF06pO6qFpDYHWSKBJsdHP5o724KrsgR6UvbnXFH82FdsiTOff/HqjuaG8C7FL+9Q=="
+    },
+    "node_modules/vega-crossfilter": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vega-crossfilter/-/vega-crossfilter-4.1.1.tgz",
+      "integrity": "sha512-yesvlMcwRwxrtAd9IYjuxWJJuAMI0sl7JvAFfYtuDkkGDtqfLXUcCzHIATqW6igVIE7tWwGxnbfvQLhLNgK44Q==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-dataflow": {
+      "version": "5.7.5",
+      "resolved": "https://registry.npmjs.org/vega-dataflow/-/vega-dataflow-5.7.5.tgz",
+      "integrity": "sha512-EdsIl6gouH67+8B0f22Owr2tKDiMPNNR8lEvJDcxmFw02nXd8juimclpLvjPQriqn6ta+3Dn5txqfD117H04YA==",
+      "dependencies": {
+        "vega-format": "^1.1.1",
+        "vega-loader": "^4.5.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-embed": {
+      "version": "6.22.2",
+      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.22.2.tgz",
+      "integrity": "sha512-JdytShq/QC9q0Q/WzHowkYR5ohN36JsNs3S6OsD7Ufmvite5XmsHKSn6vuI//n99tlrcdmCFfnMZnnZH+IESRQ==",
+      "bundleDependencies": [
+        "yallist"
+      ],
+      "dependencies": {
+        "fast-json-patch": "^3.1.1",
+        "json-stringify-pretty-compact": "^3.0.0",
+        "semver": "^7.5.4",
+        "tslib": "^2.6.1",
+        "vega-interpreter": "^1.0.5",
+        "vega-schema-url-parser": "^2.2.0",
+        "vega-themes": "^2.14.0",
+        "vega-tooltip": "^0.32.0",
+        "yallist": "*"
+      },
+      "peerDependencies": {
+        "vega": "^5.21.0",
+        "vega-lite": "*"
+      }
+    },
+    "node_modules/vega-embed/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vega-embed/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vega-embed/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/vega-embed/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "inBundle": true
+    },
+    "node_modules/vega-encode": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/vega-encode/-/vega-encode-4.9.2.tgz",
+      "integrity": "sha512-c3J0LYkgYeXQxwnYkEzL15cCFBYPRaYUon8O2SZ6O4PhH4dfFTXBzSyT8+gh8AhBd572l2yGDfxpEYA6pOqdjg==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-interpolate": "^3.0.1",
+        "vega-dataflow": "^5.7.5",
+        "vega-scale": "^7.3.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-event-selector": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-3.0.1.tgz",
+      "integrity": "sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A=="
+    },
+    "node_modules/vega-expression": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-5.1.0.tgz",
+      "integrity": "sha512-u8Rzja/cn2PEUkhQN3zUj3REwNewTA92ExrcASNKUJPCciMkHJEjESwFYuI6DWMCq4hQElQ92iosOAtwzsSTqA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-force": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vega-force/-/vega-force-4.2.0.tgz",
+      "integrity": "sha512-aE2TlP264HXM1r3fl58AvZdKUWBNOGkIvn4EWyqeJdgO2vz46zSU7x7TzPG4ZLuo44cDRU5Ng3I1eQk23Asz6A==",
+      "dependencies": {
+        "d3-force": "^3.0.0",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-format": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vega-format/-/vega-format-1.1.1.tgz",
+      "integrity": "sha512-Rll7YgpYbsgaAa54AmtEWrxaJqgOh5fXlvM2wewO4trb9vwM53KBv4Q/uBWCLK3LLGeBXIF6gjDt2LFuJAUtkQ==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-format": "^3.1.0",
+        "d3-time-format": "^4.1.0",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-functions": {
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.13.2.tgz",
+      "integrity": "sha512-YE1Xl3Qi28kw3vdXVYgKFMo20ttd3+SdKth1jUNtBDGGdrOpvPxxFhZkVqX+7FhJ5/1UkDoAYs/cZY0nRKiYgA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-color": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "vega-dataflow": "^5.7.5",
+        "vega-expression": "^5.1.0",
+        "vega-scale": "^7.3.0",
+        "vega-scenegraph": "^4.10.2",
+        "vega-selections": "^5.4.1",
+        "vega-statistics": "^1.8.1",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-geo": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/vega-geo/-/vega-geo-4.4.1.tgz",
+      "integrity": "sha512-s4WeZAL5M3ZUV27/eqSD3v0FyJz3PlP31XNSLFy4AJXHxHUeXT3qLiDHoVQnW5Om+uBCPDtTT1ROx1smGIf2aA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-color": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "vega-canvas": "^1.2.7",
+        "vega-dataflow": "^5.7.5",
+        "vega-projection": "^1.6.0",
+        "vega-statistics": "^1.8.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-hierarchy": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vega-hierarchy/-/vega-hierarchy-4.1.1.tgz",
+      "integrity": "sha512-h5mbrDtPKHBBQ9TYbvEb/bCqmGTlUX97+4CENkyH21tJs7naza319B15KRK0NWOHuhbGhFmF8T0696tg+2c8XQ==",
+      "dependencies": {
+        "d3-hierarchy": "^3.1.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-interpreter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vega-interpreter/-/vega-interpreter-1.0.5.tgz",
+      "integrity": "sha512-po6oTOmeQqr1tzTCdD15tYxAQLeUnOVirAysgVEemzl+vfmvcEP7jQmlc51jz0jMA+WsbmE6oJywisQPu/H0Bg=="
+    },
+    "node_modules/vega-label": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vega-label/-/vega-label-1.2.1.tgz",
+      "integrity": "sha512-n/ackJ5lc0Xs9PInCaGumYn2awomPjJ87EMVT47xNgk2bHmJoZV1Ve/1PUM6Eh/KauY211wPMrNp/9Im+7Ripg==",
+      "dependencies": {
+        "vega-canvas": "^1.2.6",
+        "vega-dataflow": "^5.7.3",
+        "vega-scenegraph": "^4.9.2",
+        "vega-util": "^1.15.2"
+      }
+    },
+    "node_modules/vega-lite": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-5.15.0.tgz",
+      "integrity": "sha512-Eac4VBhdtwbJQWH8m2OaRba/YVZbUHlmTAiPfiF3XIapJ73rcs+gHZBE1DfYgfoGjBN+5YJUMvdgm4UE7j/Ncg==",
+      "peer": true,
+      "dependencies": {
+        "json-stringify-pretty-compact": "~3.0.0",
+        "tslib": "~2.6.2",
+        "vega-event-selector": "~3.0.1",
+        "vega-expression": "~5.1.0",
+        "vega-util": "~1.17.2",
+        "yargs": "~17.7.2"
+      },
+      "bin": {
+        "vl2pdf": "bin/vl2pdf",
+        "vl2png": "bin/vl2png",
+        "vl2svg": "bin/vl2svg",
+        "vl2vg": "bin/vl2vg"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "vega": "^5.24.0"
+      }
+    },
+    "node_modules/vega-lite/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "peer": true
+    },
+    "node_modules/vega-loader": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vega-loader/-/vega-loader-4.5.1.tgz",
+      "integrity": "sha512-qy5x32SaT0YkEujQM2yKqvLGV9XWQ2aEDSugBFTdYzu/1u4bxdUSRDREOlrJ9Km3RWIOgFiCkobPmFxo47SKuA==",
+      "dependencies": {
+        "d3-dsv": "^3.0.1",
+        "node-fetch": "^2.6.7",
+        "topojson-client": "^3.1.0",
+        "vega-format": "^1.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-parser": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.2.0.tgz",
+      "integrity": "sha512-as+QnX8Qxe9q51L1C2sVBd+YYYctP848+zEvkBT2jlI2g30aZ6Uv7sKsq7QTL6DUbhXQKR0XQtzlanckSFdaOQ==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-event-selector": "^3.0.1",
+        "vega-functions": "^5.13.1",
+        "vega-scale": "^7.3.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-projection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vega-projection/-/vega-projection-1.6.0.tgz",
+      "integrity": "sha512-LGUaO/kpOEYuTlul+x+lBzyuL9qmMwP1yShdUWYLW+zXoeyGbs5OZW+NbPPwLYqJr5lpXDr/vGztFuA/6g2xvQ==",
+      "dependencies": {
+        "d3-geo": "^3.1.0",
+        "d3-geo-projection": "^4.0.0",
+        "vega-scale": "^7.3.0"
+      }
+    },
+    "node_modules/vega-regression": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vega-regression/-/vega-regression-1.2.0.tgz",
+      "integrity": "sha512-6TZoPlhV/280VbxACjRKqlE0Nv48z5g4CSNf1FmGGTWS1rQtElPTranSoVW4d7ET5eVQ6f9QLxNAiALptvEq+g==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.3",
+        "vega-statistics": "^1.9.0",
+        "vega-util": "^1.15.2"
+      }
+    },
+    "node_modules/vega-runtime": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/vega-runtime/-/vega-runtime-6.1.4.tgz",
+      "integrity": "sha512-0dDYXyFLQcxPQ2OQU0WuBVYLRZnm+/CwVu6i6N4idS7R9VXIX5581EkCh3pZ20pQ/+oaA7oJ0pR9rJgJ6rukRQ==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-scale": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/vega-scale/-/vega-scale-7.3.0.tgz",
+      "integrity": "sha512-pMOAI2h+e1z7lsqKG+gMfR6NKN2sTcyjZbdJwntooW0uFHwjLGjMSY7kSd3nSEquF0HQ8qF7zR6gs1eRwlGimw==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-scenegraph": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/vega-scenegraph/-/vega-scenegraph-4.10.2.tgz",
+      "integrity": "sha512-R8m6voDZO5+etwNMcXf45afVM3XAtokMqxuDyddRl9l1YqSJfS+3u8hpolJ50c2q6ZN20BQiJwKT1o0bB7vKkA==",
+      "dependencies": {
+        "d3-path": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "vega-canvas": "^1.2.7",
+        "vega-loader": "^4.5.1",
+        "vega-scale": "^7.3.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-schema-url-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-2.2.0.tgz",
+      "integrity": "sha512-yAtdBnfYOhECv9YC70H2gEiqfIbVkq09aaE4y/9V/ovEFmH9gPKaEgzIZqgT7PSPQjKhsNkb6jk6XvSoboxOBw=="
+    },
+    "node_modules/vega-selections": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.4.1.tgz",
+      "integrity": "sha512-EtYc4DvA+wXqBg9tq+kDomSoVUPCmQfS7hUxy2qskXEed79YTimt3Hcl1e1fW226I4AVDBEqTTKebmKMzbSgAA==",
+      "dependencies": {
+        "d3-array": "3.2.2",
+        "vega-expression": "^5.0.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-selections/node_modules/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vega-statistics": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/vega-statistics/-/vega-statistics-1.9.0.tgz",
+      "integrity": "sha512-GAqS7mkatpXcMCQKWtFu1eMUKLUymjInU0O8kXshWaQrVWjPIO2lllZ1VNhdgE0qGj4oOIRRS11kzuijLshGXQ==",
+      "dependencies": {
+        "d3-array": "^3.2.2"
+      }
+    },
+    "node_modules/vega-themes": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.14.0.tgz",
+      "integrity": "sha512-9dLmsUER7gJrDp8SEYKxBFmXmpyzLlToKIjxq3HCvYjz8cnNrRGyAhvIlKWOB3ZnGvfYV+vnv3ZRElSNL31nkA==",
+      "peerDependencies": {
+        "vega": "*",
+        "vega-lite": "*"
+      }
+    },
+    "node_modules/vega-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vega-time/-/vega-time-2.1.1.tgz",
+      "integrity": "sha512-z1qbgyX0Af2kQSGFbApwBbX2meenGvsoX8Nga8uyWN8VIbiySo/xqizz1KrP6NbB6R+x5egKmkjdnyNThPeEWA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-time": "^3.1.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-tooltip": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.32.0.tgz",
+      "integrity": "sha512-Sc4/vZsXDM9nOiHrxc8hfpc9lYc7Nr0FIYYkIi90v2d6IoE6thm6T4Exo2m7cMK4rwevwf6c4/FABwjOMIs4MQ==",
+      "dependencies": {
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-transforms": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.10.2.tgz",
+      "integrity": "sha512-sJELfEuYQ238PRG+GOqQch8D69RYnJevYSGLsRGQD2LxNz3j+GlUX6Pid+gUEH5HJy22Q5L0vsTl2ZNhIr4teQ==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-statistics": "^1.8.1",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-typings": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.24.2.tgz",
+      "integrity": "sha512-fW02GElYoqweCCaPqH6iH44UZnzXiX9kbm1qyecjU3k5s0vtufLI7Yuz/a/uL37mEAqTMQplBBAlk0T9e2e1Dw==",
+      "dependencies": {
+        "@types/geojson": "7946.0.4",
+        "vega-event-selector": "^3.0.1",
+        "vega-expression": "^5.0.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-util": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.17.2.tgz",
+      "integrity": "sha512-omNmGiZBdjm/jnHjZlywyYqafscDdHaELHx1q96n5UOz/FlO9JO99P4B3jZg391EFG8dqhWjQilSf2JH6F1mIw=="
+    },
+    "node_modules/vega-view": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.11.1.tgz",
+      "integrity": "sha512-RoWxuoEMI7xVQJhPqNeLEHCezudsf3QkVMhH5tCovBqwBADQGqq9iWyax3ZzdyX1+P3eBgm7cnLvpqtN2hU8kA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-timer": "^3.0.1",
+        "vega-dataflow": "^5.7.5",
+        "vega-format": "^1.1.1",
+        "vega-functions": "^5.13.1",
+        "vega-runtime": "^6.1.4",
+        "vega-scenegraph": "^4.10.2",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-view-transforms": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/vega-view-transforms/-/vega-view-transforms-4.5.9.tgz",
+      "integrity": "sha512-NxEq4ZD4QwWGRrl2yDLnBRXM9FgCI+vvYb3ZC2+nVDtkUxOlEIKZsMMw31op5GZpfClWLbjCT3mVvzO2xaTF+g==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-scenegraph": "^4.10.2",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-voronoi": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vega-voronoi/-/vega-voronoi-4.2.1.tgz",
+      "integrity": "sha512-zzi+fxU/SBad4irdLLsG3yhZgXWZezraGYVQfZFWe8kl7W/EHUk+Eqk/eetn4bDeJ6ltQskX+UXH3OP5Vh0Q0Q==",
+      "dependencies": {
+        "d3-delaunay": "^6.0.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-wordcloud": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/vega-wordcloud/-/vega-wordcloud-4.1.4.tgz",
+      "integrity": "sha512-oeZLlnjiusLAU5vhk0IIdT5QEiJE0x6cYoGNq1th+EbwgQp153t4r026fcib9oq15glHFOzf81a8hHXHSJm1Jw==",
+      "dependencies": {
+        "vega-canvas": "^1.2.7",
+        "vega-dataflow": "^5.7.5",
+        "vega-scale": "^7.3.0",
+        "vega-statistics": "^1.8.1",
+        "vega-util": "^1.17.1"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
@@ -11205,12 +12026,48 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d563229b..858ecb23 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,8 @@
     "@mdi/font": "^7.2.96",
     "pinia": "^2.1.6",
     "resize-observer-polyfill": "^1.5.1",
+    "vega": "^5.25.0",
+    "vega-embed": "^6.22.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vuetify": "^3.3.14"
diff --git a/frontend/src/api/annonars.ts b/frontend/src/api/annonars.ts
index a77ee321..26f4dc77 100644
--- a/frontend/src/api/annonars.ts
+++ b/frontend/src/api/annonars.ts
@@ -1,4 +1,3 @@
-import { chunks } from '@reactgular/chunks'
 import { API_BASE_PREFIX_ANNONARS } from '@/api/common'
 
 const API_BASE_URL = `${API_BASE_PREFIX_ANNONARS}/`
@@ -42,49 +41,11 @@ export class AnnonarsClient {
     return await response.json()
   }
 
-  /**
-   * Retrieve clinvar-gene information via annonars REST API.
-   *
-   * @param hgncIds Array of HGNC IDs to use, e.g., `["HGNC:26467"]`.
-   * @param chunkSize How many IDs to send in one request.
-   * @returns Promise with an array of gene information objects.
-   */
-  async retrieveGeneClinvarInfos(
-    hgncIds: Array<string>,
-    chunkSize?: number,
-  ): Promise<Array<any>> {
-    const hgncIdChunks = chunks(hgncIds, chunkSize ?? this.defaultChunkSize)
-
-    const promises = hgncIdChunks.map((chunk) => {
-      const url = `${this.baseUrl}/genes/clinvar?hgnc_id=${chunk.join(',')}`
-
-      const headers = {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      }
-      if (this.csrfToken) {
-        headers['X-CSRFToken'] = this.csrfToken
-      }
-
-      return fetch(url, {
-        method: 'GET',
-        credentials: 'same-origin',
-        headers,
-      })
-    })
-
-    const responses = await Promise.all(promises)
-    const results = await Promise.all(
-      responses.map((response) => response.json()),
-    )
-
-    const result = []
-    results.forEach((chunk) => {
-      for (const value of Object.values(chunk.genes)) {
-        result.push(value)
-      }
+  async fetchGeneClinvarInfo(hgncId: string): Promise<any> {
+    const response = await fetch(`${this.apiBaseUrl}genes/clinvar?hgnc_id=${hgncId}`, {
+      method: 'GET'
     })
-    return result
+    return await response.json()
   }
 
   async fetchGenes(query: string): Promise<any> {
diff --git a/frontend/src/components/ClinVarFreqPlot.vue b/frontend/src/components/ClinVarFreqPlot.vue
new file mode 100644
index 00000000..84e18bc0
--- /dev/null
+++ b/frontend/src/components/ClinVarFreqPlot.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import VegaPlot from '@/components/VegaPlot.vue'
+
+const coarseClinsigLabels = ['benign', 'uncertain', 'pathogenic']
+
+const bucketLabels = [
+  'no frequency',
+  '<0.00001',
+  '<0.00025',
+  '<0.0005',
+  '<0.0001',
+  '<0.00025',
+  '<0.0005',
+  '<0.001',
+  '<0.0025',
+  '<0.005',
+  '<0.01',
+  '<0.025',
+  '<0.05',
+  '<0.1',
+  '<0.25',
+  '<0.5',
+  '<1.0'
+]
+
+export interface CountsRecord {
+  /** Coarse clinical significance ID */
+  coarse_clinsig: number
+  /** Counts per bucket */
+  counts: number[]
+}
+
+export interface Props {
+  /** Gene symbol */
+  geneSymbol: string
+  /** Expression records */
+  perFreqCounts: CountsRecord[]
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const vegaData = computed(() => {
+  const values = []
+  for (const record of props?.perFreqCounts || []) {
+    for (let i = 0; i < record.counts.length; i++) {
+      if (record.counts[i] > 0) {
+        values.push({
+          coarseClinsig: coarseClinsigLabels[record.coarse_clinsig],
+          coarseClinsigNo: record.coarse_clinsig,
+          freqBucket: bucketLabels[i],
+          freqBucketNo: i,
+          value: record.counts[i]
+        })
+      }
+    }
+  }
+  if (values.length) {
+    return values
+  } else {
+    return null
+  }
+})
+
+const vegaLayer = [
+  {
+    mark: { type: 'bar', tooltip: true }
+  },
+  {
+    mark: {
+      type: 'text',
+      align: 'center',
+      baseline: 'middle',
+      dy: -10
+    },
+    encoding: {
+      text: { field: 'value', type: 'quantitative', fontSize: 8 }
+    }
+  }
+]
+
+const vegaEncoding = {
+  x: {
+    field: 'freqBucket',
+    title: 'population frequency',
+    type: 'nominal',
+    sort: bucketLabels,
+    axis: { labelAngle: 45 }
+  },
+  y: {
+    field: 'value',
+    scale: { type: 'log' },
+    title: 'variant count',
+    axis: {
+      grid: false,
+      tickExtra: false
+    }
+  },
+  xOffset: {
+    field: 'coarseClinsig',
+    type: 'nominal',
+    sort: coarseClinsigLabels
+  },
+  color: {
+    field: 'coarseClinsig',
+    title: 'clinical sig.',
+    type: 'nominal',
+    sort: coarseClinsigLabels,
+    scale: {
+      domain: coarseClinsigLabels,
+      range: ['#5d9936', '#f5c964', '#b05454']
+    }
+  }
+}
+
+/** Ref to the VegaPlot (for testing). */
+// const vegaPlotRef = ref(null)
+</script>
+
+<template>
+  <figure class="figure border rounded pl-2 pt-2 mr-3 w-100 col">
+    <figcaption class="figure-caption text-center">
+      Population frequency of ClinVar variants
+    </figcaption>
+    <VegaPlot
+      :data-values="vegaData"
+      :encoding="vegaEncoding"
+      :mark="false"
+      :layer="vegaLayer"
+      :width="800"
+      :height="300"
+      renderer="svg"
+    />
+  </figure>
+</template>
diff --git a/frontend/src/components/GtexGenePlot.vue b/frontend/src/components/GtexGenePlot.vue
new file mode 100644
index 00000000..cadcc994
--- /dev/null
+++ b/frontend/src/components/GtexGenePlot.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import VegaPlot from '@/components/VegaPlot.vue'
+
+export interface ExpressionRecord {
+  /** Tissue id */
+  tissue: number
+  /** Detailed tissue id */
+  tissue_detailed: number
+  /** TPM quantiles (0, 0.25, 0.5, 0.75, 1.0) */
+  tpms: number[]
+}
+
+export interface Props {
+  /** Gene symbol */
+  geneSymbol: string
+  /** Expression records */
+  expressionRecords: ExpressionRecord[]
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const tissueLabels = [
+  'Adipose Tissue',
+  'Adrenal Gland',
+  'Bladder',
+  'Blood',
+  'Blood Vessel',
+  'Bone Marrow',
+  'Brain',
+  'Breast',
+  'Cervix Uteri',
+  'Colon',
+  'Esophagus',
+  'Fallopian Tube',
+  'Heart',
+  'Kidney',
+  'Liver',
+  'Lung',
+  'Muscle',
+  'Nerve',
+  'Ovary',
+  'Pancreas',
+  'Pituitary',
+  'Prostate',
+  'Salivary Gland',
+  'Skin',
+  'Small Intestine',
+  'Spleen',
+  'Stomach',
+  'Testis',
+  'Thyroid',
+  'Uterus',
+  'Vagina'
+]
+
+const tissueDetailedLabels = [
+  'Adipose - Subcutaneous',
+  'Adipose - Visceral (Omentum)',
+  'Adrenal Gland',
+  'Artery - Aorta',
+  'Artery - Coronary',
+  'Artery - Tibial',
+  'Bladder',
+  'Brain - Amygdala',
+  'Brain - Anterior cingulate cortex (BA24)',
+  'Brain - Caudate (basal ganglia)',
+  'Brain - Cerebellar Hemisphere',
+  'Brain - Cerebellum',
+  'Brain - Cortex',
+  'Brain - Frontal Cortex (BA9)',
+  'Brain - Hippocampus',
+  'Brain - Hypothalamus',
+  'Brain - Nucleus accumbens (basal ganglia)',
+  'Brain - Putamen (basal ganglia)',
+  'Brain - Spinal cord (cervical c-1)',
+  'Brain - Substantia nigra',
+  'Breast - Mammary Tissue',
+  'Cells - Cultured fibroblasts',
+  'Cells - EBV-transformed lymphocytes',
+  'Cells - Leukemia cell line (CML)',
+  'Cervix - Ectocervix',
+  'Cervix - Endocervix',
+  'Colon - Sigmoid',
+  'Colon - Transverse',
+  'Esophagus - Gastroesophageal Junction',
+  'Esophagus - Mucosa',
+  'Esophagus - Muscularis',
+  'Fallopian Tube',
+  'Heart - Atrial Appendage',
+  'Heart - Left Ventricle',
+  'Kidney - Cortex',
+  'Kidney - Medulla',
+  'Liver',
+  'Lung',
+  'Minor Salivary Gland',
+  'Muscle - Skeletal',
+  'Nerve - Tibial',
+  'Ovary',
+  'Pancreas',
+  'Pituitary',
+  'Prostate',
+  'Salivary Gland',
+  'Skin - Not Sun Exposed (Suprapubic)',
+  'Skin - Sun Exposed (Lower leg)',
+  'Small Intestine - Terminal Ileum',
+  'Spleen',
+  'Stomach',
+  'Testis',
+  'Thyroid',
+  'Uterus',
+  'Vagina',
+  'Whole Blood'
+]
+
+const vegaData = computed(() => {
+  return props?.expressionRecords?.map((record) => ({
+    tissue: tissueLabels[record.tissue],
+    tissueDetailed: tissueDetailedLabels[record.tissue_detailed],
+    lower: record.tpms[0],
+    q1: record.tpms[1],
+    median: record.tpms[2],
+    q3: record.tpms[3],
+    upper: record.tpms[4]
+  }))
+})
+
+const vegaEncoding = {
+  x: {
+    field: 'tissueDetailed',
+    type: 'nominal',
+    title: null,
+    axis: { labelAngle: 45 }
+  }
+}
+
+const vegaLayer = [
+  {
+    mark: { type: 'rule', tooltip: { content: 'data' } },
+    encoding: {
+      y: {
+        field: 'lower',
+        type: 'quantitative',
+        scale: { zero: false },
+        title: 'TPM'
+      },
+      y2: { field: 'upper' }
+    }
+  },
+  {
+    mark: { type: 'bar', size: 14, tooltip: { content: 'data' } },
+    encoding: {
+      y: { field: 'q1', type: 'quantitative' },
+      y2: { field: 'q3' },
+      color: { field: 'tissue', type: 'nominal', legend: null }
+    }
+  },
+  {
+    mark: {
+      type: 'tick',
+      color: 'white',
+      size: 14,
+      tooltip: { content: 'data' }
+    },
+    encoding: {
+      y: { field: 'median', type: 'quantitative' }
+    }
+  }
+]
+</script>
+
+<template>
+  <figure class="figure border rounded pl-2 pt-2 mr-3 w-100 col">
+    <figcaption class="figure-caption text-center">
+      Bulk tissue gene expression for gene {{ props.geneSymbol }}
+    </figcaption>
+    <VegaPlot
+      :data-values="vegaData"
+      :encoding="vegaEncoding"
+      :layer="vegaLayer"
+      :mark="false"
+      :width="1000"
+      :height="300"
+      renderer="svg"
+    />
+  </figure>
+</template>
diff --git a/frontend/src/components/VariantDetails/VariantGene.vue b/frontend/src/components/VariantDetails/VariantGene.vue
index 94968864..64aa08b7 100644
--- a/frontend/src/components/VariantDetails/VariantGene.vue
+++ b/frontend/src/components/VariantDetails/VariantGene.vue
@@ -1,43 +1,12 @@
 <script setup lang="ts">
 export interface Props {
   /** Gene information from annonars. */
-  gene: any,
-  /** Clinvar-Gene information from annonars. */
-  geneClinvar: any
+  gene: any
 }
 
 withDefaults(defineProps<Props>(), {
   gene: null
 })
-
-const variantImpactLabels = [
-  "3' UTR",
-  "5' UTR",
-  'downstream',
-  'frameshift',
-  'inframe indel',
-  'start lost',
-  'intron',
-  'missense',
-  'non-coding',
-  'stop gained',
-  'no alteration',
-  'splice acceptor',
-  'splice donor',
-  'stop lost',
-  'synonymous',
-  'upstream gene',
-]
-
-const clinsigLabels = [
-  'pathogenic',
-  'likely pathogenic',
-  'uncertain significance',
-  'likely benign',
-  'benign',
-]
-
-const clinsigColor = ['#b05454', '#f59f9f', '#f5c964', '#a3f56c', '#5d9936']
 </script>
 
 <template>
@@ -84,52 +53,6 @@ const clinsigColor = ['#b05454', '#f59f9f', '#f5c964', '#a3f56c', '#5d9936']
       </div>
     </div>
   </div>
-
-  <div class="col-6 mb-2 pl-2 pr-0">
-    <div class="card h-100">
-      <div class="card-header pl-2 pt-1 pb-1 pr-2">
-        <span class="font-weight-bolder" style="font-size: 120%">
-          ClinVar By Impact
-        </span>
-      </div>
-      <div
-        class="card-body pb-2 pt-2"
-        v-if="geneClinvar?.per_impact_counts?.length"
-      >
-        <table class="table table-sm">
-          <tr>
-            <thead>
-              <th>impact</th>
-              <th v-for="i in [0, 1, 2, 3, 4]" :key="i">
-                {{ clinsigLabels[i] }}
-              </th>
-              <th>total</th>
-            </thead>
-            <tbody>
-              <tr v-for="row in geneClinvar?.per_impact_counts ?? []" :key="row">
-                <td>
-                  {{ variantImpactLabels[row.impact] }}
-                </td>
-                <td
-                  v-for="(count, idx) in row.counts" :key="idx"
-                  class="text-right"
-                  :style="`background-color: ${clinsigColor[idx]}`"
-                >
-                  {{ count }}
-                </td>
-                <td class="text-right">
-                  {{ row.counts.reduce((a: any, b: any) => a + b, 0) }}
-                </td>
-              </tr>
-            </tbody>
-          </tr>
-        </table>
-      </div>
-      <div v-else class="text-muted text-center font-italic">
-        No ClinVar data for gene.
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped="true">
diff --git a/frontend/src/components/VegaPlot.vue b/frontend/src/components/VegaPlot.vue
new file mode 100644
index 00000000..79174f56
--- /dev/null
+++ b/frontend/src/components/VegaPlot.vue
@@ -0,0 +1,136 @@
+<script setup lang="js">
+/** Simple wrapper around vega for plotting data.
+ *
+ * The "vue-vega" library has not been updated for a long time.
+ */
+import * as vega from 'vega'
+import vegaEmbed from 'vega-embed'
+import { onMounted, computed, ref, watch } from 'vue'
+
+/** Define the props. */
+const props = defineProps({
+  description: String,
+  dataValues: {
+    type: Array,
+    default: () => []
+  },
+  dataName: {
+    type: String,
+    default: 'dataset'
+  },
+  encoding: Object,
+  params: Object,
+  layer: Object,
+  width: {
+    type: [Number, String],
+    default: 300
+  },
+  height: {
+    type: [Number, String],
+    default: 300
+  },
+  mark: {
+    type: [Boolean, Object],
+    default: true
+  },
+  renderer: {
+    type: String,
+    default: 'canvas'
+  },
+  transform: Array
+})
+
+/** The <div> with the plot. */
+const plotDivRef = ref(null)
+/** The vega plot once initialized. */
+const vegaViewRef = ref(null)
+
+/** The vega specification. */
+const vegaLiteSpec = computed(() => {
+  const res = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    width: props.width,
+    height: props.height,
+    description: props.description,
+    params: props.params,
+    data: {
+      values: props.dataValues,
+      name: props.dataName
+    },
+    encoding: props.encoding,
+    transform: props.transform
+  }
+  if (props.mark !== undefined && props.mark !== null && props.mark !== false) {
+    res.mark = props.mark
+  }
+  if (props.layer !== undefined && props.layer !== null) {
+    res.layer = props.layer
+  }
+  return res
+})
+
+/** Make component reactive to props.data changes. */
+watch(
+  () => props.dataValues,
+  (newValue) => {
+    if (vegaViewRef.value !== null) {
+      const changeset = vega
+        .changeset()
+        .remove(() => true)
+        .insert(newValue)
+      vegaViewRef.value.change(props.dataName, changeset).run()
+      vegaViewRef.value.resize()
+    }
+  }
+)
+
+/** `ref` to `vegaEmbed()` result so we can `await` the rendering. */
+const vegaEmbedPromiseRef = ref(null)
+
+/** Create vega-embed plot on mounting. */
+onMounted(() => {
+  const vegaOpts = {
+    renderer: props.renderer
+  }
+  vegaEmbedPromiseRef.value = vegaEmbed(plotDivRef.value, vegaLiteSpec.value, vegaOpts)
+  vegaEmbedPromiseRef.value.then(({ view }) => {
+    vegaViewRef.value = view
+  })
+})
+
+/** Return vegaEmbedPromise. */
+const getVegaEmbedPromise = () => vegaEmbedPromiseRef.value
+
+defineExpose({
+  // exposed to be used in testing (only)
+  getVegaEmbedPromise
+})
+</script>
+
+<template>
+  <div ref="plotDivRef"></div>
+</template>
+
+<style>
+.vega-embed summary {
+  top: -25px !important;
+  left: -5px;
+  right: unset !important;
+}
+.vega-embed.has-actions {
+  padding-right: 10px !important;
+}
+.vega-embed .vega-actions {
+  right: unset !important;
+  top: 10px !important;
+  left: -5px !important;
+}
+.vega-embed .vega-actions::before {
+  left: 5px !important;
+  right: unset !important;
+}
+.vega-embed .vega-actions::after {
+  left: 6px !important;
+  right: unset !important;
+}
+</style>
diff --git a/frontend/src/stores/geneInfo.ts b/frontend/src/stores/geneInfo.ts
index 489a4b0f..ff803960 100644
--- a/frontend/src/stores/geneInfo.ts
+++ b/frontend/src/stores/geneInfo.ts
@@ -11,19 +11,23 @@ import { StoreState } from '@/stores/misc'
 import { AnnonarsClient } from '@/api/annonars'
 
 export const useGeneInfoStore = defineStore('geneInfo', () => {
-  /* The current store state. */
+  /** The current store state. */
   const storeState = ref<StoreState>(StoreState.Initial)
 
-  /* The current gene query. */
+  /** The current gene query. */
   const geneSymbol = ref<string | null>(null)
 
-  /* The retrieved gene data. */
+  /** The retrieved gene data. */
   const geneInfo = ref<any | null>(null)
 
+  /** ClinVar gene-related information from annoars. */
+  const geneClinvar = ref<any | null>(null)
+
   function clearData() {
     storeState.value = StoreState.Initial
     geneSymbol.value = null
     geneInfo.value = null
+    geneClinvar.value = null
   }
 
   const loadData = async (geneSymbolQuery: string) => {
@@ -41,8 +45,17 @@ export const useGeneInfoStore = defineStore('geneInfo', () => {
       const hgncId = geneSymbolQuery
       const client = new AnnonarsClient()
       const data = await client.fetchGeneInfo(hgncId)
+      if (data?.genes === null) {
+        throw new Error('No gene data found.')
+      }
       geneInfo.value = data['genes'][hgncId]
 
+      const geneClinvarData = await client.fetchGeneClinvarInfo(hgncId)
+      if (geneClinvarData?.genes === null) {
+        throw new Error('No gene clinvar data found.')
+      }
+      geneClinvar.value = geneClinvarData['genes'][hgncId]
+
       geneSymbol.value = geneSymbolQuery
       storeState.value = StoreState.Active
     } catch (e) {
@@ -56,6 +69,7 @@ export const useGeneInfoStore = defineStore('geneInfo', () => {
     storeState,
     geneSymbol,
     geneInfo,
+    geneClinvar,
     loadData,
     clearData
   }
diff --git a/frontend/src/stores/variantInfo.ts b/frontend/src/stores/variantInfo.ts
index 79d1c79b..1d7639a2 100644
--- a/frontend/src/stores/variantInfo.ts
+++ b/frontend/src/stores/variantInfo.ts
@@ -12,7 +12,6 @@ import { MehariClient } from '@/api/mehari'
 import { infoFromQuery } from '@/api/utils'
 import { StoreState } from '@/stores/misc'
 
-
 type SmallVariant = any
 type GeneInfo = any
 type GeneClinvarInfo = any
@@ -105,11 +104,11 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
       }
       geneInfo.value = geneData['genes'][hgncId]
 
-      const geneClinvarData = await annonarsClient.fetchGeneClinvarInfo([hgncId])
-      if (geneClinvarData?.genes === null) {
+      const geneClinvarData = await annonarsClient.fetchGeneClinvarInfo(hgncId)
+      if (geneClinvarData?.result === null) {
         throw new Error('No gene clinvar data found.')
       }
-      geneClinvar.value = geneClinvarData[0]
+      geneClinvar.value = geneClinvarData['genes'][hgncId]
 
       variantTerm.value = variantQuery
       smallVariant.value = {
@@ -134,6 +133,7 @@ export const useVariantInfoStore = defineStore('variantInfo', () => {
     variantTerm,
     smallVariant,
     varAnnos,
+    geneClinvar,
     geneInfo,
     txCsq,
     loadData,
diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
index 05507eb8..8ee5d220 100644
--- a/frontend/src/views/GeneDetailView.vue
+++ b/frontend/src/views/GeneDetailView.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { watch, onMounted, ref } from 'vue'
+import { watch, onMounted, ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { StoreState } from '@/stores/misc'
 import { useGeneInfoStore } from '@/stores/geneInfo'
 
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
+import ClinvarFreqPlot from '@/components/ClinVarFreqPlot.vue'
+import GtexGenePlot from '@/components/GtexGenePlot.vue'
 import { roundIt } from '@/api/utils'
 
 export interface Props {
@@ -65,9 +67,60 @@ const SECTIONS = [
   { id: 'disease-annotation', title: 'Disease Annotation' },
   { id: 'acmg-list', title: 'ACMG Supplementary Findings List' },
   { id: 'gene-rifs', title: 'Gene RIFs' },
-  { id: 'locus-specific-databases', title: 'Locus-Specific Databases' }
+  { id: 'locus-specific-databases', title: 'Locus-Specific Databases' },
+  { id: 'clinvar-impact', title: 'Clinvar By Impact' },
+  { id: 'clinvar-frequency', title: 'Clinvar By Frequency' },
+  { id: 'gtex', title: 'GTEx Expression' }
 ]
 
+const variantImpactLabels = [
+  "3' UTR",
+  "5' UTR",
+  'downstream',
+  'frameshift',
+  'inframe indel',
+  'start lost',
+  'intron',
+  'missense',
+  'non-coding',
+  'stop gained',
+  'no alteration',
+  'splice acceptor',
+  'splice donor',
+  'stop lost',
+  'synonymous',
+  'upstream gene'
+]
+
+const clinsigLabels = [
+  'benign', // 0
+  'likely benign', // 1
+  'uncertain signifiance', // 2
+  'likely pathogenic', // 3
+  'pathogenic' // 4
+]
+
+const clinsigColor = ['#5d9936', '#a3f56c', '#f5c964', '#f59f9f', '#b05454']
+
+const perImpactCounts = computed(() => {
+  const result = []
+  const sum = {
+    impact: variantImpactLabels.length - 1,
+    counts: [0, 0, 0, 0, 0]
+  }
+
+  if (geneInfoStore.geneClinvar?.per_impact_counts) {
+    for (const perImpactCount of geneInfoStore.geneClinvar.per_impact_counts) {
+      result.push(perImpactCount)
+      for (let i = 0; i < sum.counts.length; ++i) {
+        sum.counts[i] += perImpactCount.counts[i]
+      }
+    }
+    result.push(sum)
+  }
+  return result
+})
+
 // We need to use refs here because of props mutations in the parent
 const searchTermRef = ref(props.searchTerm)
 const genomeReleaseRef = ref(props.genomeRelease)
@@ -518,6 +571,98 @@ const genomeReleaseRef = ref(props.genomeRelease)
             <div v-else>No locus-specific database available for gene.</div>
           </div>
         </div>
+
+        <div id="clinvar-impact" class="gene-item">
+          <div>
+            <span class="font-weight-bolder" style="font-size: 120%"> ClinVar By Impact </span>
+          </div>
+          <div v-if="geneInfoStore.geneClinvar?.per_impact_counts?.length">
+            <table>
+              <tr>
+                <thead>
+                  <th>impact</th>
+                  <th v-for="i in [0, 1, 2, 3, 4]" :key="i">
+                    {{ clinsigLabels[i] }}
+                  </th>
+                  <th>total</th>
+                </thead>
+                <tbody>
+                  <tr v-for="row in perImpactCounts" :key="row">
+                    <td
+                      :class="{
+                        'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                      }"
+                    >
+                      {{ variantImpactLabels[row.impact] }}
+                    </td>
+                    <td
+                      class="text-right"
+                      :class="{
+                        'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                      }"
+                      v-for="(count, idx) in row.counts"
+                      :style="`background-color: ${clinsigColor[idx]}`"
+                      :key="idx"
+                    >
+                      {{ count }}
+                    </td>
+                    <td
+                      class="text-right"
+                      :class="{
+                        'font-weight-bolder': variantImpactLabels[row.impact] == 'overall'
+                      }"
+                    >
+                      {{ row.counts.reduce((a: any, b: any) => a + b, 0) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </tr>
+            </table>
+          </div>
+          <div v-else class="text-center font-italic">No ClinVar data for gene.</div>
+        </div>
+
+        <div id="clinvar-frequency" class="gene-item">
+          <div>
+            <div>
+              <span class="font-weight-bolder" style="font-size: 120%"> ClinVar By Frequency </span>
+            </div>
+            <div v-if="geneInfoStore.geneClinvar?.per_freq_counts?.length">
+              <ClinvarFreqPlot
+                :gene-symbol="geneInfoStore.geneInfo.hgnc.hgnc_id"
+                :per-freq-counts="geneInfoStore.geneClinvar?.per_freq_counts"
+              />
+            </div>
+            <div v-else class="text-muted text-center font-italic">No ClinVar data for gene.</div>
+          </div>
+        </div>
+
+        <div id="gtex" class="gene-item">
+          <div>
+            <div>
+              <span class="font-weight-bolder" style="font-size: 120%"> GTEx Expression </span>
+              <small>
+                <a
+                  :href="`https://gtexportal.org/home/gene/${geneInfoStore.geneInfo?.gtex.ensembl_gene_id}`"
+                  target="_blank"
+                  v-if="geneInfoStore.geneInfo.gtex"
+                >
+                  <v-icon>mdi-launch</v-icon>
+                  GTEx Portal
+                </a>
+              </small>
+            </div>
+            <div v-if="geneInfoStore.geneInfo.gtex">
+              <GtexGenePlot
+                :gene-symbol="geneInfoStore.geneInfo.hgnc.hgnc_id"
+                :expression-records="geneInfoStore.geneInfo.gtex.records"
+              />
+            </div>
+            <div v-else class="text-muted text-center font-italic">
+              No GTEx data available for gene.
+            </div>
+          </div>
+        </div>
       </div>
 
       <div v-else>
diff --git a/frontend/src/views/VariantDetailView.vue b/frontend/src/views/VariantDetailView.vue
index 45491a2c..fa105802 100644
--- a/frontend/src/views/VariantDetailView.vue
+++ b/frontend/src/views/VariantDetailView.vue
@@ -115,7 +115,7 @@ const genomeReleaseRef = ref(props.genomeRelease)
             </router-link>
           </h3>
           <v-divider />
-          <VariantDetailsGene :gene="variantInfoStore.geneInfo" :gene-clinvar="variantInfoStore.geneClinvar"/>
+          <VariantDetailsGene :gene="variantInfoStore.geneInfo" />
         </div>
 
         <div id="beacon-network" class="variant-item">