From 52d7ba2ecdcb6b680239ce32fbece3fc65f464c5 Mon Sep 17 00:00:00 2001 From: Yann Amsellem Date: Fri, 10 Jan 2025 14:19:55 +0100 Subject: [PATCH] chore(ui): unify ui on sidebar tabs Adding search bar on each tab and set the same font size and weight for titles --- src/lib/components/Datasets/Datasets.svelte | 14 ++++++-------- src/lib/components/Datasets/utils.ts | 4 ++-- src/lib/components/History.svelte | 12 ++++++++++-- src/lib/components/Queries/Queries.svelte | 20 ++++++++++++++++++-- src/lib/icons/Database.svelte | 16 ---------------- 5 files changed, 36 insertions(+), 30 deletions(-) delete mode 100644 src/lib/icons/Database.svelte diff --git a/src/lib/components/Datasets/Datasets.svelte b/src/lib/components/Datasets/Datasets.svelte index a57e28c..74fa2d3 100644 --- a/src/lib/components/Datasets/Datasets.svelte +++ b/src/lib/components/Datasets/Datasets.svelte @@ -2,7 +2,6 @@ import type { Table } from '$lib/olap-engine'; import SearchBar from '$lib/components/SearchBar.svelte'; - import Database from '$lib/icons/Database.svelte'; import TableC from '$lib/icons/Table.svelte'; import { filter, @@ -17,8 +16,6 @@ let { tables = [] }: Props = $props(); - let loading = $state(false); - let search = $state(''); const filtered = $derived(filter(tables, search)); @@ -28,15 +25,14 @@ {#each filtered as source, i (source.name)}
- {#if source.engine === 'MergeTree'} - + {#if Object.keys(SOURCE_TYPE_SHORT_NAME_MAP).includes(source.engine)} + + {SOURCE_TYPE_SHORT_NAME_MAP[source.engine]} + {:else} {/if}

{source.name}

- - {SOURCE_TYPE_SHORT_NAME_MAP[source.engine]} -
    {#each source.columns ?? [] as column} @@ -94,6 +90,8 @@ } h3 { + font-size: 1rem; + font-weight: 500; margin: 0; } diff --git a/src/lib/components/Datasets/utils.ts b/src/lib/components/Datasets/utils.ts index 58dfc86..812b89d 100644 --- a/src/lib/components/Datasets/utils.ts +++ b/src/lib/components/Datasets/utils.ts @@ -14,13 +14,13 @@ export function filter(sources: Table[], search: string) { export const SOURCE_TYPE_COLOR_MAP: Record = { FILE: 'hsl(58deg 37% 28%)', S3: 'hsl(20deg 37% 28%)', - MergeTree: 'hsl(199deg 37% 28%)' + ReplacingMergeTree: 'hsl(199deg 37% 28%)' }; export const SOURCE_TYPE_SHORT_NAME_MAP: Record = { FILE: 'FILE', S3: 'S3', - MergeTree: 'MT' + ReplacingMergeTree: 'MT' }; export function remove_nullable(type: string) { diff --git a/src/lib/components/History.svelte b/src/lib/components/History.svelte index 3831e01..0e7d92e 100644 --- a/src/lib/components/History.svelte +++ b/src/lib/components/History.svelte @@ -2,6 +2,7 @@ import type { HistoryEntry } from '$lib/repositories/history'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; + import SearchBar from './SearchBar.svelte'; dayjs.extend(relativeTime); @@ -11,10 +12,17 @@ } let { history: entries, onHistoryClick }: Props = $props(); + + let search = $state(''); + + let filtered = $derived( + search ? entries.filter((e) => e.content.toLowerCase().includes(search.toLowerCase())) : entries + ); +
      - {#each entries as entry} + {#each filtered as entry}
    1. { @@ -72,7 +80,7 @@ .content { height: 18px; - font-weight: 600; + font-weight: 500; padding: 3px 0; line-height: 1.15; diff --git a/src/lib/components/Queries/Queries.svelte b/src/lib/components/Queries/Queries.svelte index c6a9aab..7ea2694 100644 --- a/src/lib/components/Queries/Queries.svelte +++ b/src/lib/components/Queries/Queries.svelte @@ -3,6 +3,7 @@ import type { Query } from '$lib/repositories/queries'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; + import SearchBar from '../SearchBar.svelte'; dayjs.extend(relativeTime); @@ -29,10 +30,25 @@ let input = $state.raw(); $effect(() => input?.focus()); + + let search = $state(''); + const filtered = $derived(search ? filter(queries, search) : queries); + + function filter(queries: Query[], search: string) { + if (!search) return queries; + + const lower_search = search.toLowerCase(); + return queries.filter((q) => { + return ( + q.name.toLowerCase().includes(lower_search) || q.sql.toLowerCase().includes(lower_search) + ); + }); + } +
        - {#each queries as query (query.id)} + {#each filtered as query (query.id)}
      1. { @@ -139,7 +155,7 @@ -webkit-appearance: none; width: 100%; height: 18px; - font-weight: 600; + font-weight: 500; outline: none; margin: 0; padding: 0; diff --git a/src/lib/icons/Database.svelte b/src/lib/icons/Database.svelte deleted file mode 100644 index 2ec9b79..0000000 --- a/src/lib/icons/Database.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - - - -