kafka-dance-frontend/src/lib/QueryInput.svelte

<script>
  import { slide } from 'svelte/transition'
  export let big = false
  export let jsFilter
  export let mutableObjects
  export let queryCode
</script>

<div class="query-input-header">
    <div on:click={() => jsFilter = !jsFilter}>
        Use JavaScript to filter messages
        <input type=checkbox bind:checked={jsFilter}>
    </div>
</div>

<div class={"query-input-display" + (big ? ' big' : '')}>
    {#if jsFilter}
        <div class="query-input-hideable" transition:slide|local>
            <div title="If enabled, mutations made by the below code will be displayed in the result data.">
                Allow JavaScript to mutate objects
                <input type=checkbox bind:checked={mutableObjects}>
            </div>
            <textarea class='query-input' bind:value={queryCode}></textarea>
        </div>
    {/if}
</div>

<!--suppress CssUnusedSymbol -->
<style>
    .query-input-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .query-input-display {
        display: flex;
        flex-direction: column;
    }

    .query-input-hideable {
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        /* For some reason, using flex-grow: 1; broke the slide in transition */
        height: 100%;
    }

    .query-input-display.big {
        height: 60vh;
        width: 60vw;
    }

    .query-input {
        min-height: 5vw;
        resize: vertical;
        flex-grow: 1;
    }

    textarea {
        margin-top: 1em;
        margin-bottom: 0;
        overflow: hidden;
        z-index: 1;
        margin-left: 0;

        background-color: #222222;
        color: #d0dde9;

        border: none;
        font-size: 14px;
        font-family: var(--font-mono);
        padding: 1em;
        overflow-x: auto;
        min-width: 20vw;
    }
</style>