budibase/packages/builder/src/components/integration/QueryViewer.svelte

<script>
  import { goto } from "@roxi/routify"
  import {
    Icon,
    Select,
    Button,
    ButtonGroup,
    Body,
    Label,
    Layout,
    Input,
    Heading,
    Tabs,
    Tab,
  } from "@budibase/bbui"
  import { notifications, Divider } from "@budibase/bbui"
  import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
  import IntegrationQueryEditor from "components/integration/index.svelte"
  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
  import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
  import { datasources, integrations, queries } from "stores/backend"
  import { capitalise } from "../../helpers"
  import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
  import JSONPreview from "./JSONPreview.svelte"
  import { SchemaTypeOptions } from "constants/backend"
  import KeyValueBuilder from "./KeyValueBuilder.svelte"
  import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
  import AccessLevelSelect from "./AccessLevelSelect.svelte"

  export let query

  let fields = query?.schema ? schemaToFields(query.schema) : []
  let parameters
  let data = []
  let saveId
  const transformerDocs = "https://docs.budibase.com/docs/transformers"

  $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
  $: query.schema = fieldsToSchema(fields)
  $: datasourceType = datasource?.source
  $: integrationInfo = datasourceType ? $integrations[datasourceType] : null
  $: queryConfig = integrationInfo?.query
  $: shouldShowQueryConfig = queryConfig && query.queryVerb
  $: readQuery = query.queryVerb === "read" || query.readable
  $: queryInvalid = !query.name || (readQuery && data.length === 0)

  // seed the transformer
  if (query && !query.transformer) {
    query.transformer = "return data"
  }

  function resetDependentFields() {
    if (query.fields.extra) {
      query.fields.extra = {}
    }
  }

  function populateExtraQuery(extraQueryFields) {
    query.fields.extra = extraQueryFields
  }

  async function previewQuery() {
    try {
      const response = await queries.preview(query)
      if (response.rows.length === 0) {
        notifications.info(
          "Query results empty. Please execute a query with results to create your schema."
        )
        return
      }
      data = response.rows
      fields = response.schema
      notifications.success("Query executed successfully")
    } catch (error) {
      notifications.error(`Query Error: ${error.message}`)
    }
  }

  async function saveQuery() {
    try {
      const { _id } = await queries.save(query.datasourceId, query)
      saveId = _id
      notifications.success(`Query saved successfully.`)
      $goto(`../${_id}`)
    } catch (error) {
      notifications.error("Error creating query")
    }
  }
</script>

