Nuša Pukšič
11 months ago
8 changed files with 173 additions and 126 deletions
@ -1,52 +1,75 @@
@@ -1,52 +1,75 @@
|
||||
<!-- |
||||
Legend Component |
||||
<!-- Legend Component (Svelte 5, Runes Mode) --> |
||||
|
||||
Displays a legend explaining the different node and link types in the |
||||
event network visualization. |
||||
--> |
||||
<script lang="ts"> |
||||
// Optional class name to apply to the legend container |
||||
export let className: string = ""; |
||||
import {Button} from 'flowbite-svelte'; |
||||
import { CaretDownOutline, CaretUpOutline } from "flowbite-svelte-icons"; |
||||
let { |
||||
collapsedOnInteraction = false, |
||||
className = "" |
||||
} = $props<{collapsedOnInteraction: boolean, className: string}>(); |
||||
|
||||
let expanded = $state(true); |
||||
|
||||
$effect(() => { |
||||
if (collapsedOnInteraction) { |
||||
expanded = false; |
||||
} |
||||
}); |
||||
|
||||
function toggle() { |
||||
expanded = !expanded; |
||||
} |
||||
</script> |
||||
|
||||
<div class="leather-legend {className}"> |
||||
<h3 class="h-leather">Legend</h3> |
||||
<ul class="legend-list"> |
||||
<!-- Index event node --> |
||||
<li class="legend-item"> |
||||
<div class="legend-icon"> |
||||
<span |
||||
class="legend-circle" |
||||
style="background-color: hsl(200, 70%, 75%)" |
||||
> |
||||
<span class="legend-letter">I</span> |
||||
</span> |
||||
</div> |
||||
<span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span> |
||||
</li> |
||||
|
||||
<!-- Content event node --> |
||||
<li class="legend-item"> |
||||
<div class="legend-icon"> |
||||
<span class="legend-circle content"> |
||||
<span class="legend-letter">C</span> |
||||
</span> |
||||
</div> |
||||
<span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span> |
||||
</li> |
||||
|
||||
<!-- Link arrow --> |
||||
<li class="legend-item"> |
||||
<svg class="w-6 h-6 mr-2" viewBox="0 0 24 24"> |
||||
<path |
||||
d="M4 12h16M16 6l6 6-6 6" |
||||
class="network-link-leather" |
||||
stroke-width="2" |
||||
fill="none" |
||||
/> |
||||
</svg> |
||||
<span class="legend-text">Arrows indicate reading/sequence order</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class={`leather-legend ${className}`}> |
||||
<div class="flex items-center justify-between space-x-3"> |
||||
<h3 class="h-leather">Legend</h3> |
||||
<Button color='none' outline size='xs' onclick={toggle} class="rounded-full" > |
||||
{#if expanded} |
||||
<CaretUpOutline /> |
||||
{:else} |
||||
<CaretDownOutline /> |
||||
{/if} |
||||
</Button> |
||||
</div> |
||||
|
||||
{#if expanded} |
||||
<ul class="legend-list"> |
||||
<!-- Index event node --> |
||||
<li class="legend-item"> |
||||
<div class="legend-icon"> |
||||
<span |
||||
class="legend-circle" |
||||
style="background-color: hsl(200, 70%, 75%)" |
||||
> |
||||
<span class="legend-letter">I</span> |
||||
</span> |
||||
</div> |
||||
<span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span> |
||||
</li> |
||||
|
||||
<!-- Content event node --> |
||||
<li class="legend-item"> |
||||
<div class="legend-icon"> |
||||
<span class="legend-circle content"> |
||||
<span class="legend-letter">C</span> |
||||
</span> |
||||
</div> |
||||
<span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span> |
||||
</li> |
||||
|
||||
<!-- Link arrow --> |
||||
<li class="legend-item"> |
||||
<svg class="w-6 h-6 mr-2" viewBox="0 0 24 24"> |
||||
<path |
||||
d="M4 12h16M16 6l6 6-6 6" |
||||
class="network-link-leather" |
||||
stroke-width="2" |
||||
fill="none" |
||||
/> |
||||
</svg> |
||||
<span class="legend-text">Arrows indicate reading/sequence order</span> |
||||
</li> |
||||
</ul> |
||||
{/if} |
||||
</div> |
||||
|
||||
@ -0,0 +1,52 @@
@@ -0,0 +1,52 @@
|
||||
<!-- |
||||
Settings Component |
||||
--> |
||||
<script lang="ts"> |
||||
import {Button} from 'flowbite-svelte'; |
||||
import { CaretDownOutline, CaretUpOutline } from "flowbite-svelte-icons"; |
||||
import { fly } from "svelte/transition"; |
||||
import { quintOut } from "svelte/easing"; |
||||
import EventLimitControl from "$lib/components/EventLimitControl.svelte"; |
||||
import EventRenderLevelLimit from "$lib/components/EventRenderLevelLimit.svelte"; |
||||
import { networkFetchLimit } from "$lib/state"; |
||||
|
||||
let { |
||||
count = 0, |
||||
onupdate |
||||
} = $props<{count: number, onupdate: () => void}>(); |
||||
|
||||
let expanded = $state(false); |
||||
|
||||
function toggle() { |
||||
expanded = !expanded; |
||||
} |
||||
/** |
||||
* Handles updates to visualization settings |
||||
*/ |
||||
function handleLimitUpdate() { |
||||
onupdate(); |
||||
} |
||||
</script> |
||||
|
||||
<div class="leather-legend sm:!right-1 sm:!left-auto" > |
||||
<div class="flex items-center justify-between space-x-3"> |
||||
<h3 class="h-leather">Settings</h3> |
||||
<Button color='none' outline size='xs' onclick={toggle} class="rounded-full" > |
||||
{#if expanded} |
||||
<CaretUpOutline /> |
||||
{:else} |
||||
<CaretDownOutline /> |
||||
{/if} |
||||
</Button> |
||||
</div> |
||||
|
||||
{#if expanded} |
||||
<div class="space-y-4"> |
||||
<span class="leather bg-transparent legend-text"> |
||||
Showing {count} events from {$networkFetchLimit} headers |
||||
</span> |
||||
<EventLimitControl on:update={handleLimitUpdate} /> |
||||
<EventRenderLevelLimit on:update={handleLimitUpdate} /> |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
Loading…
Reference in new issue