Spaces:
Runtime error
Runtime error
File size: 5,382 Bytes
32f0b26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<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>
|