Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(front): Improve how stats are displayed in the app #172

Merged
merged 4 commits into from
Feb 20, 2024
Merged

fix(front): Improve how stats are displayed in the app #172

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b934ced
Switch library from vega-lite to chart.js
Feb 20, 2024
99f2327
increase histograms height on dashboard
Feb 20, 2024
0e0df43
fix linting errors
Feb 20, 2024
e1bc1aa
improve consistency and functionality
Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 17 additions & 18 deletions ui/apps/pixano/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,28 @@
"prepare": "svelte-kit sync"
},
"dependencies": {
"@pixano/canvas2d": "workspace:^0.3.0",
"@pixano/core": "workspace:^0.3.0",
"@pixano/dataset-item-workspace": "workspace:^0.3.0",
"@pixano/models": "workspace:^0.3.0",
"@pixano/table": "workspace:^0.3.0",
"lucide-svelte": "^0.292.0",
"svelte-vega": "^2.1.0"
"@pixano/canvas2d": "workspace:^",
"@pixano/core": "workspace:^",
"@pixano/dataset-item-workspace": "workspace:^",
"@pixano/models": "workspace:^",
"@pixano/table": "workspace:^",
"lucide-svelte": "^0.292.0"
},
"devDependencies": {
"@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@types/cookie": "^0.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tailwindcss": "^3.3.6",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
"@sveltejs/kit": "^2.5.0",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@types/cookie": "^0.5.4",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"svelte": "^4.2.11",
"svelte-check": "^3.6.4",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.3"
},
"type": "module"
}
8 changes: 5 additions & 3 deletions ui/apps/pixano/src/components/dashboard/Dashboard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
>
{/each}
</div>
<div class="w-full z-10 p-8">
<div class="w-full flex flex-col z-10 p-8">
{#if selectedTab === "source feature"}
<!-- Overview -->
<div class="w-full flex flex-row justify-between">
Expand Down Expand Up @@ -68,10 +68,12 @@
<span class="text-5xl font-bold"> Statistics </span>

{#if selectedDataset.stats != null && selectedDataset.stats.length != 0}
<div class="mt-8 flex flex-wrap justify-center gap-6 mx-8">
<div class="mt-6 h-full overflow-y-auto flex flex-wrap justify-between gap-6">
<!-- If charts are ready to be displayed, display them -->
{#each selectedDataset.stats as chart}
<Histogram hist={chart} />
<div class="w-[47%] min-h-80">
<Histogram hist={chart} />
</div>
{/each}
</div>
{:else}
Expand Down
26 changes: 13 additions & 13 deletions ui/components/canvas2d/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@
"lint": "tsc --noEmit && eslint ./src"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@tsconfig/svelte": "^5.0.0",
"svelte": "^4.2.7",
"svelte-check": "^3.0.0",
"tailwindcss": "^3.2.4",
"tslib": "^2.5.0",
"typescript": "^5.0.0",
"vite": "^5.0.3"
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tsconfig/svelte": "^5.0.2",
"svelte": "^4.2.11",
"svelte-check": "^3.6.4",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.3"
},
"dependencies": {
"@pixano/core": "workspace:^0.3.0",
"@pixano/models": "workspace:^0.3.0",
"konva": "^8.4.2",
"nanoid": "^5.0.0",
"onnxruntime-web": "~1.16.0",
"@pixano/core": "workspace:^",
"@pixano/models": "workspace:^",
"konva": "^8.4.3",
"nanoid": "^5.0.5",
"onnxruntime-web": "~1.16.3",
"simplify-js": "^1.2.4",
"svelte-konva": "^0.1.1",
"vite-plugin-externals": "^0.6.2"
Expand Down
18 changes: 9 additions & 9 deletions ui/components/canvas3d/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@
"lint": "tsc --noEmit && eslint ./src"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@tsconfig/svelte": "^5.0.0",
"svelte": "^4.2.7",
"svelte-check": "^3.0.0",
"tailwindcss": "^3.2.4",
"tslib": "^2.5.0",
"typescript": "^5.0.0",
"vite": "^5.0.3"
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tsconfig/svelte": "^5.0.2",
"svelte": "^4.2.11",
"svelte-check": "^3.6.4",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.3"
},
"dependencies": {
"@pixano/core": "workspace:^0.3.0",
"@pixano/core": "workspace:^",
"vite-plugin-externals": "^0.6.2"
}
}
39 changes: 21 additions & 18 deletions ui/components/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,38 @@
"lint": "tsc --noEmit --skipLibCheck && eslint ./src"
},
"devDependencies": {
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@tsconfig/svelte": "^5.0.0",
"svelte": "^4.2.7",
"svelte-check": "^3.4.6",
"@sveltejs/kit": "^2.5.0",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tsconfig/svelte": "^5.0.2",
"svelte": "^4.2.11",
"svelte-check": "^3.6.4",
"svelte-preprocess": "^5.1.3",
"tailwindcss": "3.2.4",
"tslib": "^2.6.0",
"typescript": "^5.0.2",
"vite": "^5.0.3"
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.3"
},
"dependencies": {
"@types/d3": "^7.4.3",
"@types/d3-scale-chromatic": "^3.0.2",
"bits-ui": "^0.9.8",
"clsx": "^2.0.0",
"@types/d3-scale-chromatic": "^3.0.3",
"bits-ui": "^0.9.9",
"chart.js": "^4.4.1",
"chartjs-plugin-zoom": "^2.0.1",
"clsx": "^2.1.0",
"cmdk-sv": "^0.0.12",
"d3": "^7.8.2",
"d3": "^7.8.5",
"d3-color": "^3.1.0",
"d3-scale-chromatic": "^3.0.0",
"konva": "^8.4.2",
"konva": "^8.4.3",
"lucide-svelte": "^0.292.0",
"onnxruntime-web": "~1.16.0",
"onnxruntime-web": "~1.16.3",
"svelte-chartjs": "^3.1.5",
"svelte-konva": "^0.1.1",
"svelte-vega": "^2.1.0",
"tailwind-merge": "^2.0.0",
"tailwind-variants": "^0.1.18",
"vega": "^5.22.1",
"vega-lite": "^5.6.0",
"tailwind-merge": "^2.2.1",
"tailwind-variants": "^0.1.20",
"vega": "^5.27.0",
"vega-lite": "^5.16.3",
"vite-plugin-externals": "^0.6.2"
}
}
152 changes: 64 additions & 88 deletions ui/components/core/src/components/Histogram.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,105 +15,81 @@
*/

