diff --git a/package-lock.json b/package-lock.json
index 607b11c3e5c33b34a4066db3d5c2b392328ef641..995e71cce3026856c711ffea35078e562f3bacd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@antv/g6": "^4.8.24",
+ "@apollo/sandbox": "^2.6.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
@@ -36,12 +37,14 @@
"@graphql-codegen/client-preset": "^4.1.0",
"@graphql-eslint/eslint-plugin": "^3.20.1",
"@iconify-json/carbon": "^1.1.18",
+ "@iconify-json/devicon": "^1.1.43",
"@iconify-json/emojione": "^1.1.10",
"@iconify-json/fa": "^1.1.4",
"@iconify-json/fa-regular": "^1.1.5",
"@iconify-json/fa6-regular": "^1.1.13",
"@iconify-json/fa6-solid": "^1.1.13",
"@iconify-json/fluent": "^1.1.35",
+ "@iconify-json/logos": "^1.1.40",
"@iconify-json/tabler": "^1.1.87",
"@parcel/watcher": "^2.4.0",
"@rushstack/eslint-patch": "^1.2.0",
@@ -515,6 +518,37 @@
"tslib": "^2.0.3"
}
},
+ "node_modules/@apollo/sandbox": {
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/@apollo/sandbox/-/sandbox-2.6.0.tgz",
+ "integrity": "sha512-VPaVWt75Pi/G5W/QjxXB5PzgV/k7XTRIo/sb5aaEzTZQAekHzI2nbqh0bCe6YqTqof0SnOj+I1QD+g7ruL+/WQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/whatwg-mimetype": "^3.0.0",
+ "eventemitter3": "3.1.0",
+ "graphql-ws": "^5.9.0",
+ "subscriptions-transport-ws": "^0.11.0",
+ "whatwg-mimetype": "^3.0.0",
+ "zen-observable-ts": "^1.1.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@apollo/sandbox/node_modules/eventemitter3": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
+ "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA=="
+ },
"node_modules/@ardatan/relay-compiler": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz",
@@ -4291,6 +4325,16 @@
"@iconify/types": "*"
}
},
+ "node_modules/@iconify-json/devicon": {
+ "version": "1.1.43",
+ "resolved": "https://registry.npmjs.org/@iconify-json/devicon/-/devicon-1.1.43.tgz",
+ "integrity": "sha512-YOz/uZfh+mIzXTQI4Kh6IKHs5h8QJN9lCDXDejof6r8F3ICAVivJcrDSnR/9pMuecvGsxdB41wipvpC0roCPcg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@iconify/types": "*"
+ }
+ },
"node_modules/@iconify-json/emojione": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/@iconify-json/emojione/-/emojione-1.1.10.tgz",
@@ -4345,6 +4389,16 @@
"@iconify/types": "*"
}
},
+ "node_modules/@iconify-json/logos": {
+ "version": "1.1.40",
+ "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.40.tgz",
+ "integrity": "sha512-F8XapUfZHp9Q53aFvhwFrwmM1NIXOtDV9G0WxIONSu3diiieObmiJQy5oNxla4LgPccyYYHyJQCo0Diys3sIUA==",
+ "dev": true,
+ "license": "CC0-1.0",
+ "dependencies": {
+ "@iconify/types": "*"
+ }
+ },
"node_modules/@iconify-json/tabler": {
"version": "1.1.87",
"resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.87.tgz",
@@ -5052,6 +5106,11 @@
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
},
+ "node_modules/@types/whatwg-mimetype": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+ "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="
+ },
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -5071,6 +5130,11 @@
"@types/node": "*"
}
},
+ "node_modules/@types/zen-observable": {
+ "version": "0.8.3",
+ "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+ "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+ },
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -6205,6 +6269,11 @@
"@babel/core": "^7.0.0"
}
},
+ "node_modules/backo2": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+ "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA=="
+ },
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6480,9 +6549,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001579",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
- "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+ "version": "1.0.30001649",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz",
+ "integrity": "sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==",
"dev": true,
"funding": [
{
@@ -6497,7 +6566,8 @@
"type": "github",
"url": "https://github.com/sponsors/ai"
}
- ]
+ ],
+ "license": "CC-BY-4.0"
},
"node_modules/capital-case": {
"version": "1.0.4",
@@ -8858,7 +8928,6 @@
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.12.1.tgz",
"integrity": "sha512-umt4f5NnMK46ChM2coO36PTFhHouBrK9stWWBczERguwYrGnPNxJ9dimU6IyOBfOkC6Izhkg4H8+F51W/8CYDg==",
- "dev": true,
"engines": {
"node": ">=10"
},
@@ -9740,6 +9809,11 @@
"integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
"dev": true
},
+ "node_modules/iterall": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
+ "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+ },
"node_modules/jiti": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
@@ -12845,6 +12919,47 @@
"url": "https://github.com/sponsors/antfu"
}
},
+ "node_modules/subscriptions-transport-ws": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz",
+ "integrity": "sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==",
+ "deprecated": "The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md",
+ "dependencies": {
+ "backo2": "^1.0.2",
+ "eventemitter3": "^3.1.0",
+ "iterall": "^1.2.1",
+ "symbol-observable": "^1.0.4",
+ "ws": "^5.2.0 || ^6.0.0 || ^7.0.0"
+ },
+ "peerDependencies": {
+ "graphql": "^15.7.2 || ^16.0.0"
+ }
+ },
+ "node_modules/subscriptions-transport-ws/node_modules/eventemitter3": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+ "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+ },
+ "node_modules/subscriptions-transport-ws/node_modules/ws": {
+ "version": "7.5.9",
+ "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+ "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+ "engines": {
+ "node": ">=8.3.0"
+ },
+ "peerDependencies": {
+ "bufferutil": "^4.0.1",
+ "utf-8-validate": "^5.0.2"
+ },
+ "peerDependenciesMeta": {
+ "bufferutil": {
+ "optional": true
+ },
+ "utf-8-validate": {
+ "optional": true
+ }
+ }
+ },
"node_modules/sucrase": {
"version": "3.34.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -12932,6 +13047,14 @@
"tslib": "^2.0.3"
}
},
+ "node_modules/symbol-observable": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13964,7 +14087,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
- "dev": true,
"engines": {
"node": ">=12"
}
@@ -14196,6 +14318,20 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/zen-observable": {
+ "version": "0.8.15",
+ "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+ "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+ },
+ "node_modules/zen-observable-ts": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+ "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+ "dependencies": {
+ "@types/zen-observable": "0.8.3",
+ "zen-observable": "0.8.15"
+ }
}
}
}
diff --git a/package.json b/package.json
index 26caf1c53500b711f9de831ef9a411ca7da2069a..d3598e023eca0bd07239f486767f794d0fc47dc3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
},
"dependencies": {
"@antv/g6": "^4.8.24",
+ "@apollo/sandbox": "^2.6.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
@@ -49,12 +50,14 @@
"@graphql-codegen/client-preset": "^4.1.0",
"@graphql-eslint/eslint-plugin": "^3.20.1",
"@iconify-json/carbon": "^1.1.18",
+ "@iconify-json/devicon": "^1.1.43",
"@iconify-json/emojione": "^1.1.10",
"@iconify-json/fa": "^1.1.4",
"@iconify-json/fa-regular": "^1.1.5",
"@iconify-json/fa6-regular": "^1.1.13",
"@iconify-json/fa6-solid": "^1.1.13",
"@iconify-json/fluent": "^1.1.35",
+ "@iconify-json/logos": "^1.1.40",
"@iconify-json/tabler": "^1.1.87",
"@parcel/watcher": "^2.4.0",
"@rushstack/eslint-patch": "^1.2.0",
diff --git a/src/components/BaseRenderedMarkdown.vue b/src/components/BaseRenderedMarkdown.vue
index 2961e812dd0f48beef62f3ac186e624835720ef4..2dd596f927fa25e97dfef6bdc0e76672a0602c42 100644
--- a/src/components/BaseRenderedMarkdown.vue
+++ b/src/components/BaseRenderedMarkdown.vue
@@ -46,7 +46,39 @@ const sanitizedHTML = computed(() => DOMPurify.sanitize(renderedHTML.value))
</template>
<style scoped>
-#rendered-markdown :deep(*) {
- display: v-bind('inlineContent ? "inline" : "inherit"');
+#rendered-markdown :deep(address),
+:deep(article),
+:deep(aside),
+:deep(blockquote),
+:deep(details),
+:deep(dialog),
+:deep(dd),
+:deep(div),
+:deep(dl),
+:deep(dt),
+:deep(fieldset),
+:deep(figcaption),
+:deep(figure),
+:deep(footer),
+:deep(form),
+:deep(h1),
+:deep(h2),
+:deep(h3),
+:deep(h4),
+:deep(h5),
+:deep(h6),
+:deep(header),
+:deep(hgroup),
+:deep(hr),
+:deep(li),
+:deep(main),
+:deep(nav),
+:deep(ol),
+:deep(p),
+:deep(pre),
+:deep(section),
+:deep(table),
+:deep(ul) {
+ display: v-bind('props.inlineContent ? "inline" : "block"');
}
</style>
diff --git a/src/gql/codegen/gql.ts b/src/gql/codegen/gql.ts
index d4c891c9799f0387f2f600e700f2dea445776a32..3f48bb30fce33871e14101bc0288c165848a0d6c 100644
--- a/src/gql/codegen/gql.ts
+++ b/src/gql/codegen/gql.ts
@@ -23,6 +23,8 @@ const documents = {
"\n query targetByIdQuery($id: ID) {\n targets(where: { id: $id }) {\n id\n name\n altnames\n description\n length\n class\n unit\n chromosomeConnection: parentConnection(\n where: { node: { graphql_type: Chromosome } }\n ) {\n edges {\n properties {\n start\n end\n strand\n }\n node {\n name\n graphql_type\n }\n }\n }\n seq\n genome {\n organism {\n id\n label\n }\n }\n modifications {\n id\n name\n position\n type\n }\n modificationsAggregate {\n count\n }\n interactions {\n duplexes {\n primaryStrandsConnection: strandsConnection(\n where: { edge: { primary: true } }\n ) {\n edges {\n properties {\n start\n end\n primary\n }\n node {\n seq\n parentConnection {\n edges {\n properties {\n start\n end\n }\n }\n }\n }\n }\n }\n secondaryStrandsConnection: strandsConnection(\n where: { edge: { primary: false } }\n ) {\n edges {\n properties {\n start\n end\n primary\n }\n node {\n seq\n parentConnection {\n edges {\n properties {\n start\n end\n }\n }\n }\n }\n }\n }\n index\n }\n modification {\n id\n name\n position\n symbol\n symbol_label\n type\n type_short_label\n }\n guide {\n id\n name\n subclass_label\n class\n }\n }\n chebi_id\n so_id\n url\n secondary_struct_file\n }\n\n guides(where: { modifications_SOME: { target: { id: $id } } }) {\n id\n name\n class\n }\n }\n": types.TargetByIdQueryDocument,
"\n query clusterByIdQuery($id: ID) {\n clusters(where: { id: $id }) {\n id\n guides {\n id\n name\n class\n subclass_label\n modificationsAggregate {\n count\n }\n chromosomeConnection: parentConnection(\n where: { node: { graphql_type: Chromosome } }\n ) {\n edges {\n properties {\n start\n end\n }\n }\n }\n }\n guidesAggregate {\n count\n }\n referenceGuide: guides(options: { limit: 1 }) {\n chromosome: parent(where: { graphql_type: Chromosome }) {\n id\n name\n }\n genome {\n organism {\n label\n id\n }\n }\n }\n }\n }\n": types.ClusterByIdQueryDocument,
"\n query databaseStatisticsQuery {\n organismsAggregate {\n count\n }\n\n allModifications: modifications {\n type\n }\n\n allModificationsCount: modificationsAggregate {\n count\n }\n\n nonOrphanModificationsCount: modificationsAggregate(\n where: { guidesAggregate: { count_GT: 0 } }\n ) {\n count\n }\n\n allGuides: guides {\n subclass\n }\n\n allGuidesCount: guidesAggregate {\n count\n }\n\n nonOrphanGuidesCount: guidesAggregate(\n where: { modificationsAggregate: { count_GT: 0 } }\n ) {\n count\n }\n }\n": types.DatabaseStatisticsQueryDocument,
+ "\n query legalDocumentListQuery {\n documents {\n legals {\n id\n menu_label\n }\n }\n }\n": types.LegalDocumentListQueryDocument,
+ "\n query legalDocumentByIdQuery($id: ID) {\n mdPages(where: { id: $id }) {\n id\n menu_label\n content\n }\n }\n": types.LegalDocumentByIdQueryDocument,
};
/**
@@ -79,6 +81,14 @@ export function graphql(source: "\n query clusterByIdQuery($id: ID) {\n clus
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query databaseStatisticsQuery {\n organismsAggregate {\n count\n }\n\n allModifications: modifications {\n type\n }\n\n allModificationsCount: modificationsAggregate {\n count\n }\n\n nonOrphanModificationsCount: modificationsAggregate(\n where: { guidesAggregate: { count_GT: 0 } }\n ) {\n count\n }\n\n allGuides: guides {\n subclass\n }\n\n allGuidesCount: guidesAggregate {\n count\n }\n\n nonOrphanGuidesCount: guidesAggregate(\n where: { modificationsAggregate: { count_GT: 0 } }\n ) {\n count\n }\n }\n"): (typeof documents)["\n query databaseStatisticsQuery {\n organismsAggregate {\n count\n }\n\n allModifications: modifications {\n type\n }\n\n allModificationsCount: modificationsAggregate {\n count\n }\n\n nonOrphanModificationsCount: modificationsAggregate(\n where: { guidesAggregate: { count_GT: 0 } }\n ) {\n count\n }\n\n allGuides: guides {\n subclass\n }\n\n allGuidesCount: guidesAggregate {\n count\n }\n\n nonOrphanGuidesCount: guidesAggregate(\n where: { modificationsAggregate: { count_GT: 0 } }\n ) {\n count\n }\n }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n query legalDocumentListQuery {\n documents {\n legals {\n id\n menu_label\n }\n }\n }\n"): (typeof documents)["\n query legalDocumentListQuery {\n documents {\n legals {\n id\n menu_label\n }\n }\n }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n query legalDocumentByIdQuery($id: ID) {\n mdPages(where: { id: $id }) {\n id\n menu_label\n content\n }\n }\n"): (typeof documents)["\n query legalDocumentByIdQuery($id: ID) {\n mdPages(where: { id: $id }) {\n id\n menu_label\n content\n }\n }\n"];
export function graphql(source: string) {
return (documents as any)[source] ?? {};
diff --git a/src/gql/codegen/graphql.ts b/src/gql/codegen/graphql.ts
index e1b6b3c82f63a05781e6fb2ebaf050bd80a1b981..5c3bc84d43e6b13dbfe0d78700e513a0541316ad 100644
--- a/src/gql/codegen/graphql.ts
+++ b/src/gql/codegen/graphql.ts
@@ -838,7 +838,7 @@ export type ClustersConnection = {
export type Documents = {
__typename?: 'Documents';
/** The list of legal pages */
- legal?: Maybe<Array<MdPage>>;
+ legals?: Maybe<Array<MdPage>>;
};
export type DocumentsAggregateSelection = {
@@ -8924,6 +8924,18 @@ export type DatabaseStatisticsQueryQueryVariables = Exact<{ [key: string]: never
export type DatabaseStatisticsQueryQuery = { __typename?: 'Query', organismsAggregate: { __typename?: 'OrganismAggregateSelection', count: number }, allModifications: Array<{ __typename?: 'Modification', type?: ModifType | null }>, allModificationsCount: { __typename?: 'ModificationAggregateSelection', count: number }, nonOrphanModificationsCount: { __typename?: 'ModificationAggregateSelection', count: number }, allGuides: Array<{ __typename?: 'Guide', subclass: GuideClass }>, allGuidesCount: { __typename?: 'GuideAggregateSelection', count: number }, nonOrphanGuidesCount: { __typename?: 'GuideAggregateSelection', count: number } };
+export type LegalDocumentListQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type LegalDocumentListQueryQuery = { __typename?: 'Query', documents: Array<{ __typename?: 'Documents', legals?: Array<{ __typename?: 'MDPage', id: string, menu_label: string }> | null }> };
+
+export type LegalDocumentByIdQueryQueryVariables = Exact<{
+ id?: InputMaybe<Scalars['ID']['input']>;
+}>;
+
+
+export type LegalDocumentByIdQueryQuery = { __typename?: 'Query', mdPages: Array<{ __typename?: 'MDPage', id: string, menu_label: string, content: string }> };
+
export const HomeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"homeQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"modificationTypes"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"guideSubclasses"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"targetUnits"},"name":{"kind":"Name","value":"targets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organisms"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"options"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"3"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"shortname"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<HomeQueryQuery, HomeQueryQueryVariables>;
export const ModificationAndTargetSelectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"modificationAndTargetSelectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ModifType"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"targetsBase"},"name":{"kind":"Name","value":"targets"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}},{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"type_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"genome"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"organism"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"modificationsBase"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"genome"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"organism"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"organismIds"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"organismsBase"},"name":{"kind":"Name","value":"organisms"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"organisms"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"tableEntries_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modification"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"type_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"modificationTypes"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name_IN"},"value":{"kind":"Variable","name":{"kind":"Name","value":"targetNames"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ModificationAndTargetSelectionQueryQuery, ModificationAndTargetSelectionQueryQueryVariables>;
@@ -8934,4 +8946,6 @@ export const ModificationByIdQueryDocument = {"kind":"Document","definitions":[{
export const GuideByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"guideByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"altnames"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"strand"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"graphql_type"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"host_genes"}},{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"boxConnections"},"name":{"kind":"Name","value":"featuresConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"NOT"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"class"},"value":{"kind":"EnumValue","value":"DuplexFragment"}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HasFeature"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"annotation"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"interactions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"duplexes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"primaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":true}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"secondaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":false}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"symbol"}},{"kind":"Field","name":{"kind":"Name","value":"symbol_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"target"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"cluster"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"clusterAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"isoform"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"isoformAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"chebi_id"}},{"kind":"Field","name":{"kind":"Name","value":"so_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guides_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}}]}}]}}]} as unknown as DocumentNode<GuideByIdQueryQuery, GuideByIdQueryQueryVariables>;
export const TargetByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"targetByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"targets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"altnames"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"length"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"unit"}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"strand"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"graphql_type"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","name":{"kind":"Name","value":"interactions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"duplexes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"primaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":true}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"secondaryStrandsConnection"},"name":{"kind":"Name","value":"strandsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"edge"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"primary"},"value":{"kind":"BooleanValue","value":false}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"primary"}}]}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"seq"}},{"kind":"Field","name":{"kind":"Name","value":"parentConnection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"index"}}]}},{"kind":"Field","name":{"kind":"Name","value":"modification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"symbol"}},{"kind":"Field","name":{"kind":"Name","value":"symbol_label"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"type_short_label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guide"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","name":{"kind":"Name","value":"class"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"chebi_id"}},{"kind":"Field","name":{"kind":"Name","value":"so_id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"secondary_struct_file"}}]}},{"kind":"Field","name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modifications_SOME"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"target"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}}]}}]}}]} as unknown as DocumentNode<TargetByIdQueryQuery, TargetByIdQueryQueryVariables>;
export const ClusterByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"clusterByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"clusters"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"class"}},{"kind":"Field","name":{"kind":"Name","value":"subclass_label"}},{"kind":"Field","name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"chromosomeConnection"},"name":{"kind":"Name","value":"parentConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"node"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"properties"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"referenceGuide"},"name":{"kind":"Name","value":"guides"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"options"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"chromosome"},"name":{"kind":"Name","value":"parent"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"graphql_type"},"value":{"kind":"EnumValue","value":"Chromosome"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"genome"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organism"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ClusterByIdQueryQuery, ClusterByIdQueryQueryVariables>;
-export const DatabaseStatisticsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"databaseStatisticsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModifications"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guidesAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuides"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modificationsAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<DatabaseStatisticsQueryQuery, DatabaseStatisticsQueryQueryVariables>;
\ No newline at end of file
+export const DatabaseStatisticsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"databaseStatisticsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"organismsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModifications"},"name":{"kind":"Name","value":"modifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanModificationsCount"},"name":{"kind":"Name","value":"modificationsAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"guidesAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuides"},"name":{"kind":"Name","value":"guides"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subclass"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"allGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}},{"kind":"Field","alias":{"kind":"Name","value":"nonOrphanGuidesCount"},"name":{"kind":"Name","value":"guidesAggregate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"modificationsAggregate"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"count_GT"},"value":{"kind":"IntValue","value":"0"}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode<DatabaseStatisticsQueryQuery, DatabaseStatisticsQueryQueryVariables>;
+export const LegalDocumentListQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"legalDocumentListQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"documents"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"legals"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"menu_label"}}]}}]}}]}}]} as unknown as DocumentNode<LegalDocumentListQueryQuery, LegalDocumentListQueryQueryVariables>;
+export const LegalDocumentByIdQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"legalDocumentByIdQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mdPages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"menu_label"}},{"kind":"Field","name":{"kind":"Name","value":"content"}}]}}]}}]} as unknown as DocumentNode<LegalDocumentByIdQueryQuery, LegalDocumentByIdQueryQueryVariables>;
\ No newline at end of file
diff --git a/src/gql/queries.ts b/src/gql/queries.ts
index 865fe3172def4a328e12c8402c1c75523ffdd6ca..cf7a3adf4cca63a9b4a27b4cfb3608f9061da828 100644
--- a/src/gql/queries.ts
+++ b/src/gql/queries.ts
@@ -838,3 +838,30 @@ export const databaseStatisticsQuery = graphql(/* GraphQL */ `
}
}
`)
+
+/**
+ * Get the list of legal documents of the website
+ */
+export const legalDocumentListQuery = graphql(/* GraphQL */ `
+ query legalDocumentListQuery {
+ documents {
+ legals {
+ id
+ menu_label
+ }
+ }
+ }
+`)
+
+/**
+ * Get a legal document by its ID
+ */
+export const legalDocumentByIdQuery = graphql(/* GraphQL */ `
+ query legalDocumentByIdQuery($id: ID) {
+ mdPages(where: { id: $id }) {
+ id
+ menu_label
+ content
+ }
+ }
+`)
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f0daf9bb50fcd7d8be0fe1a0c82e027d4d8cbbb
--- /dev/null
+++ b/src/layouts/FooterLayout.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Vue imports
+ */
+import { computed, ref } from 'vue'
+/**
+ * Components imports
+ */
+import TieredMenu from 'primevue/tieredmenu'
+import Button from 'primevue/button'
+import IconFa6SolidAddressCard from '~icons/fa6-solid/address-card'
+import IconFa6SolidChevronUp from '~icons/fa6-solid/chevron-up'
+/**
+ * Other 3rd-party imports
+ */
+import { useQuery } from '@urql/vue'
+/**
+ * Types imports
+ */
+import type { MenuItem } from 'primevue/menuitem'
+/**
+ * Utils imports
+ */
+import { legalDocumentListQuery } from '@/gql/queries'
+
+/**
+ * Reactive urql GraphQL query object, updated with query state & response.
+ */
+const gqlQuery = useQuery({
+ query: legalDocumentListQuery
+})
+
+/**
+ * The list of legal documents
+ */
+const legalDocuments = computed(() => gqlQuery.data.value?.documents[0]?.legals)
+
+/**
+ * The items to display in the legal documents menu.
+ */
+const legalDocumentsMenuItems = computed<MenuItem[] | undefined>(() =>
+ legalDocuments.value?.map((legalDocument) => ({
+ label: legalDocument.menu_label,
+ routerDest: { name: 'legal', params: { documentId: legalDocument.id } }
+ }))
+)
+
+/**
+ * Legal documents menu `TieredMenu` component.
+ */
+const legalMenu = ref<TieredMenu>()
+
+/**
+ * Used to toggle the legal documents menu.
+ * @param event The mouse event which triggered the toggle.
+ */
+const toggleLegalMenu = (event: MouseEvent) => legalMenu.value?.toggle(event)
+</script>
+
+<template>
+ <div class="flex min-h-screen flex-col">
+ <slot></slot>
+ <footer
+ class="flex h-20 w-full items-center justify-center bg-slate-800 p-2"
+ >
+ <Button text class="!block !text-white">
+ <RouterLink :to="{ name: 'contact' }">
+ <icon-fa6-solid-address-card class="mr-2 inline" />
+ <span>Contact us</span>
+ </RouterLink>
+ </Button>
+
+ <Button
+ aria-haspopup="true"
+ aria-controls="overlay_tieredmenu"
+ text
+ class="!block !text-white"
+ @click="toggleLegalMenu"
+ >
+ Legal <icon-fa6-solid-chevron-up class="ml-2 inline" />
+ </Button>
+ <TieredMenu
+ id="overlay_tieredmenu"
+ ref="legalMenu"
+ :model="legalDocumentsMenuItems"
+ popup
+ >
+ <template #item="{ item, props }">
+ <RouterLink
+ v-if="item.routerDest"
+ :to="item.routerDest"
+ v-bind="props.action"
+ >
+ <span v-bind="props.label">{{ item.label }}</span>
+ </RouterLink>
+ </template>
+ </TieredMenu>
+ </footer>
+ </div>
+</template>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index e1a386cbffa3756e94ec39084e0c0b09e4f9a389..e0442560bc76b768347037dd80b19dd81b5c24b7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -3,12 +3,12 @@
* Components imports
*/
import SearchBar from '@/components/SearchBar.vue'
+import FooterLayout from './FooterLayout.vue'
import Image from 'primevue/image'
import Menubar from 'primevue/menubar'
import IconFa6SolidTable from '~icons/fa6-solid/table'
import IconFa6SolidDatabase from '~icons/fa6-solid/database'
import IconFa6SolidCircleQuestion from '~icons/fa6-solid/circle-question'
-import IconFa6SolidAddressCard from '~icons/fa6-solid/address-card'
import IconFa6SolidMagnifyingGlass from '~icons/fa6-solid/magnifying-glass'
import IconFa6SolidCircleXmark from '~icons/fa6-solid/circle-xmark'
import IconFa6SolidArrowRight from '~icons/fa6-solid/arrow-right'
@@ -22,10 +22,29 @@ import type { MenuItem } from 'primevue/menuitem'
*/
import logoUrl from '@/assets/images/logo.svg'
+/**
+ * A menu item, with an additional icon as a component.
+ */
interface CustomMenuItem extends MenuItem {
+ /** The menu item icon as a component. */
iconComponent: Component
}
+/**
+ * Component props.
+ */
+defineProps<{
+ /** Whether to add some padding (`2rem` at the top and `0.5rem` elsewhere) to
+ * the `<main>` element holding the slot content. */
+ padded?: boolean
+ /** Whether to use a `flex` layout for the `<main>` element holding the
+ * slot content. */
+ flex?: boolean
+}>()
+
+/**
+ * The items to display in the navigation menu.
+ */
const menuItems: CustomMenuItem[] = [
{
label: 'Data Table',
@@ -41,61 +60,66 @@ const menuItems: CustomMenuItem[] = [
label: 'Help',
iconComponent: IconFa6SolidCircleQuestion,
routerDest: { name: 'about' }
- },
- {
- label: 'Contact',
- iconComponent: IconFa6SolidAddressCard,
- routerDest: { name: 'contact' }
}
]
</script>
<template>
- <header class="flex h-32 justify-between gap-4 px-4 shadow">
- <RouterLink :to="{ name: 'home' }" class="flex items-center">
- <Image
- alt="SnoBoard logo"
- :pt="{ image: { class: 'max-h-24' } }"
- :src="logoUrl"
- ></Image>
- </RouterLink>
- <div class="flex items-center gap-4">
- <Menubar :model="menuItems">
- <template #item="{ item, props }">
- <RouterLink
- v-if="item.routerDest"
- :to="item.routerDest"
- :="props.action"
- >
- <component :is="item.iconComponent || ''" :="props.icon" />
- <span :="props.label">{{ item.label }}</span>
- </RouterLink>
- </template>
- </Menubar>
- <SearchBar disabled>
- <template #label>
- <span>Search</span>
- </template>
+ <FooterLayout>
+ <header class="flex h-32 justify-between gap-4 px-4 shadow">
+ <RouterLink :to="{ name: 'home' }" class="flex items-center">
+ <Image
+ alt="SnoBoard logo"
+ :pt="{ image: { class: 'max-h-24' } }"
+ :src="logoUrl"
+ ></Image>
+ </RouterLink>
- <template #icon="{ className }">
- <icon-fa6-solid-magnifying-glass :class="className" />
- </template>
+ <div class="flex items-center gap-4">
+ <Menubar :model="menuItems">
+ <template #item="{ item, props }">
+ <RouterLink
+ v-if="item.routerDest"
+ :to="item.routerDest"
+ :="props.action"
+ >
+ <component :is="item.iconComponent || ''" :="props.icon" />
+ <span :="props.label">{{ item.label }}</span>
+ </RouterLink>
+ </template>
+ </Menubar>
- <template #clear-icon="{ clearSearch, searchEmpty, className }">
- <icon-fa6-solid-circle-xmark
- v-show="!searchEmpty"
- :class="[className, 'cursor-pointer transition-all']"
- @click="clearSearch()"
- />
- </template>
+ <SearchBar disabled>
+ <template #label>
+ <span>Search</span>
+ </template>
+ <template #icon="{ className }">
+ <icon-fa6-solid-magnifying-glass :class="className" />
+ </template>
+ <template #clear-icon="{ clearSearch, searchEmpty, className }">
+ <icon-fa6-solid-circle-xmark
+ v-show="!searchEmpty"
+ :class="[className, 'cursor-pointer transition-all']"
+ @click="clearSearch()"
+ />
+ </template>
+ <template #button>
+ <icon-fa6-solid-arrow-right />
+ </template>
+ </SearchBar>
+ </div>
+ </header>
- <template #button>
- <icon-fa6-solid-arrow-right />
- </template>
- </SearchBar>
- </div>
- </header>
- <main class="mt-8 p-2">
- <slot></slot>
- </main>
+ <main
+ :class="[
+ 'flex-grow',
+ {
+ 'flex flex-col': flex,
+ 'p-2 pt-8': padded
+ }
+ ]"
+ >
+ <slot></slot>
+ </main>
+ </FooterLayout>
</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index b4ee5e29926bef1e737617b2fc11096f94d53a46..aa84efe377271b63fb200f5382cd357001020e22 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -107,14 +107,19 @@ const router = createRouter({
!to.query.id ||
!parseInt(to.query.id)
) {
- router.replace({ name: 'lost' })
+ router.replace({ name: 'notFound' })
}
}
},
{
- path: '/details/',
- name: 'details',
+ path: '/details',
children: [
+ {
+ path: '',
+ redirect: {
+ name: 'notFound'
+ }
+ },
{
path: 'guide',
name: 'guideDetails',
@@ -125,7 +130,7 @@ const router = createRouter({
}),
beforeEnter: (to) => {
if (typeof to.query.id !== 'string') {
- router.replace({ name: 'lost' })
+ router.replace({ name: 'notFound' })
}
}
},
@@ -139,7 +144,7 @@ const router = createRouter({
}),
beforeEnter: (to) => {
if (typeof to.query.id !== 'string') {
- router.replace({ name: 'lost' })
+ router.replace({ name: 'notFound' })
}
}
},
@@ -153,7 +158,7 @@ const router = createRouter({
}),
beforeEnter: (to) => {
if (typeof to.query.id !== 'string') {
- router.replace({ name: 'lost' })
+ router.replace({ name: 'notFound' })
}
}
},
@@ -164,7 +169,7 @@ const router = createRouter({
props: (to) => ({ clusterId: to.query.id }),
beforeEnter: (to) => {
if (typeof to.query.id !== 'string') {
- router.replace({ name: 'lost' })
+ router.replace({ name: 'notFound' })
}
}
}
@@ -210,10 +215,19 @@ const router = createRouter({
title: 'Contact'
}
},
+ {
+ path: '/legal/:documentId',
+ name: 'legal',
+ meta: {
+ title: 'Legal document'
+ },
+ props: true,
+ component: () => import('@/views/LegalView.vue')
+ },
{
path: '/:unknownPath(.*)*',
- name: 'lost',
- component: () => import('@/views/LostView.vue'),
+ name: 'notFound',
+ component: () => import('@/views/404View.vue'),
meta: {
title: "You're lost !"
},
diff --git a/src/views/LostView.vue b/src/views/404View.vue
similarity index 90%
rename from src/views/LostView.vue
rename to src/views/404View.vue
index fc3fe2b38222618789a1879155e7c856570eb5cd..cfbb9fabcf6f49cabdbb477f82007dbdf144cef2 100644
--- a/src/views/LostView.vue
+++ b/src/views/404View.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1>Looks like you're lost...</h1>
<h2>404</h2>
</MainLayout>
diff --git a/src/views/APIView.vue b/src/views/APIView.vue
index 0bb841b4cc25232820e970b413749ded3ae5c7c6..73bdbca3897e35d921c08f8c947aed8adb05c0a8 100644
--- a/src/views/APIView.vue
+++ b/src/views/APIView.vue
@@ -1,29 +1,150 @@
<script setup lang="ts">
+/**
+ * Vue imports.
+ */
+import { computed, onMounted, ref } from 'vue'
/**
* Components imports
*/
import MainLayout from '@/layouts/MainLayout.vue'
import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Checkbox from 'primevue/checkbox'
+import IconDeviconNeo4j from '~icons/devicon/neo4j'
+import IconLogosGraphql from '~icons/logos/graphql'
+/**
+ * Other 3rd-party imports
+ */
+import { ApolloSandbox } from '@apollo/sandbox'
+import { useStorage } from '@vueuse/core'
+
+/**
+ * Reactive local storage entry to show or not the info dialog at landing.
+ */
+const skipInfoDialog = useStorage('skipInfoDialog', false)
+
+/**
+ * Whether to show the info dialog.
+ */
+const isInfoDialogShown = ref(!skipInfoDialog.value)
+
+/**
+ * Wether to remember to not show the info dialog again.
+ */
+const shouldNotShowInfoDialogAgain = ref(false)
+
+/**
+ * Callback to close the info dialog & update local storage if necessary.
+ */
+const closeInfoDialog = () => {
+ isInfoDialogShown.value = false
+ skipInfoDialog.value = shouldNotShowInfoDialogAgain.value
+}
+
+/**
+ * API URL
+ */
+const ApiUrl = computed(() => `${import.meta.env.VITE_API_URL}/graphql`)
+
+/**
+ * Mounting hook, creates the embedded Apollo Sandbox.
+ */
+onMounted(
+ () =>
+ new ApolloSandbox({
+ target: '#embedded-sandbox',
+ initialEndpoint: ApiUrl.value,
+ initialState: {
+ document:
+ 'query ExampleQuery {%0A%20 modifications {%0A%20%20%20 name%0A%20 }%0A}%0A'
+ }
+ })
+)
</script>
<template>
- <MainLayout>
- <div class="text-center">
- <h1 class="mb-16 text-4xl font-bold">API documentation</h1>
- <div class="flex flex-col items-center gap-16 text-xl">
- There is 2 ways of viewing the API documentation :
- <div class="flex items-center gap-4 font-bold italic">
- <a href="/api/docs"
- ><Button :pt="{ root: { class: '!text-2xl' } }"
- >Swagger UI</Button
- ></a
- >
- or
- <a href="/api/redoc"
- ><Button :pt="{ root: { class: '!text-2xl' } }">Redoc</Button></a
- >
- </div>
+ <MainLayout flex>
+ <div
+ id="embedded-sandbox"
+ class="flex flex-grow flex-col [&>iframe]:flex-grow"
+ />
+ <Dialog
+ v-model:visible="isInfoDialogShown"
+ :draggable="false"
+ modal
+ header="SnoBoard API"
+ class="mx-4 max-w-md text-justify"
+ :pt="{
+ mask: {
+ class: 'api-dialog-mask',
+ style: {
+ backdropFilter: 'blur(5px)',
+ transition: 'backdrop-filter 150ms ease'
+ }
+ },
+ transition: {
+ leaveToClass: 'api-dialog-leaving'
+ }
+ }"
+ @hide="closeInfoDialog"
+ >
+ <p>
+ <em class="font-bold not-italic text-lime-700">SnoBoard</em> is built
+ upon a
+ <a
+ href="https://neo4j.com/"
+ class="my-0.5 inline-block rounded bg-slate-200 px-0.5 font-medium transition-all hover:bg-slate-300"
+ >
+ <icon-devicon-neo4j class="inline text-xl" />
+ Neo4j
+ </a>
+ database, which is accessed via a
+ <a
+ href="https://graphql.org/"
+ class="my-0.5 inline-block rounded bg-slate-200 px-0.5 font-medium transition-all hover:bg-slate-300"
+ >
+ <icon-logos-graphql class="inline" />
+ GraphQL
+ </a>
+ API.
+ </p>
+ <p>
+ This API can be browsed using the
+ <em class="font-semibold not-italic text-[#1b2240]">Apollo Sandbox</em>
+ embedded in this page, a quick guide to using it can be found
+ <a
+ href="https://www.apollographql.com/tutorials/intro-typescript/05-apollo-explorer"
+ class="whitespace-nowrap font-semibold italic text-[#1b2240] hover:underline"
+ >here</a
+ >.
+ </p>
+ <p class="my-4">
+ For programmatic use of the API, the GraphQL endpoint is accessible at:
+ </p>
+ <code
+ class="mx-auto my-4 block w-max rounded bg-slate-200 px-2 py-1 font-semibold"
+ >
+ {{ ApiUrl }}
+ </code>
+ <Button
+ label="Got it !"
+ class="mx-auto my-4 !flex"
+ @click="closeInfoDialog"
+ />
+ <div class="flex items-center justify-center gap-2">
+ <Checkbox
+ v-model="shouldNotShowInfoDialogAgain"
+ input-id="dont-show-ui-tour"
+ binary
+ />
+ <label for="dont-show-ui-tour">Don't show again</label>
</div>
- </div>
+ </Dialog>
</MainLayout>
</template>
+
+<style>
+.api-dialog-mask:has(> .api-dialog-leaving) {
+ backdrop-filter: none !important;
+}
+</style>
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index d87484ee728d67e530e7ebbef991a397ddf759cc..4ee97f369e2e1ba63658a914b79b9ee942ae296c 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1>About</h1>
</MainLayout>
</template>
diff --git a/src/views/ClusterView.vue b/src/views/ClusterView.vue
index 67ec26b284909824d90dae8c5408747869ec245e..769549f121408f4d998e8c48c0bcd030c1d7dce8 100644
--- a/src/views/ClusterView.vue
+++ b/src/views/ClusterView.vue
@@ -149,7 +149,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
Cluster
</h1>
@@ -159,7 +159,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
<Panel
toggleable
- class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+ class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
:pt="{
header: { class: '!bg-slate-50' },
toggler: { class: 'hover:!bg-slate-100' }
@@ -276,7 +276,7 @@ const linkListGuides = computed<LinkListItemModel[]>(
</div>
</Panel>
- <Panel toggleable class="mx-auto max-w-6xl">
+ <Panel toggleable class="mx-auto mb-16 max-w-6xl">
<template #header="scope">
<icon-fa6-solid-list :class="scope.class" />
<span :class="scope.class"
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index ea41db93a99652429f6af74f522e516ff308b559..45171292ef2fe708d0ca80b22b34252127d9de23 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -6,7 +6,27 @@ import MainLayout from '@/layouts/MainLayout.vue'
</script>
<template>
- <MainLayout>
- <h1>Contact</h1>
+ <MainLayout padded>
+ <section
+ ref="aboutSectionElement"
+ class="prose prose-lg prose-slate mx-auto mb-8 pt-8 prose-headings:text-center prose-p:text-justify"
+ >
+ <h1>Contact us</h1>
+
+ <p>
+ You can contact us by sending an email to
+ <a href="mailto:support.bioinfo.genotoul@inrae.fr">
+ support.bioinfo.genotoul@inrae.fr
+ </a>
+ .
+ </p>
+
+ <blockquote class="text-slate-400">
+ Please include the
+ <strong class="text-slate-700">[snoboard-support]</strong> tag at the
+ beginning of the email's subject, to ensure targetting the appropriate
+ service and get a faster response.
+ </blockquote>
+ </section>
</MainLayout>
</template>
diff --git a/src/views/DataTableView.vue b/src/views/DataTableView.vue
index 1e776f9891a490ed801f3b7255e15f67eb7db982..cfe0187a9c37b1478f08edb3e4e64bc3774aa7a0 100644
--- a/src/views/DataTableView.vue
+++ b/src/views/DataTableView.vue
@@ -843,7 +843,7 @@ const scrollToTableTop = () =>
<template>
<MainLayout>
- <div class="table-wrapper">
+ <div class="table-wrapper mb-16">
<DataTable
v-model:filters="filters"
:global-filter-fields="globalFilterColumnFields"
diff --git a/src/views/GuideView.vue b/src/views/GuideView.vue
index d1ec653e8d607f6db24fa3533ebdabaf94e11339..a8ffd4ebaddbd88892a6d50eb77d3248eabcc2af 100644
--- a/src/views/GuideView.vue
+++ b/src/views/GuideView.vue
@@ -427,7 +427,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
{{ guide?.name }}
</h1>
@@ -476,7 +476,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
<Panel
toggleable
- class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+ class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
:pt="{
header: { class: '!bg-slate-50' },
toggler: { class: 'hover:!bg-slate-100' }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e842271e52445f370df31c9680c0f2f1a875a76d..5b671044c01428f37b437488aff715e25d991929 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,14 +2,15 @@
/**
* Vue imports
*/
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
/**
* Components imports
*/
-import Image from 'primevue/image'
-import Menubar from 'primevue/menubar'
+import FooterLayout from '@/layouts/FooterLayout.vue'
import SearchBar from '@/components/SearchBar.vue'
import BaseRenderedMarkdown from '@/components/BaseRenderedMarkdown.vue'
+import Image from 'primevue/image'
+import Menubar from 'primevue/menubar'
import IconFa6SolidMagnifyingGlass from '~icons/fa6-solid/magnifying-glass'
import IconFa6SolidCircleXmark from '~icons/fa6-solid/circle-xmark'
import IconFa6SolidArrowRight from '~icons/fa6-solid/arrow-right'
@@ -20,6 +21,8 @@ import IconFa6SolidTable from '~icons/fa6-solid/table'
import IconFa6SolidDatabase from '~icons/fa6-solid/database'
import IconFa6SolidPaw from '~icons/fa6-solid/paw'
import IconFa6SolidBullseye from '~icons/fa6-solid/bullseye'
+import IconTablerCircleArrowDown from '~icons/tabler/circle-arrow-down'
+import IconTablerCircleArrowDownFilled from '~icons/tabler/circle-arrow-down-filled'
import IconSnoboardGuide from '~icons/snoboard/guide'
import IconSnoboardModification from '~icons/snoboard/modification'
/**
@@ -353,76 +356,97 @@ const menuItems = computed<MenuItem[]>(() => [
]
}
])
+
+const aboutSectionElement = ref<HTMLElement>()
</script>
<template>
- <main class="mx-auto max-w-6xl px-4 text-center 2xl:max-w-7xl">
- <Image
- class="mx-auto my-8 inline-block w-3/4 max-w-sm sm:my-16"
- alt="SnoBoard logo"
- :src="logoUrl"
- />
-
- <SearchBar disabled class="mx-auto mb-16 max-w-xl 2xl:mb-16">
- <template #icon="{ className }">
- <icon-fa6-solid-magnifying-glass :class="className" />
- </template>
-
- <template #clear-icon="{ clearSearch, searchEmpty, className }">
- <icon-fa6-solid-circle-xmark
- v-show="!searchEmpty"
- :class="[className, 'cursor-pointer transition-all']"
- @click="clearSearch()"
- />
- </template>
-
- <template #label>
- <span>Search</span>
- </template>
-
- <template #hint>
- <span>Examples: ...</span>
- </template>
-
- <template #button>
- <icon-fa6-solid-arrow-right />
- </template>
- </SearchBar>
-
- <div class="flex justify-center">
- <Menubar
- :model="menuItems"
- :pt="{
- submenu: {
- style: {
- minWidth: 'max-content'
- }
- },
- separator: {
- style: {
- margin: '0 1rem',
- border: `solid ${tailwindDefaultColors['slate'][300]} 1px`,
- height: '3rem',
- borderRadius: '999999px'
+ <FooterLayout>
+ <main class="mx-auto h-screen max-w-6xl px-4 text-center 2xl:max-w-7xl">
+ <Image
+ class="mx-auto my-8 inline-block w-3/4 max-w-sm sm:my-16"
+ alt="SnoBoard logo"
+ :src="logoUrl"
+ />
+ <SearchBar disabled class="mx-auto mb-16 max-w-xl 2xl:mb-16">
+ <template #icon="{ className }">
+ <icon-fa6-solid-magnifying-glass :class="className" />
+ </template>
+ <template #clear-icon="{ clearSearch, searchEmpty, className }">
+ <icon-fa6-solid-circle-xmark
+ v-show="!searchEmpty"
+ :class="[className, 'cursor-pointer transition-all']"
+ @click="clearSearch()"
+ />
+ </template>
+ <template #label>
+ <span>Search</span>
+ </template>
+ <template #hint>
+ <span>Examples: ...</span>
+ </template>
+ <template #button>
+ <icon-fa6-solid-arrow-right />
+ </template>
+ </SearchBar>
+ <div class="flex justify-center">
+ <Menubar
+ :model="menuItems"
+ :pt="{
+ submenu: {
+ style: {
+ minWidth: 'max-content'
+ }
+ },
+ separator: {
+ style: {
+ margin: '0 1rem',
+ border: `solid ${tailwindDefaultColors['slate'][300]} 1px`,
+ height: '3rem',
+ borderRadius: '999999px'
+ }
}
- }
- }"
- >
- <template #item="{ item, props, hasSubmenu, root }">
- <span :class="[{ 'font-normal': item.indent }]">
- <RouterLink
- v-if="item.route && !hasSubmenu"
- :to="item.route"
- custom
- #="{ href, navigate }"
- >
- <a :href="href" :="props.action" @click="navigate">
+ }"
+ >
+ <template #item="{ item, props, hasSubmenu, root }">
+ <span :class="[{ 'font-normal': item.indent }]">
+ <RouterLink
+ v-if="item.route && !hasSubmenu"
+ :to="item.route"
+ custom
+ #="{ href, navigate }"
+ >
+ <a :href="href" :="props.action" @click="navigate">
+ <component
+ :is="item.iconComponent || ''"
+ v-if="item.iconComponent"
+ :="props.icon"
+ />
+ <span
+ v-if="item.indent"
+ class="mr-2"
+ :style="{ paddingLeft: `${item.indent}rem` }"
+ >
+ →
+ </span>
+ <BaseRenderedMarkdown
+ v-if="typeof item.label === 'string'"
+ :stringified-markdown="item.label"
+ />
+ </a>
+ </RouterLink>
+ <a
+ v-else
+ :href="item.url"
+ :target="item.target"
+ :="props.action"
+ class="flex"
+ >
<component
:is="item.iconComponent || ''"
v-if="item.iconComponent"
:="props.icon"
/>
-
<span
v-if="item.indent"
class="mr-2"
@@ -430,52 +454,84 @@ const menuItems = computed<MenuItem[]>(() => [
>
→
</span>
-
<BaseRenderedMarkdown
v-if="typeof item.label === 'string'"
:stringified-markdown="item.label"
/>
+ <icon-fa6-solid-chevron-down
+ v-if="hasSubmenu && root"
+ :="props.submenuicon"
+ />
+ <icon-fa6-solid-chevron-right
+ v-else-if="hasSubmenu"
+ :="props.submenuicon"
+ />
</a>
- </RouterLink>
- <a
- v-else
- :href="item.url"
- :target="item.target"
- :="props.action"
- class="flex"
- >
- <component
- :is="item.iconComponent || ''"
- v-if="item.iconComponent"
- :="props.icon"
- />
-
- <span
- v-if="item.indent"
- class="mr-2"
- :style="{ paddingLeft: `${item.indent}rem` }"
- >
- →
- </span>
-
- <BaseRenderedMarkdown
- v-if="typeof item.label === 'string'"
- :stringified-markdown="item.label"
- />
-
- <icon-fa6-solid-chevron-down
- v-if="hasSubmenu && root"
- :="props.submenuicon"
- />
-
- <icon-fa6-solid-chevron-right
- v-else-if="hasSubmenu"
- :="props.submenuicon"
- />
- </a>
- </span>
- </template>
- </Menubar>
- </div>
- </main>
+ </span>
+ </template>
+ </Menubar>
+ </div>
+ <button
+ class="group absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border p-2 pl-12 pr-4 text-xl text-slate-400 shadow-lg transition-all duration-500 hover:border-slate-600 hover:text-slate-600 hover:shadow-2xl focus:border-slate-600 focus:text-slate-600 focus:shadow-2xl"
+ @click="aboutSectionElement?.scrollIntoView({ behavior: 'smooth' })"
+ >
+ <icon-tabler-circle-arrow-down
+ class="absolute left-2 top-1/2 -translate-y-1/2 text-3xl transition-all duration-500 group-hover:opacity-0 group-focus:opacity-0"
+ />
+ <icon-tabler-circle-arrow-down-filled
+ class="absolute left-2 top-1/2 -translate-y-1/2 text-3xl opacity-0 transition-all duration-500 group-hover:opacity-100 group-focus:opacity-100"
+ />
+ About SnoBoard
+ </button>
+ </main>
+ <section
+ ref="aboutSectionElement"
+ class="prose prose-lg prose-slate mx-auto mb-8 pt-8 prose-headings:text-center prose-p:text-justify"
+ >
+ <h2>What is SnoBoard ?</h2>
+ <p>
+ Lorem ipsum odor amet, consectetuer adipiscing elit. Lacus suscipit
+ nullam rhoncus dui ex; efficitur leo? Interdum velit potenti habitant
+ dapibus arcu suspendisse. Diam ante nisl leo, quisque potenti elementum
+ est in. Libero quis cras eu dignissim litora. Vehicula mauris cubilia
+ cubilia; sit vestibulum elit fusce laoreet. Efficitur inceptos nostra
+ imperdiet neque semper dis. Orci vulputate pharetra dapibus odio nulla
+ imperdiet.
+ </p>
+ <p>
+ Dis dui malesuada turpis hac malesuada. Felis nullam pharetra vehicula
+ vestibulum mollis. Molestie suscipit vulputate vehicula amet phasellus?
+ Auctor integer taciti praesent tortor risus auctor dui. Lacinia tempus
+ erat; egestas sapien metus eleifend lectus porttitor. Praesent urna
+ class purus senectus quis tortor elit augue. Pellentesque rutrum mattis
+ neque dapibus fringilla?
+ </p>
+ <p>
+ Cubilia eros penatibus sodales volutpat massa primis dis hac. Nibh
+ maecenas lobortis class proin vitae amet sed parturient. Tristique dis
+ urna, per proin ante ac at. Faucibus risus taciti lacus sociosqu montes
+ aliquet ornare. Libero fames maecenas tincidunt ad ad dis quis. Euismod
+ congue morbi cras facilisi risus etiam justo.
+ </p>
+ <p>
+ Metus tempus odio maecenas nisl amet volutpat porttitor dapibus. Natoque
+ blandit a elementum tortor; aliquet eros. Elit sapien urna euismod,
+ aptent nunc elementum. Curae pulvinar viverra montes tristique commodo
+ cras, lectus euismod proin. Diam mi quis aliquam convallis quis dui.
+ Fusce lacus nec rutrum rhoncus nisl congue ridiculus euismod lacus.
+ Proin pharetra eleifend mus, ante sapien amet eros fusce. Ad rutrum
+ felis semper vivamus hendrerit dis ridiculus sapien ut?
+ </p>
+ <p>
+ Himenaeos turpis senectus aliquet luctus quisque facilisi nullam
+ facilisi congue. Porttitor vitae elementum lobortis; consequat ac
+ elementum purus! Cursus nunc ad sapien suscipit dignissim ipsum placerat
+ fermentum. Bibendum non mauris tortor, arcu venenatis etiam malesuada.
+ Urna taciti ultrices litora nostra efficitur velit tellus. Tellus felis
+ imperdiet ad fusce hendrerit fermentum. Magna praesent aliquet
+ adipiscing; mi diam per. Habitant at dapibus lobortis suscipit malesuada
+ litora curae eget quis.
+ </p>
+ </section>
+ </FooterLayout>
</template>
diff --git a/src/views/LegalView.vue b/src/views/LegalView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fae48a7fb479f17fc290ae3b0bf18b726d1a2179
--- /dev/null
+++ b/src/views/LegalView.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * Vue imports.
+ */
+import { computed, toRef } from 'vue'
+/**
+ * Components imports
+ */
+import MainLayout from '@/layouts/MainLayout.vue'
+import BaseRenderedMarkdown from '@/components/BaseRenderedMarkdown.vue'
+/**
+ * Other 3rd-party imports
+ */
+import { useQuery } from '@urql/vue'
+/**
+ * Utils imports
+ */
+import { legalDocumentByIdQuery } from '@/gql/queries'
+import { getColorWithOptionalShade } from '@/utils/colors'
+
+/**
+ * Component props.
+ */
+const props = defineProps<{
+ /** The ID of the legal document to display */
+ documentId: string
+}>()
+
+/**
+ * Reactive urql GraphQL query object, updated with query state & response.
+ */
+const gqlQuery = useQuery({
+ query: legalDocumentByIdQuery,
+ variables: toRef(() => ({
+ id: props.documentId
+ }))
+})
+
+/**
+ * The document to display, reactively updated when fetched.
+ */
+const legalDocument = computed(() =>
+ gqlQuery.data.value?.mdPages.find((page) => page.id === props.documentId)
+)
+</script>
+
+<template>
+ <MainLayout padded>
+ <BaseRenderedMarkdown
+ v-if="legalDocument"
+ id="markdown-component"
+ :stringified-markdown="legalDocument.content"
+ class="prose prose-lg prose-slate mx-auto mb-8 prose-headings:text-center prose-p:text-justify"
+ />
+ </MainLayout>
+</template>
+
+<style lang="scss">
+#markdown-component {
+ em:only-child {
+ text-align: center;
+ color: v-bind('getColorWithOptionalShade("slate", "400")');
+ }
+}
+</style>
diff --git a/src/views/ModificationView.vue b/src/views/ModificationView.vue
index 807aeed467add6364dce7cb7027420d34f9c3ce4..39b4953c4741cd30686ca35428fc46df6e55b61c 100644
--- a/src/views/ModificationView.vue
+++ b/src/views/ModificationView.vue
@@ -212,7 +212,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
{{ modification?.name }}
</h1>
@@ -222,7 +222,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
<Panel
toggleable
- class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+ class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
:pt="{
header: { class: '!bg-slate-50' },
toggler: { class: 'hover:!bg-slate-100' }
@@ -427,5 +427,3 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
</Panel>
</MainLayout>
</template>
-
-<style></style>
diff --git a/src/views/OrganismView.vue b/src/views/OrganismView.vue
index 5672ec03febb34a248fef940d0f7716e16452d7b..19b000064e708a9068ecdd61b5bb30adb513137f 100644
--- a/src/views/OrganismView.vue
+++ b/src/views/OrganismView.vue
@@ -528,7 +528,7 @@ const chartConfigs = computed(() => ({
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1
v-if="organism"
class="mb-4 text-center text-3xl font-semibold text-slate-700"
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index e2a7e46283adc8c92856b1b842313141ee9d21ad..8f14df9c7cda0f51c714a3db61575ce72823d490 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -6,7 +6,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1>Search</h1>
</MainLayout>
</template>
diff --git a/src/views/SelectionView.vue b/src/views/SelectionView.vue
index 8ae6d47edaa43bf6ca18da8384ed2f8cdcabdc67..b6b100ac642f78a99f519fbfcd93d8f3485add9e 100644
--- a/src/views/SelectionView.vue
+++ b/src/views/SelectionView.vue
@@ -190,7 +190,7 @@ const onlyTargetIdActiveMode = computed(() =>
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="text-center text-3xl font-semibold text-slate-700">
Advanced selection
</h1>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index f0959d44da3a7420cf663dcce38dd321803637f6..9729c7818eccb53e49cf6d35c2c67d0ad6b89293 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -224,7 +224,7 @@ const isColourBlindMode = ref(false)
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="mb-4 text-center text-3xl font-semibold italic text-slate-700">
Database statistics
</h1>
diff --git a/src/views/TargetView.vue b/src/views/TargetView.vue
index f93e3dc77f469978a46219a812a18d59c05a54dc..d3b0f743be5bda69670b32bb71028e8a97cb661e 100644
--- a/src/views/TargetView.vue
+++ b/src/views/TargetView.vue
@@ -418,7 +418,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
</script>
<template>
- <MainLayout>
+ <MainLayout padded>
<h1 class="mb-4 text-center text-3xl font-semibold text-slate-700">
{{ target?.name }}
</h1>
@@ -467,7 +467,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab])
<Panel
toggleable
- class="mx-auto mb-8 max-w-6xl text-center 2xl:max-w-7xl"
+ class="mx-auto mb-16 max-w-6xl text-center 2xl:max-w-7xl"
:pt="{
header: { class: '!bg-slate-50' },
toggler: { class: 'hover:!bg-slate-100' }
diff --git a/tailwind.config.js b/tailwind.config.js
index 78a855f58f061d9addc04fee137af308bef4dd8c..0b7312ea8f7f42178c407698151f0f38fc73ec3a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,4 @@
+import TypographyPlugin from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
@@ -15,7 +16,7 @@ export default {
}
}
},
- plugins: [require('@tailwindcss/typography')],
+ plugins: [TypographyPlugin],
safelist: [
{
// BaseDescribedChip, BaseLinkListCard, SequenceBoard