knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[alan-turing][m] - first page with search

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes 2023-04-29 23:21:22 -03:00
parent 0384e01bed
commit cc5f5ac2b1
9 changed files with 233 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -44,3 +44,7 @@ Thumbs.db
# Env
.env
**/.env
# MarkdownDB
*.db
**/*.db

2
examples/alan-turing-portal/content/let-mi-an-arabic-levantine-twitter-dataset-for-mysogynistic-language.md
View File

@ -9,6 +9,6 @@ percentage-abusive: 48.76
language: Arabic
level-of-annotation: ["Posts"]
platform: ["Twitter"]
medium: ["Text"]
medium: ["Text", "Images"]
reference: "Hala Mulki and Bilal Ghanem. 2021. Let-Mi: An Arabic Levantine Twitter Dataset for Misogynistic Language. In Proceedings of the Sixth Arabic Natural Language Processing Workshop, pages 154–163, Kyiv, Ukraine (Virtual). Association for Computational Linguistics"
---

BIN
examples/alan-turing-portal/markdown.db
View File

Binary file not shown.

3
examples/alan-turing-portal/next.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
swcMinify: true,
};

22
examples/alan-turing-portal/next.config.mjs
View File

@ -1,22 +0,0 @@
import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import rehypePrism from '@mapbox/rehype-prism'
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ['js', 'jsx', 'mdx'],
reactStrictMode: true,
experimental: {
scrollRestoration: true,
},
}
const withMDX = nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypePrism],
},
})
export default withMDX(nextConfig)

150
examples/alan-turing-portal/package-lock.json generated
View File

@ -14,6 +14,7 @@
"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/mdx": "^13.0.2",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.4",
"autoprefixer": "^10.4.12",
"clsx": "^1.2.1",
@ -23,11 +24,14 @@
"focus-visible": "^5.2.0",
"next": "13.3.0",
"next-router-mock": "^0.9.3",
"next-superjson-plugin": "^0.5.7",
"postcss-focus-visible": "^6.0.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.9",
"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",
"superjson": "^1.12.3",
"tailwindcss": "^3.3.0"
},
"devDependencies": {
@ -631,6 +635,17 @@
"node": ">=6"
}
},
"node_modules/@tailwindcss/forms": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
"dependencies": {
"mini-svg-data-uri": "^1.2.3"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
@ -2036,6 +2051,20 @@
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
},
"node_modules/copy-anything": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
"integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
"dependencies": {
"is-what": "^4.1.8"
},
"engines": {
"node": ">=12.13"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/core-js-pure": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
@ -3919,6 +3948,14 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@ -4508,6 +4545,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-what": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
"integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
"engines": {
"node": ">=12.13"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/is-yarn-global": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
@ -6623,6 +6671,14 @@
"node": ">=4"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -7023,6 +7079,18 @@
"react": ">=17.0.0"
}
},
"node_modules/next-superjson-plugin": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/next-superjson-plugin/-/next-superjson-plugin-0.5.7.tgz",
"integrity": "sha512-bkF49B/Pcf0GCh10vXL+hjBodC404FgzEsl3wtrjwqvTkoWDnqBOgP2KqWR9sF1tz4MSMlo872Q4Srl/2XRFWw==",
"dependencies": {
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"next": "^13",
"superjson": "^1"
}
},
"node_modules/node-addon-api": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
@ -8049,6 +8117,21 @@
"react": "^18.2.0"
}
},
"node_modules/react-hook-form": {
"version": "7.43.9",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
"integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -9069,6 +9152,17 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/superjson": {
"version": "1.12.3",
"resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
"integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
"dependencies": {
"copy-anything": "^3.0.2"
},
"engines": {
"node": ">=10"
}
},
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -10720,6 +10814,14 @@
"defer-to-connect": "^1.0.1"
}
},
"@tailwindcss/forms": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
"requires": {
"mini-svg-data-uri": "^1.2.3"
}
},
"@tailwindcss/typography": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
@ -11784,6 +11886,14 @@
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
},
"copy-anything": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
"integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
"requires": {
"is-what": "^4.1.8"
}
},
"core-js-pure": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
@ -13214,6 +13324,14 @@
}
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@ -13617,6 +13735,11 @@
"call-bind": "^1.0.2"
}
},
"is-what": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
"integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA=="
},
"is-yarn-global": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
@ -15088,6 +15211,11 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
},
"mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
},
"minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -15370,6 +15498,14 @@
"integrity": "sha512-jl8eFe71LpMVGeBMpoxILkGfEgGY7IfLy8XPyv05/o61p5oQRNpoMmk46VMxRIpt0fI8XcvznBZKpDK6vbYQcQ==",
"requires": {}
},
"next-superjson-plugin": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/next-superjson-plugin/-/next-superjson-plugin-0.5.7.tgz",
"integrity": "sha512-bkF49B/Pcf0GCh10vXL+hjBodC404FgzEsl3wtrjwqvTkoWDnqBOgP2KqWR9sF1tz4MSMlo872Q4Srl/2XRFWw==",
"requires": {
"hoist-non-react-statics": "^3.3.2"
}
},
"node-addon-api": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
@ -16035,6 +16171,12 @@
"scheduler": "^0.23.0"
}
},
"react-hook-form": {
"version": "7.43.9",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
"integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -16758,6 +16900,14 @@
}
}
},
"superjson": {
"version": "1.12.3",
"resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
"integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
"requires": {
"copy-anything": "^3.0.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

4
examples/alan-turing-portal/package.json
View File

@ -18,6 +18,7 @@
"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/mdx": "^13.0.2",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.4",
"autoprefixer": "^10.4.12",
"clsx": "^1.2.1",
@ -27,11 +28,14 @@
"focus-visible": "^5.2.0",
"next": "13.3.0",
"next-router-mock": "^0.9.3",
"next-superjson-plugin": "^0.5.7",
"postcss-focus-visible": "^6.0.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.9",
"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",
"superjson": "^1.12.3",
"tailwindcss": "^3.3.0"
},
"devDependencies": {

98
examples/alan-turing-portal/pages/index.jsx
View File

@ -1,11 +1,12 @@
import Head from 'next/head'
import Link from 'next/link'
import fs from 'fs'
import { Card } from '../components/Card'
import { Container } from '../components/Container'
import clientPromise from '@/lib/mddb'
import ReactMarkdown from 'react-markdown'
import { Index } from 'flexsearch'
import { useForm } from 'react-hook-form'
function DatasetCard({ dataset }) {
return (
@ -68,28 +69,14 @@ function DatasetCard({ dataset }) {
</Card>
)
}
function SearchBar() {
return (
<form
className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
>
<p className="mt-2 text-lg font-semibold text-zinc-600 dark:text-zinc-400">
Search for datasets
</p>
<div className="mt-6 flex">
<input
placeholder="Hate speech on Twitter"
aria-label="Hate speech on Twitter"
required
className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
/>
</div>
</form>
)
}
export default function Home({ datasets, indexText }) {
export default function Home({ datasets, indexText, availableLanguages, availablePlatforms }) {
const index = new Index()
datasets.forEach((dataset) => index.add(dataset.id, `${dataset.title} ${dataset['task-description']} ${dataset['details-of-task']} ${dataset['reference']}`))
const { register, watch } = useForm({ defaultValues: {
searchTerm: '',
lang: '',
platform: ''
}})
return (
<>
<Head>
@ -111,11 +98,62 @@ export default function Home({ datasets, indexText }) {
</Container>
<Container className="mt-24 md:mt-28">
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-8 lg:max-w-none">
<SearchBar />
<form className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
<p className="mt-2 text-lg font-semibold text-zinc-600 dark:text-zinc-100">
Search for datasets
</p>
<div className="mt-6 flex gap-3">
<input
placeholder="Search here"
aria-label="Hate speech on Twitter"
required
{...register('searchTerm')}
className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-600 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-200 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
/>
<select
placeholder="Language"
defaultValue=""
className="min-w-0 flex-auto text-zinc-600 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
{...register('lang')}
>
<option value="" disabled hidden>Filter by language</option>
{availableLanguages.map((lang) => (
<option key={lang} className='dark:bg-white dark:text-black' value={lang}>{lang}</option>
))}
</select>
<select
placeholder="Platform"
defaultValue=""
className="min-w-0 flex-auto text-zinc-600 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
{...register('platform')}
>
<option value="" disabled hidden>Filter by platform</option>
{availablePlatforms.map((platform) => (
<option key={platform} className='dark:bg-white dark:text-black' value={platform}>{platform}</option>
))}
</select>
</div>
</form>
<div className="flex flex-col gap-16">
{datasets.map((dataset) => (
<DatasetCard key={dataset.title} dataset={dataset} />
))}
{datasets
.filter((dataset) =>
watch().searchTerm && watch().searchTerm !== ''
? index.search(watch().searchTerm).includes(dataset.id)
: true
)
.filter((dataset) =>
watch().lang && watch().lang !== ''
? dataset.language === watch().lang
: true
)
.filter((dataset) =>
watch().platform && watch().platform !== ''
? dataset.platform.includes(watch().platform)
: true
)
.map((dataset) => (
<DatasetCard key={dataset.title} dataset={dataset} />
))}
</div>
</div>
</Container>
@ -128,13 +166,17 @@ export async function getStaticProps() {
const allPages = await mddb.getFiles({ extensions: ['md', 'mdx'] })
const datasets = allPages
.filter((page) => page.url_path !== '/')
.map((page) => page.metadata)
.map((page) => ({ ...page.metadata, id: page._id }))
const index = allPages.filter((page) => page.url_path === '/')[0]
const source = fs.readFileSync(index.file_path, { encoding: 'utf-8' })
const availableLanguages = [... new Set(datasets.map((dataset) => dataset.language))]
const availablePlatforms = [... new Set(datasets.map((dataset) => dataset.platform).flat())]
return {
props: {
indexText: source,
datasets,
availableLanguages,
availablePlatforms,
},
}
}

2
examples/alan-turing-portal/tailwind.config.js
View File

@ -6,7 +6,7 @@ module.exports = {
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: 'class',
plugins: [require('@tailwindcss/typography')],
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
theme: {
fontSize: {
xs: ['0.8125rem', { lineHeight: '1.5rem' }],