Something went wrong. Try again.
COSMO is a tool for exploring astronomical data from the Gaia catalog. tedius.tngl.sh/cosmo
svelte astro
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<script lang="ts"> import { proyectState } from "../State.svelte"; import { FILTERS, type Filter, applyFilters } from "../State.svelte"; import Block from "./Block.svelte"; import Toggle from "./Toggle.svelte";
let filters: Filter[] = $state(FILTERS); let filtering = $state(false);
$effect(() => { const activeFilters = filters.map((f) => ({ ...f })); filtering = true; setTimeout(() => { if (!proyectState.current) return; proyectState.current.filteredData = applyFilters( proyectState.current.rawData, activeFilters, ); filtering = false; }, 0); });</script>
<Block title="Filters" color={filtering ? "var(--textMuted)" : "var(--blue)"} tooltip="Click on each filter to toggle it on or off. Only rows matching the active filters are shown." tooltipPos="left"> <!-- every wrap in a div for custom height --> <div> <!-- each filter is a botton that activates de filter --> {#each filters as filter} <Toggle bind:value={filter.active} label={filter.label} /> {/each} </div></Block>
<style> div { display: flex; flex-direction: column; gap: 0.5em; }</style>