<Layout gap="S" noPadding>
  <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
  <Divider />
  <Heading size="S">Config</Heading>
  <div class="config">
    <div class="config-field">
      <Label>Query Name</Label>
      <Input bind:value={query.name} />
    </div>
    {#if queryConfig}
      <div class="config-field">
        <Label>Function</Label>
        <Select
          bind:value={query.queryVerb}
          on:change={resetDependentFields}
          options={Object.keys(queryConfig)}
          getOptionLabel={verb =>
            queryConfig[verb]?.displayName || capitalise(verb)}
        />
      </div>
      <div class="config-field">
        <AccessLevelSelect {saveId} {query} label="Access Level" />
      </div>
      {#if integrationInfo?.extra && query.queryVerb}
        <ExtraQueryConfig
          {query}
          {populateExtraQuery}
          config={integrationInfo.extra}
        />
      {/if}
      <BindingBuilder bind:queryBindings={query.parameters} bindable={false} />
    {/if}
  </div>
  {#if shouldShowQueryConfig}
    <Divider />
    <div class="config">
      <Heading size="S">Fields</Heading>
      <Body size="S">Fill in the fields specific to this query.</Body>
      <IntegrationQueryEditor
        {datasource}
        {query}
        height={200}
        schema={queryConfig[query.queryVerb]}
        bind:parameters
      />
      <Divider />
    </div>
    <div class="config">
      <div class="help-heading">
        <Heading size="S">Transformer</Heading>
        <Icon
          on:click={() => window.open(transformerDocs)}
          hoverable
          name="Help"
          size="L"
        />
      </div>
      <Body size="S"
        >Add a JavaScript function to transform the query result.</Body
      >
      <CodeMirrorEditor
        height={200}
        label="Transformer"
        value={query.transformer}
        resize="vertical"
        on:change={e => (query.transformer = e.detail)}
      />
      <Divider />
    </div>
    <div class="viewer-controls">
      <Heading size="S">Results</Heading>
      <ButtonGroup gap="M">
        <Button cta disabled={queryInvalid} on:click={saveQuery}>
          Save Query
        </Button>
        <Button secondary on:click={previewQuery}>Run Query</Button>
      </ButtonGroup>
    </div>
    <Body size="S">
      Below, you can preview the results from your query and change the schema.
    </Body>
    <section class="viewer">
      {#if data}
        <Tabs selected="JSON">
          <Tab title="JSON">
            <JSONPreview data={data[0]} minHeight="120" />
          </Tab>
          <Tab title="Schema">
            <KeyValueBuilder
              bind:object={fields}
              name="field"
              headings
              options={SchemaTypeOptions}
            />
          </Tab>
          <Tab title="Preview">
            <ExternalDataSourceTable {query} {data} />
          </Tab>
        </Tabs>
      {/if}
    </section>
  {/if}
</Layout>

<style>
  .config {
    display: grid;
    grid-gap: var(--spacing-s);
  }

  .config-field {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: var(--spacing-l);
    align-items: center;
  }

  .help-heading {
    display: flex;
    justify-content: space-between;
  }

  .viewer {
    min-height: 200px;
    width: 640px;
  }

  .viewer-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-m);
    min-width: 150px;
    align-items: center;
  }
</style>
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`<script>`
wip: routify 2021-03-18 00:40:24 +13:00			`import { goto } from "@roxi/routify"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import {`
replace remix 2021-04-23 21:55:27 +12:00			`Icon,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Select,`
			`Button,`
Fix editor 2021-04-29 01:46:11 +12:00			`ButtonGroup,`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`Body,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Label,`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`Layout,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Input,`
			`Heading,`
QueryViewer now uses Tabs component 2021-04-21 23:41:44 +12:00			`Tabs,`
replace remix 2021-04-23 21:55:27 +12:00			`Tab,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`} from "@budibase/bbui"`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`import { notifications, Divider } from "@budibase/bbui"`
Feat: Add collection fields as "extra" query config for MongoDB 2021-07-09 00:38:49 +12:00			`import ExtraQueryConfig from "./ExtraQueryConfig.svelte"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import IntegrationQueryEditor from "components/integration/index.svelte"`
new datasource design 2021-01-08 02:13:46 +13:00			`import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"`
Adding bindings to rest API, adding in spaceship placeholder, updating the look of some other components, cleaning up some whitespace. 2021-12-09 06:58:30 +13:00			`import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"`
Adding access controls to rest query ui. 2021-12-08 07:50:29 +13:00			`import { datasources, integrations, queries } from "stores/backend"`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`import { capitalise } from "../../helpers"`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`import JSONPreview from "./JSONPreview.svelte"`
Adding access controls to rest query ui. 2021-12-08 07:50:29 +13:00			`import { SchemaTypeOptions } from "constants/backend"`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`import KeyValueBuilder from "./KeyValueBuilder.svelte"`
			`import { fieldsToSchema, schemaToFields } from "helpers/data/utils"`
Adding query save, fixing routing to handle existing rest queries, adding in full saving of enabled headers functionality, fixing various issues discovered while testing. 2021-12-08 07:24:10 +13:00			`import AccessLevelSelect from "./AccessLevelSelect.svelte"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
			`export let query`

Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`let fields = query?.schema ? schemaToFields(query.schema) : []`
new datasource design 2021-01-08 02:13:46 +13:00			`let parameters`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`let data = []`
Adding query save, fixing routing to handle existing rest queries, adding in full saving of enabled headers functionality, fixing various issues discovered while testing. 2021-12-08 07:24:10 +13:00			`let saveId`
fix broken docs links 2022-03-24 02:47:27 +13:00			`const transformerDocs = "https://docs.budibase.com/docs/transformers"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
lint 2021-06-09 04:14:46 +12:00			`$: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)`
allow type editing on custom query datasource schemas 2021-11-26 00:20:20 +13:00			`$: query.schema = fieldsToSchema(fields)`
pass field values in binding drawer 2021-01-15 03:22:24 +13:00			`$: datasourceType = datasource?.source`
Fix for #4440, fixing validation of API endpoints. 2022-02-12 23:35:10 +13:00			`$: integrationInfo = datasourceType ? $integrations[datasourceType] : null`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`$: queryConfig = integrationInfo?.query`
more design updates 2021-02-19 07:55:08 +13:00			`$: shouldShowQueryConfig = queryConfig && query.queryVerb`
do not make query execution a requirement 2021-06-09 01:26:06 +12:00			`$: readQuery = query.queryVerb === "read" \|\| query.readable`
lint 2021-06-09 04:14:46 +12:00			`$: queryInvalid = !query.name \|\| (readQuery && data.length === 0)`
custom fields in queries 2021-01-14 03:11:53 +13:00
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`// seed the transformer`
			`if (query && !query.transformer) {`
			`query.transformer = "return data"`
			`}`

Feat: Add collection fields as "extra" query config for MongoDB 2021-07-09 00:38:49 +12:00			`function resetDependentFields() {`
Adding the ability to set a permission for data source queries. 2021-11-10 05:25:23 +13:00			`if (query.fields.extra) {`
			`query.fields.extra = {}`
			`}`
			`}`

Feat: Add collection fields as "extra" query config for MongoDB 2021-07-09 00:38:49 +12:00			`function populateExtraQuery(extraQueryFields) {`
			`query.fields.extra = extraQueryFields`
			`}`

separation of datasources and queries 2020-12-19 07:19:43 +13:00			`async function previewQuery() {`
			`try {`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`const response = await queries.preview(query)`
			`if (response.rows.length === 0) {`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			`notifications.info(`
lint 2021-01-19 04:40:26 +13:00			`"Query results empty. Please execute a query with results to create your schema."`
			`)`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`return`
lint 2021-01-19 04:40:26 +13:00			`}`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`data = response.rows`
			`fields = response.schema`
Refactor all backend stores and their usages to use new core API and handle errors 2022-01-25 01:37:22 +13:00			`notifications.success("Query executed successfully")`
			`} catch (error) {`
redis integration complete 2022-04-01 03:44:06 +13:00			notifications.error(`Query Error: ${error.message}`)
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`}`
			`}`

new datasource design 2021-01-08 02:13:46 +13:00			`async function saveQuery() {`
			`try {`
Update to support new stores 2021-04-01 22:29:47 +13:00			`const { _id } = await queries.save(query.datasourceId, query)`
Adding query save, fixing routing to handle existing rest queries, adding in full saving of enabled headers functionality, fixing various issues discovered while testing. 2021-12-08 07:24:10 +13:00			`saveId = _id`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			notifications.success(`Query saved successfully.`)
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			$goto(`../${_id}`)
Refactor all backend stores and their usages to use new core API and handle errors 2022-01-25 01:37:22 +13:00			`} catch (error) {`
			`notifications.error("Error creating query")`
new datasource design 2021-01-08 02:13:46 +13:00			`}`
			`}`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`</script>`

converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Layout gap="S" noPadding>`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="M">Query {integrationInfo?.friendlyName}</Heading>`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Config</Heading>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<div class="config">`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<div class="config-field">`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Label>Query Name</Label>`
			`<Input bind:value={query.name} />`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`</div>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`{#if queryConfig}`
			`<div class="config-field">`
			`<Label>Function</Label>`
			`<Select`
			`bind:value={query.queryVerb}`
Feat: Add collection fields as "extra" query config for MongoDB 2021-07-09 00:38:49 +12:00			`on:change={resetDependentFields}`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`options={Object.keys(queryConfig)}`
Add explicit prettier options 2021-05-04 22:32:22 +12:00			`getOptionLabel={verb =>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`queryConfig[verb]?.displayName \|\| capitalise(verb)}`
			`/>`
			`</div>`
Adding the ability to set a permission for data source queries. 2021-11-10 05:25:23 +13:00			`<div class="config-field">`
Adding query save, fixing routing to handle existing rest queries, adding in full saving of enabled headers functionality, fixing various issues discovered while testing. 2021-12-08 07:24:10 +13:00			`<AccessLevelSelect {saveId} {query} label="Access Level" />`
Adding the ability to set a permission for data source queries. 2021-11-10 05:25:23 +13:00			`</div>`
Feat: Add collection fields as "extra" query config for MongoDB 2021-07-09 00:38:49 +12:00			`{#if integrationInfo?.extra && query.queryVerb}`
			`<ExtraQueryConfig`
			`{query}`
			`{populateExtraQuery}`
			`config={integrationInfo.extra}`
			`/>`
			`{/if}`
Renaming bindableOptions to bindings and replacing the query bindings variable with queryBindings. 2022-01-21 05:12:32 +13:00			`<BindingBuilder bind:queryBindings={query.parameters} bindable={false} />`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`{/if}`
			`</div>`
			`{#if shouldShowQueryConfig}`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<div class="config">`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Fields</Heading>`
Convert Body component to use size="" prop 2021-04-30 23:31:45 +12:00			`<Body size="S">Fill in the fields specific to this query.</Body>`
custom fields in queries 2021-01-14 03:11:53 +13:00			`<IntegrationQueryEditor`
more design updates 2021-02-19 07:55:08 +13:00			`{datasource}`
custom fields in queries 2021-01-14 03:11:53 +13:00			`{query}`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`height={200}`
more design updates 2021-02-19 07:55:08 +13:00			`schema={queryConfig[query.queryVerb]}`
replace remix 2021-04-23 21:55:27 +12:00			`bind:parameters`
			`/>`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`</div>`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`<div class="config">`
Some final tweaks. 2021-10-14 04:42:07 +13:00			`<div class="help-heading">`
			`<Heading size="S">Transformer</Heading>`
			`<Icon`
			`on:click={() => window.open(transformerDocs)}`
			`hoverable`
			`name="Help"`
			`size="L"`
			`/>`
			`</div>`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`<Body size="S"`
Some final tweaks. 2021-10-14 04:42:07 +13:00			`>Add a JavaScript function to transform the query result.</Body`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`>`
			`<CodeMirrorEditor`
			`height={200}`
			`label="Transformer"`
			`value={query.transformer}`
Some final tweaks. 2021-10-14 04:42:07 +13:00			`resize="vertical"`
Adding the basics of the query transformers to the frontend and to the backend, as well as switching to vm2 for script running. 2021-10-13 06:45:13 +13:00			`on:change={e => (query.transformer = e.detail)}`
			`/>`
			`<Divider />`
			`</div>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<div class="viewer-controls">`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Results</Heading>`
Fix for #4440, fixing validation of API endpoints. 2022-02-12 23:35:10 +13:00			`<ButtonGroup gap="M">`
lint 2021-06-09 04:14:46 +12:00			`<Button cta disabled={queryInvalid} on:click={saveQuery}>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`Save Query`
			`</Button>`
Fix editor 2021-04-29 01:46:11 +12:00			`<Button secondary on:click={previewQuery}>Run Query</Button>`
			`</ButtonGroup>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`</div>`
Convert Body component to use size="" prop 2021-04-30 23:31:45 +12:00			`<Body size="S">`
Fix editor 2021-04-29 01:46:11 +12:00			`Below, you can preview the results from your query and change the schema.`
			`</Body>`
			`<section class="viewer">`
			`{#if data}`
			`<Tabs selected="JSON">`
			`<Tab title="JSON">`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`<JSONPreview data={data[0]} minHeight="120" />`
Fix editor 2021-04-29 01:46:11 +12:00			`</Tab>`
			`<Tab title="Schema">`
Adding all response capabilities. 2021-12-07 06:39:51 +13:00			`<KeyValueBuilder`
			`bind:object={fields}`
			`name="field"`
			`headings`
			`options={SchemaTypeOptions}`
			`/>`
Fix editor 2021-04-29 01:46:11 +12:00			`</Tab>`
			`<Tab title="Preview">`
			`<ExternalDataSourceTable {query} {data} />`
			`</Tab>`
			`</Tabs>`
			`{/if}`
			`</section>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`{/if}`
			`</Layout>`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
			`<style>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`.config {`
			`display: grid;`
			`grid-gap: var(--spacing-s);`
			`}`
Some final tweaks. 2021-10-14 04:42:07 +13:00
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`.config-field {`
			`display: grid;`
			`grid-template-columns: 20% 1fr;`
			`grid-gap: var(--spacing-l);`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`align-items: center;`
			`}`

Some final tweaks. 2021-10-14 04:42:07 +13:00			`.help-heading {`
			`display: flex;`
			`justify-content: space-between;`
			`}`

Query results section ui updated - json ui emphasized - min-height added to stop screen bouncing when navigating across tabs - spacing adjusted 2021-02-22 22:01:40 +13:00			`.viewer {`
			`min-height: 200px;`
limit the width of the preview component 2021-08-24 03:32:27 +12:00			`width: 640px;`
Query results section ui updated - json ui emphasized - min-height added to stop screen bouncing when navigating across tabs - spacing adjusted 2021-02-22 22:01:40 +13:00			`}`

Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`.viewer-controls {`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`display: flex;`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`flex-direction: row;`
more design updates 2021-02-19 07:55:08 +13:00			`justify-content: space-between;`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`gap: var(--spacing-m);`
			`min-width: 150px;`
lint 2021-02-20 03:31:07 +13:00			`align-items: center;`
I emphasized the naming of a query Label text added and made semi-bold Removed placeholder text 2021-02-05 23:32:10 +13:00			`}`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`</style>`