Spaces:
Runtime error
Runtime error
File size: 6,644 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 151 152 153 154 155 156 |
<script lang="ts">
import { VegaLite } from "svelte-vega";
import type { View } from "svelte-vega";
import IconButton from '@smui/icon-button';
import LayoutGrid, { Cell } from "@smui/layout-grid";
import Card, { Content } from '@smui/card';
export let data;
export let clusters;
export let personalized_model;
export let cluster = "";
let show_step1_info = false;
// Topic Overview Plot
let topic_overview_json = data["overall_perf"]["topic_overview_plot_json"];
let topic_overview_data = topic_overview_json["datasets"][topic_overview_json["layer"][0]["data"]["name"]];
let topic_overview_spec = topic_overview_json;
let topic_overview_view: View;
// // Overall Histogram
// let overall_hist_json = data["overall_perf"]["overall_hist_json"];
// let overall_hist_data = overall_hist_json["datasets"][overall_hist_json["data"]["name"]];
// let overall_hist_spec = overall_hist_json;
// let overall_hist_view: View;
// // Class-conditional Histogram
// let class_cond_plot_json = data["overall_perf"]["class_cond_plot_json"];
// let class_cond_plot_data = class_cond_plot_json["datasets"][class_cond_plot_json["data"]["name"]];
// let class_cond_plot_spec = class_cond_plot_json;
// let class_cond_plot_view: View;
</script>
<div>
<div>
<span class="head_6">All topics</span>
<IconButton
class="material-icons grey_button"
size="normal"
on:click={() => (show_step1_info = !show_step1_info)}
>
help_outline
</IconButton>
</div>
{#if show_step1_info}
<LayoutGrid>
<Cell span={8}>
<div class="card-container">
<Card variant="outlined" padded>
<p class="mdc-typography--button"><b>Interpreting this visualization</b></p>
<ul>
<li>
Each <b>box</b> in this plot represents a set of comments that belong in a given <b>topic area</b>
</li>
<li>
The <b>x-axis</b> represents our prediction of <b>your</b> toxicity rating for each topic (we'll call these "your ratings")
<ul>
<li>
The <b>left side</b> (white background) is the <b>Non-toxic</b> side (comments that'll be allowed to remain)
</li>
<li>
The <b>right side</b> (grey background) is the <b>Toxic</b> side (comments that will be deleted)
</li>
<li>
Comment topic area boxes are plotted along the x-axis based on our prediction of your <b>average</b> toxicity rating for comments in that set
</li>
</ul>
</li>
<li>
The <b>color</b> of the box indicates the <b>system's rating</b> for the same comment topic; you may want to focus on the <b>red-colored boxes</b> that indicate <b>disagreements</b> between "your ratings" and the system's ratings
</li>
</ul>
</Card>
</div>
</Cell>
</LayoutGrid>
{/if}
<div class="row">
<div class="col s8">
<VegaLite {topic_overview_data} spec={topic_overview_spec} bind:view={topic_overview_view}/>
</div>
</div>
<!-- Old visualizations -->
<!-- <div style="margin-top: 500px">
<h6>Overall Performance</h6>
<div class="row">
<div class="col s12">
<div id="overall_perf">
<table>
<tbody>
<tr class="custom-blue">
<td class="bold"
>System {data[
"overall_perf"
]["metric"]} with YOUR labels</td
>
<td>
<span class="bold-large"
>{data[
"overall_perf"
]["user_metric"]}</span
>
(Percentile: {data[
"overall_perf"
]["user_percentile"]})
</td>
</tr>
<tr>
<td class="bold"
>System {data[
"overall_perf"
]["metric"]} with OTHER USERS' labels</td
>
<td>
<span class="bold-large"
>{data[
"overall_perf"
]["other_metric"]}</span
>
(95% CI: [{data[
"overall_perf"
]["other_ci_low"]}, {data[
"overall_perf"
]["other_ci_high"]}])
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col s8">
<VegaLite {overall_hist_data} spec={overall_hist_spec} bind:view={overall_hist_view}/>
</div>
</div>
<h6>Performance Breakdown</h6>
<div class="row">
<div class="col s12">
<div class="row">
<div class="col s12">
<VegaLite {class_cond_plot_data} spec={class_cond_plot_spec} bind:view={class_cond_plot_view} />
</div>
</div>
</div>
</div>
</div> -->
</div>
<style>
</style> |