Spaces:
Runtime error
Runtime error
| <script lang="ts"> | |
| import { onMount } from "svelte"; | |
| import Button, { Label } from "@smui/button"; | |
| import LinearProgress from "@smui/linear-progress"; | |
| import DataTable, { | |
| Head, | |
| Body, | |
| Row, | |
| Cell, | |
| Label, | |
| SortValue, | |
| } from "@smui/data-table"; | |
| import IconButton from '@smui/icon-button'; | |
| import Radio from "@smui/radio"; | |
| import FormField from "@smui/form-field"; | |
| let cur_examples = []; | |
| let promise = Promise.resolve(null); | |
| // let sort_examples = false; | |
| let sort = "rating"; | |
| let sortDirection: Lowercase<keyof typeof SortValue> = "descending"; | |
| function handleSort() { | |
| cur_examples.sort((a, b) => { | |
| const [aVal, bVal] = [a[sort], b[sort]][ | |
| sortDirection === "ascending" ? "slice" : "reverse" | |
| ](); | |
| return Number(aVal) - Number(bVal); | |
| }); | |
| cur_examples = cur_examples; | |
| } | |
| onMount(async () => { | |
| promise = getExamples(); | |
| }); | |
| function handleButton() { | |
| promise = getExamples(); | |
| } | |
| async function getExamples() { | |
| let req_params = { | |
| n_examples: 20, | |
| }; | |
| let params = new URLSearchParams(req_params).toString(); | |
| const response = await fetch("./get_explore_examples?" + params); | |
| const text = await response.text(); | |
| const data = JSON.parse(text); | |
| cur_examples = JSON.parse(data["examples"]); | |
| console.log(cur_examples); // TEMP | |
| return true; | |
| } | |
| </script> | |
| <svelte:head> | |
| <title>Explore</title> | |
| </svelte:head> | |
| <div class="panel"> | |
| <div class="panel_contents"> | |
| <div> | |
| <h3>Explore System</h3> | |
| <div style="width: 50%"> | |
| <ul> | |
| <li> | |
| Take a few minutes to explore some examples of <b>comments on YouSocial</b> and the toxicity ratings provided by YouSocial's <b>content moderation system</b>. | |
| </li> | |
| <li> | |
| You can optionally sort by the "System rating" by clicking on the arrow button in the header. | |
| </li> | |
| <li> | |
| Feel free to click the button to fetch a new sample of examples if you'd like. | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- <div> | |
| Sort order: | |
| <FormField> | |
| <Radio bind:group={sort_examples} value={false} color="secondary" /> | |
| <span slot="label">None</span> | |
| </FormField> | |
| <FormField> | |
| <Radio bind:group={sort_examples} value={true} color="secondary" /> | |
| <span slot="label">System toxicity rating (descending)</span> | |
| </FormField> | |
| </div> --> | |
| <Button on:click={handleButton} variant="outlined" class=""> | |
| <Label>Get another sample of examples</Label> | |
| </Button> | |
| </div> | |
| <div style="padding-top:50px"> | |
| {#await promise} | |
| <div class="app_loading"> | |
| <LinearProgress indeterminate /> | |
| </div> | |
| {:then examples} | |
| {#if cur_examples} | |
| <DataTable | |
| table$aria-label="Example list" | |
| style="max-width: 100%;" | |
| sortable | |
| bind:sort | |
| bind:sortDirection | |
| on:SMUIDataTable:sorted={handleSort} | |
| > | |
| <Head> | |
| <Row> | |
| <Cell sortable={false}> | |
| <Label>Comment</Label> | |
| </Cell> | |
| <Cell sortable={false}> | |
| <Label>System decision</Label> | |
| </Cell> | |
| <Cell numeric columnId="rating" sortable={true}> | |
| <IconButton class="material-icons">arrow_upward</IconButton> | |
| <Label>System rating</Label> | |
| </Cell> | |
| </Row> | |
| </Head> | |
| <Body> | |
| {#each cur_examples as ex (ex.item_id)} | |
| <Row> | |
| <Cell>{ex.comment}</Cell> | |
| <Cell | |
| style="background-color: {ex.system_color}; border-left: 1px solid rgba(0,0,0,.12); border-right: 1px solid rgba(0,0,0,.12); border-collapse: collapse;" | |
| > | |
| {ex.system_decision} | |
| </Cell> | |
| <Cell numeric>{Number(ex.rating)}</Cell> | |
| </Row> | |
| {/each} | |
| </Body> | |
| </DataTable> | |
| {/if} | |
| {:catch error} | |
| <p style="color: red">{error.message}</p> | |
| {/await} | |
| </div> | |
| </div> | |
| </div> | |
| <style> | |
| .panel { | |
| width: 80%; | |
| padding: 50px; | |
| } | |
| </style> | |