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