Skip to content

Commit

Permalink
feat: admin batch ui improvements (#414)
Browse files Browse the repository at this point in the history
  • Loading branch information
@npaton
npaton committed Sep 16, 2023
1 parent ac1eb2f commit 10de4bb
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 107 deletions.
6 changes: 6 additions & 0 deletions .changeset/admin-batch-ui.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@empirica/core": patch
---

Improve the admin batch UI. Games are now collapsed by default and can be
revealed with a click, and games are displayed in a table instead of cards.
11 changes: 11 additions & 0 deletions lib/admin-ui/src/components/ArrowIcon.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<svg
class="mx-auto h-full w-full"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
aria-hidden="true"
viewBox="0 0 512 512"
>
<path
d="M290.5 51.8C283.3 39.5 270.2 32 256 32s-27.3 7.5-34.5 19.8l-216 368c-7.3 12.4-7.3 27.7-.2 40.1S25.7 480 40 480H472c14.3 0 27.6-7.7 34.7-20.1s7-27.8-.2-40.1l-216-368z"
/>
</svg>
134 changes: 84 additions & 50 deletions lib/admin-ui/src/components/batches/BatchLine.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<script>
import { currentAdmin } from "../../utils/auth.js";
import { formatFactorsToString } from "../../utils/treatments.js";
import ArrowIcon from "../ArrowIcon.svelte";
import PlayIcon from "../PlayIcon.svelte";
import StopIcon from "../StopIcon.svelte";
import Badge from "../common/Badge.svelte";
import Button from "../common/Button.svelte";
import TimeSince from "../common/TimeSince.svelte";
import GamesLine from "../games/GamesLine.svelte";
import PlayIcon from "../PlayIcon.svelte";
import StopIcon from "../StopIcon.svelte";
import FactorsString from "../treatments/FactorsString.svelte";
export let batch;
export let games;
export let players;
let showGames = false;
const config = batch.get("config");
let gameCount = "unknown";
Expand Down Expand Up @@ -94,26 +97,33 @@
<div class="flex items-top px-4 py-4 sm:px-6">
<div class="flex min-w-0 flex-1 items-baseline">
<div class="flex-shrink-0 -mt-1 h-min flex space-x-1 items-baseline">
<Badge color={statusColor}>
{status}
</Badge>
<div class="flex flex-col items-end w-20">
<Badge color={statusColor}>
{status}
</Badge>

<button
class={`w-3 h-3 mr-2 mt-3 transition-transform text-gray-500 ${
showGames ? "rotate-180" : "rotate-90"
}`}
on:click={() => {
showGames = !showGames;
}}
>
<ArrowIcon />
</button>
</div>
</div>
<div class="min-w-0 flex-1 px-4 ">
<div class="min-w-0 flex-1 px-4">
<div>
<div class="truncate text-sm flex space-x-1 items-baseline">
<div class="truncate flex space-x-1 items-baseline">
<div class="font-medium text-empirica-600">
{config.kind}
</div>
{#if config.kind === "simple"}
<Badge>
{gameCount}
{gameCount === 1 ? "game" : "games"}
</Badge>
{/if}

{#if status === "Running" || status === "Ended" || status === "Terminated" || status === "Failed"}
{#if batch.attrs["status"]}
<div class="text-xs">
<div class="pl-4">
{#if status === "Running"}
Started
{:else if status === "Ended"}
Expand All @@ -131,47 +141,71 @@
{/if}
{/if}
</div>
<p class="mt-2 flex items-center text-sm text-gray-500">
<span class="truncate">
<div class="flex flex-col divide-transparent divide-y-2 w-full">
{#if config.kind === "custom"}
<pre>{JSON.stringify(config.config, null, 2)}</pre>
{/if}
{#if config.kind === "complete"}
{#each config.config.treatments as treatment}
<div class="flex items-center space-y-1">
<Badge>
{treatment.count}
{treatment.count === 1 ? "game" : "games"}
</Badge>
<div class="ml-2 overflow-ellipsis font-bold italic">
{treatment.treatment.name}
</div>
<div class="ml-2 truncate overflow-ellipsis opacity-60">
<div class="mt-2 text-sm text-gray-500">
<div class="flex flex-col divide-transparent divide-y-2 w-full">
{#if config.kind === "custom"}
<pre>{JSON.stringify(config.config, null, 2)}</pre>
{/if}
{#if config.kind === "complete"}
{#each config.config.treatments as treatment}
<div class="flex items-center space-y-1">
<Badge>
{treatment.count}
{treatment.count === 1 ? "game" : "games"}
</Badge>
<div
class="ml-2 overflow-ellipsis font-medium"
title={formatFactorsToString(
treatment.treatment.factors,
"\n"
)}
>
{treatment.treatment.name}
</div>
<!-- <div class="ml-2 truncate overflow-ellipsis opacity-60">
<FactorsString
factors={treatment.treatment.factors}
/>
</div> -->
</div>
{/each}
{:else if config.kind === "simple"}
<div class="flex space-x-2">
<div class="inline-block">
<Badge>
{gameCount}
{gameCount === 1 ? "game" : "games"}
</Badge>
</div>
<div>
{#each config.config.treatments as treatment}
<div class="flex items-center space-y-1">
<div
class="ml-2 overflow-ellipsis font-medium"
title={formatFactorsToString(
treatment.factors,
"\n"
)}
>
{treatment.name}
</div>
<!-- <div
class="ml-2 truncate overflow-ellipsis opacity-60"
>
<FactorsString factors={treatment.factors} />
</div> -->
</div>
</div>
{/each}
{:else if config.kind === "simple"}
{#each config.config.treatments as treatment}
<div class="flex items-center space-y-1">
<div class="ml-2 overflow-ellipsis font-bold italic">
{treatment.name}
</div>
<div class="ml-2 truncate overflow-ellipsis opacity-60">
<FactorsString factors={treatment.factors} />
</div>
</div>
{/each}
{/if}
</div>
{#if status === "Running"}
{/each}
</div>
</div>
{/if}
</div>
<div class="mt-4">
{#if showGames}
<GamesLine {batch} {games} {players} />
{/if}
</span>
</p>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/admin-ui/src/components/common/Badge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</script>

<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{color}-100 text-{color}-800"
class="inline-flex items-center px-2 py-0.5 rounded text-sm font-medium bg-{color}-100 text-{color}-800"
>
<slot />
</span>
82 changes: 57 additions & 25 deletions lib/admin-ui/src/components/games/GameLine.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { formatFactorsToString } from "../../utils/treatments.js";
import Badge from "../common/Badge.svelte";
import FactorsString from "../treatments/FactorsString.svelte";
import TimeSince from "../common/TimeSince.svelte";
export let game;
export let players;
Expand All @@ -19,11 +19,13 @@
}
}
console.log(game);
function getPlayerIconClass(player) {
if (!player.online) return "text-red-400";
if (player.ready) return "text-green-400";
if (player.overflow) return "text-orange-300"
if (player.overflow) return "text-orange-300";
return "text-gray-400";
}
Expand Down Expand Up @@ -51,7 +53,6 @@
let playersList = [];
$: {
if (playerCount > 0 && p) {
playersList = [];
for (let i = 0; i < Math.max(playerCount, p.length); i++) {
Expand All @@ -61,32 +62,47 @@
id: player && player.id,
ready: player && player.get("introDone"),
overflow: i + 1 > playerCount,
online: player && playersStatusMap.get(player.get("participantID"))
online: player && playersStatusMap.get(player.get("participantID")),
});
}
}
}
</script>

<li
class="divide-y divide-gray-200 rounded-lg bg-white shadow flex flex-col w-full items-between justify-between"
>
<div class="flex w-full items-between justify-between space-x-6 p-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<Badge color={statusColor}>
{status}
</Badge>
</div>
<p class="mt-1 truncate text-sm text-gray-500">
{#if treatments}
<FactorsString lines factors={treatments} />
{/if}
</p>
</div>
</div>
<div class="p-6 space-x-2 space-y-2">
<tr>
<!-- <td
class="whitespace-nowrap py-2 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
>
{game.get("index")}
</td> -->
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">
<Badge color={statusColor}>
{status}
</Badge>
</td>
<td
class="whitespace-nowrap px-3 py-2 text-sm text-gray-500"
title={formatFactorsToString(game.get("treatment"), "\n")}
>
{game.get("treatmentName") || ""}
</td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">
{#if game.get("start")}
<TimeSince time={new Date(game.attrs["start"]["createdAt"])} />
{/if}
</td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">
{#if game.get("ended")}
<TimeSince time={new Date(game.attrs["ended"]["createdAt"])} />
{/if}
</td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">
{playersList.length}
</td>
<td
class="relative whitespace-nowrap py-2 pl-3 pr-4 text-sm
font-medium sm:pr-0 space-x-2 space-y-2"
>
{#each playersList as plyr}
<div class="inline-block w-4 h-4">
{#if plyr.player}
Expand Down Expand Up @@ -119,5 +135,21 @@
{/if}
</div>
{/each}
</td>

<!-- <div class="flex w-full items-between justify-between space-x-6 p-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<Badge color={statusColor}>
{status}
</Badge>
</div>
<p class="mt-1 truncate text-sm text-gray-500">
{#if treatments}
<FactorsString lines factors={treatments} />
{/if}
</p>
</div>
</div>
</li>
<div class="p-6 space-x-2 space-y-2" /> -->
</tr>
Loading

0 comments on commit 10de4bb

Please sign in to comment.