// Imports
import { VegaLite, type VisualizationSpec } from "svelte-vega";
import { Bar } from "svelte-chartjs";
import {
Chart,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale,
type ChartDataset,
} from "chart.js";
import zoomPlugin from "chartjs-plugin-zoom";
import type { DatasetStat } from "..";

import type { DatasetStat } from "../lib/types/datasetTypes";

// Exports
// Define props
export let hist: DatasetStat;
export let maxHeight = 48;
export let hideTitle = false;

// Calculate histogram height
let h = 7.5 * hist.histogram.length;
h = h < 125 ? 125 : h;
// Color palette for stacked charts
const colors = ["#771E5F", "#1E7736", "#1E5F77", "#77361E"];
ulysse-bonneau marked this conversation as resolved.
Show resolved Hide resolved

// Vega-Lite spec
const spec: VisualizationSpec = {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
config: {
style: {
cell: {
stroke: "transparent",
},
},
},
params: [
{
name: "highlight",
select: {
type: "point",
on: "mouseover",
},
// Separate splits
let splits: string[] = [...new Set(hist.histogram.map((item) => String(item.split)))];
let datasets: ChartDataset[] = [];
ulysse-bonneau marked this conversation as resolved.
Show resolved Hide resolved
for (let i = 0; i < splits.length; ++i) {
ulysse-bonneau marked this conversation as resolved.
Show resolved Hide resolved
datasets.push({
label: splits[i],
backgroundColor: colors[i] + "40",
borderColor: colors[i],
borderWidth: 2,
data: hist.histogram.filter((item) => item.split === splits[i]).map((item) => item.counts),
});
}

// Define label names
let labels;
if (hist.type == "numerical")
labels = [...new Set(hist.histogram.map((item) => item.bin_start + "-" + item.bin_end))];
else if (hist.type == "categorical")
labels = [...new Set(hist.histogram.map((item) => item[hist.name]))];

// Prepare chart data and options
let data = {
ulysse-bonneau marked this conversation as resolved.
Show resolved Hide resolved
labels: labels,
datasets: datasets,
};
let options = {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: hist.name,
},
],
data: {
values: hist.histogram,
},
height: h,
width: 150,
background: "transparent",
mark: { type: "bar", tooltip: true },
encoding: {
x: {
field: "counts",
type: "quantitative",
axis: {
title: null,
grid: false,
domain: false,
ticks: false,
labels: false,
zoom: {
zoom: {
wheel: {
enabled: true,
speed: 0.05,
},
mode: "x",
},
},
y: {
field: hist.type == "categorical" ? hist.name : "bin_range",
type: "nominal",
sort: "x",
axis: {
title: null,
domain: false,
grid: false,
ticks: false,
labelLimit: 50,
labelPadding: 10,
pan: {
enabled: true,
mode: "x",
},
},
color: {
condition: [
{
param: "highlight",
empty: false,
value: "grey",
},
],
field: "split",
},
},
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true },
},
};

if (hist.type == "numerical") {
// Set bin ranges
for (let i = 0; i < hist.histogram.length; ++i) {
const value = hist.histogram[i];
value.bin_range = value.bin_start + "-" + value.bin_end;
}
}

// Vega-lite chart options
const options = {
actions: false,
};
Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin);
</script>

<!-- Histogram -->
<div class="max-h-{maxHeight} w-72 mx-auto flex flex-col justify-center items-center">
cpvannier marked this conversation as resolved.
Show resolved Hide resolved
{#if !hideTitle}
<span class="py-1 text-sm font-bold">
{hist.name}
</span>
{/if}
<div class="place-items-center overflow-y-scroll">
<VegaLite {spec} {options} />
</div>
</div>
<Bar {data} {options} />
Loading
Loading