sqlite-hub 0.9.3 → 0.9.6

package/frontend/js/views/data.js

@@ -241,38 +241,34 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
     if (!table || !columns.length) {
         return '';
     }
-
-    return `
-    <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
-      <label class="control-shell flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-3">
-        <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
-        <input
-          class="control-input control-input--ghost min-w-0 flex-1 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
-          data-bind="data-search-query"
-          placeholder="Filter current page..."
-          type="search"
-          value="${escapeHtml(state.dataBrowser.searchQuery ?? '')}"
-        />
-      </label>
-      <select
-        class="control-select min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
-        data-bind="data-search-column"
-      >
-        ${columns
-            .map(
-                columnName => `
-              <option value="${escapeHtml(columnName)}" ${columnName === activeColumn ? 'selected' : ''}>
-                ${escapeHtml(columnName)}
-              </option>
-            `,
-            )
-            .join('')}
-      </select>
-      <div class="text-[10px] font-mono tracking-[0.14em] text-on-surface-variant/55">
-        ${escapeHtml(formatNumber(filteredRowCount))} match${filteredRowCount === 1 ? '' : 'es'} on this page
-      </div>
-    </div>
-  `;
+    const columnOptions = columns
+        .map(columnName => [
+            '<option value="',
+            escapeHtml(columnName),
+            '" ',
+            columnName === activeColumn ? 'selected' : '',
+            '>',
+            escapeHtml(columnName),
+            '</option>',
+        ].join(''))
+        .join('');
+
+    return [
+        '<div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">',
+        '<label class="control-shell flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-3">',
+        '<span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>',
+        '<input class="control-input control-input--ghost min-w-0 flex-1 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40" data-bind="data-search-query" placeholder="Filter current page..." type="search" value="',
+        escapeHtml(state.dataBrowser.searchQuery ?? ''),
+        '" /></label>',
+        '<select class="control-select min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none" data-bind="data-search-column">',
+        columnOptions,
+        '</select>',
+        '<div class="text-[10px] font-mono tracking-[0.14em] text-on-surface-variant/55">',
+        escapeHtml(formatNumber(filteredRowCount)),
+        ' match',
+        filteredRowCount === 1 ? '' : 'es',
+        ' on this page</div></div>',
+    ].join('');
 }
 
 function renderTableSurface(state) {
@@ -331,107 +327,95 @@ function renderTableSurface(state) {
     const pageSizes = [25, 50, 100];
     const filteredRowCount = filteredRows.length;
     const hasActiveSearch = Boolean(searchQuery);
+    const gridMarkup = renderDataGrid({
+        columns,
+        rows: filteredRows.map(({ row }) => row),
+        tableClass: 'min-w-full border-collapse text-left font-mono text-xs',
+        theadClass: 'sticky top-0 z-10 bg-surface-container-highest',
+        tbodyClass: 'divide-y divide-outline-variant/5',
+        getRowClass: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+            return [
+                'data-browser-row',
+                filteredIndex % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd',
+                state.dataBrowser.selectedRowIndex === rowIndex ? 'is-selected' : '',
+                'cursor-pointer transition-colors',
+            ].filter(Boolean).join(' ');
+        },
+        getRowAttrs: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
 
-    return `
-    <div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">
-      ${renderTableSearchBar(table, state, activeColumn, filteredRowCount)}
-      <div class="custom-scrollbar flex-1 overflow-auto">
-        ${renderDataGrid({
-            columns,
-            rows: filteredRows.map(({ row }) => row),
-            tableClass: 'min-w-full border-collapse text-left font-mono text-xs',
-            theadClass: 'sticky top-0 z-10 bg-surface-container-highest',
-            tbodyClass: 'divide-y divide-outline-variant/5',
-            getRowClass: (_, filteredIndex) => {
-                const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
-
-                return `data-browser-row ${
-                    filteredIndex % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd'
-                } ${state.dataBrowser.selectedRowIndex === rowIndex ? 'is-selected' : ''} cursor-pointer transition-colors`;
-            },
-            getRowAttrs: (_, filteredIndex) => {
-                const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
-
-                return `data-action="select-data-row" data-row-index="${rowIndex}"`;
-            },
-        })}
-        ${
-            !table.rows?.length
-                ? `
-                <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
-                  <p class="font-mono text-[10px] uppercase tracking-[0.22em] text-on-surface-variant/40">
-                    TABLE_IS_EMPTY
-                  </p>
-                </div>
-              `
-                : !filteredRowCount
-                  ? `
-                  <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
-                    <p class="font-mono text-[10px] tracking-[0.18em] text-on-surface-variant/40">
-                      ${hasActiveSearch ? 'No matching rows on this page.' : 'No rows available.'}
-                    </p>
-                  </div>
-                `
-                  : ''
-        }
-      </div>
-      <footer class="flex flex-wrap items-center justify-between gap-4 border-t border-outline-variant/10 bg-surface-container px-6 py-4">
-        <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-          showing ${escapeHtml(formatNumber(fromRow))}-${escapeHtml(formatNumber(toRow))} of ${escapeHtml(
-              formatNumber(totalRows),
-          )} rows${hasActiveSearch ? ` // ${escapeHtml(formatNumber(filteredRowCount))} visible on this page` : ''}
-        </div>
-        <div class="flex flex-wrap items-center gap-4">
-          <div class="flex items-center gap-2">
-            <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              rows
-            </span>
-            <div class="flex items-center gap-2">
-              ${pageSizes
-                  .map(
-                      pageSize => `
-                    <button
-                      class="standard-button ${
-                          pageSize === (table.limit ?? state.dataBrowser.pageSize) ? 'is-active' : ''
-                      }"
-                      data-action="set-data-page-size"
-                      data-page-size="${pageSize}"
-                      type="button"
-                    >
-                      ${pageSize}
-                    </button>
-                  `,
-                  )
-                  .join('')}
-            </div>
-          </div>
-          <div class="flex items-center gap-2">
-            <button
-              class="standard-button"
-              data-action="set-data-page"
-              data-page="${page - 1}"
-              type="button"
-              ${page <= 1 ? 'disabled' : ''}
-            >
-              Prev
-            </button>
-            <div class="min-w-[7rem] text-center text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              page ${escapeHtml(formatNumber(page))} / ${escapeHtml(formatNumber(pageCount))}
-            </div>
-            <button
-              class="standard-button"
-              data-action="set-data-page"
-              data-page="${page + 1}"
-              type="button"
-              ${page >= pageCount ? 'disabled' : ''}
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      </footer>
-    </div>
-  `;
+            return ['data-action="select-data-row" data-row-index="', rowIndex, '"'].join('');
+        },
+    });
+    const emptyMarkup = !table.rows?.length
+        ? '<div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10"><p class="font-mono text-[10px] uppercase tracking-[0.22em] text-on-surface-variant/40">TABLE_IS_EMPTY</p></div>'
+        : !filteredRowCount
+          ? [
+                '<div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">',
+                '<p class="font-mono text-[10px] tracking-[0.18em] text-on-surface-variant/40">',
+                hasActiveSearch ? 'No matching rows on this page.' : 'No rows available.',
+                '</p></div>',
+            ].join('')
+          : '';
+    const visibleRowsText = hasActiveSearch
+        ? [' // ', escapeHtml(formatNumber(filteredRowCount)), ' visible on this page'].join('')
+        : '';
+    const pageSizeButtons = pageSizes
+        .map(pageSize =>
+            [
+                '<button class="standard-button ',
+                pageSize === (table.limit ?? state.dataBrowser.pageSize) ? 'is-active' : '',
+                '" data-action="set-data-page-size" data-page-size="',
+                pageSize,
+                '" type="button">',
+                pageSize,
+                '</button>',
+            ].join(''),
+        )
+        .join('');
+
+    return [
+        '<div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">',
+        renderTableSearchBar(table, state, activeColumn, filteredRowCount),
+        '<div class="custom-scrollbar flex-1 overflow-auto">',
+        gridMarkup,
+        emptyMarkup,
+        '</div>',
+        '<footer class="flex flex-wrap items-center justify-between gap-4 border-t border-outline-variant/10 bg-surface-container px-6 py-4">',
+        '<div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">showing ',
+        escapeHtml(formatNumber(fromRow)),
+        '-',
+        escapeHtml(formatNumber(toRow)),
+        ' of ',
+        escapeHtml(formatNumber(totalRows)),
+        ' rows',
+        visibleRowsText,
+        '</div>',
+        '<div class="flex flex-wrap items-center gap-4"><div class="flex items-center gap-2">',
+        '<span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">rows</span>',
+        '<div class="flex items-center gap-2">',
+        pageSizeButtons,
+        '</div></div>',
+        '<div class="flex items-center gap-2">',
+        '<button class="standard-button" data-action="set-data-page" data-page="',
+        page - 1,
+        '" type="button" ',
+        page <= 1 ? 'disabled' : '',
+        '>Prev</button>',
+        '<div class="min-w-[7rem] text-center text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">page ',
+        escapeHtml(formatNumber(page)),
+        ' / ',
+        escapeHtml(formatNumber(pageCount)),
+        '</div>',
+        '<button class="standard-button" data-action="set-data-page" data-page="',
+        page + 1,
+        '" type="button" ',
+        page >= pageCount ? 'disabled' : '',
+        '>Next</button>',
+        '</div></div></footer></div>',
+    ].join('');
 }
 
 export function renderDataRowEditorPanel(state) {

package/frontend/js/views/mediaTagging.js

@@ -180,52 +180,39 @@ function renderParentTagFields({
 
     const isCreatingParentTag = Boolean(parentToggleColumn ? tagFormValues[parentToggleColumn.name] : false);
     const selectedParentTagId = parentSelectColumn ? String(tagFormValues[parentSelectColumn.name] ?? '') : '';
-
-    return `
-      ${
-          parentSelectColumn
-              ? `
-              <label class="media-tagging-field">
-                <span class="media-tagging-field__label">Parent Tag</span>
-                <select
-                  class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-                  data-bind="media-tagging-tag-form-field"
-                  data-field="${escapeHtml(parentSelectColumn.name)}"
-                  ${isCreatingParentTag ? 'disabled' : ''}
-                >
-                  ${renderOptionList(
-                      parentTagOptions.map(tag => ({
-                          value: String(tag.identityValue ?? ''),
-                          label: tag.label,
-                      })),
-                      selectedParentTagId,
-                      parentTagOptions.length ? 'Select a parent tag' : 'No parent tags available',
-                  )}
-                </select>
-              </label>
-            `
-              : ''
-      }
-      ${
-          parentToggleColumn
-              ? `
-              <div class="media-tagging-field">
-                <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-                  <input
-                    data-bind="media-tagging-tag-form-field"
-                    data-field="${escapeHtml(parentToggleColumn.name)}"
-                    type="checkbox"
-                    ${isCreatingParentTag ? 'checked' : ''}
-                  />
-                  <span class="media-tagging-field__meta">
-                    <span class="media-tagging-field__label">Create Parent Tag</span>
-                  </span>
-                </label>
-              </div>
-            `
-              : ''
-      }
-    `;
+    const parentSelectMarkup = parentSelectColumn
+        ? [
+              '<label class="media-tagging-field"><span class="media-tagging-field__label">Parent Tag</span>',
+              '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-tag-form-field" data-field="',
+              escapeHtml(parentSelectColumn.name),
+              '" ',
+              isCreatingParentTag ? 'disabled' : '',
+              '>',
+              renderOptionList(
+                  parentTagOptions.map(tag => ({
+                      value: String(tag.identityValue ?? ''),
+                      label: tag.label,
+                  })),
+                  selectedParentTagId,
+                  parentTagOptions.length ? 'Select a parent tag' : 'No parent tags available',
+              ),
+              '</select></label>',
+          ].join('')
+        : '';
+    const parentToggleMarkup = parentToggleColumn
+        ? [
+              '<div class="media-tagging-field"><label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+              '<input data-bind="media-tagging-tag-form-field" data-field="',
+              escapeHtml(parentToggleColumn.name),
+              '" type="checkbox" ',
+              isCreatingParentTag ? 'checked' : '',
+              '/>',
+              '<span class="media-tagging-field__meta"><span class="media-tagging-field__label">Create Parent Tag</span></span>',
+              '</label></div>',
+          ].join('')
+        : '';
+
+    return [parentSelectMarkup, parentToggleMarkup].join('');
 }
 
 function renderTagList(tags = [], selectedTagKeys = []) {
@@ -285,42 +272,40 @@ function renderCreatedTagList(tags = [], { canRemove = false, removingTagKey = n
     return `
     <div class="media-tagging-created-tags custom-scrollbar">
       ${tags
-          .map(
-              tag => `
-            <article class="media-tagging-created-tag">
-              <div class="media-tagging-created-tag__content">
-                <div class="media-tagging-created-tag__label">${escapeHtml(tag.label)}</div>
-                ${
-                    tag.isParentTag || tag.parentTagLabel
-                        ? `
-                            <div class="media-tagging-created-tag__meta">
-                              ${tag.isParentTag ? '<span class="media-tagging-created-tag__badge">Parent</span>' : ''}
-                              ${
-                                  tag.parentTagLabel
-                                      ? `<span class="media-tagging-created-tag__badge">${escapeHtml(tag.parentTagLabel)}</span>`
-                                      : ''
-                              }
-                            </div>
-                          `
-                        : ''
-                }
-              </div>
-              <button
-                aria-label="Remove tag"
-                class="delete-button media-tagging-created-tag__remove"
-                data-action="remove-media-tag"
-                data-tag-key="${escapeHtml(tag.key)}"
-                type="button"
-                title="Remove tag"
-                ${canRemove && removingTagKey !== tag.key ? '' : 'disabled'}
-              >
-                <span class="material-symbols-outlined text-[18px]">
-                  ${removingTagKey === tag.key ? 'hourglass_top' : 'delete'}
-                </span>
-              </button>
-            </article>
-          `,
-          )
+          .map(tag => {
+              const parentMetaMarkup =
+                  tag.isParentTag || tag.parentTagLabel
+                      ? [
+                            '<div class="media-tagging-created-tag__meta">',
+                            tag.isParentTag ? '<span class="media-tagging-created-tag__badge">Parent</span>' : '',
+                            tag.parentTagLabel
+                                ? [
+                                      '<span class="media-tagging-created-tag__badge">',
+                                      escapeHtml(tag.parentTagLabel),
+                                      '</span>',
+                                  ].join('')
+                                : '',
+                            '</div>',
+                        ].join('')
+                      : '';
+
+              return [
+                  '<article class="media-tagging-created-tag">',
+                  '<div class="media-tagging-created-tag__content">',
+                  '<div class="media-tagging-created-tag__label">',
+                  escapeHtml(tag.label),
+                  '</div>',
+                  parentMetaMarkup,
+                  '</div>',
+                  '<button aria-label="Remove tag" class="delete-button media-tagging-created-tag__remove" data-action="remove-media-tag" data-tag-key="',
+                  escapeHtml(tag.key),
+                  '" type="button" title="Remove tag" ',
+                  canRemove && removingTagKey !== tag.key ? '' : 'disabled',
+                  '><span class="material-symbols-outlined text-[18px]">',
+                  removingTagKey === tag.key ? 'hourglass_top' : 'delete',
+                  '</span></button></article>',
+              ].join('');
+          })
           .join('')}
     </div>
   `;
@@ -633,89 +618,71 @@ function renderTaggingSection(state) {
     const mediaTableColumns = state.mediaTagging.mediaTableColumns ?? [];
     const pathCandidates = state.mediaTagging.pathCandidates ?? [];
     const booleanCandidates = state.mediaTagging.booleanCandidates ?? [];
+    const tableOptions = renderOptionList(
+        tables
+            .map(table => ({ value: table.name, label: table.name }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.mediaTable,
+        'Select a media table',
+    );
+    const pathOptions = renderOptionList(
+        mediaTableColumns
+            .map(column => ({
+                value: column.name,
+                label: pathCandidates.includes(column.name)
+                    ? [column.name, ' // suggested'].join('')
+                    : column.name,
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.pathColumn,
+        'Select the media path column',
+    );
+    const taggedOptions = renderOptionList(
+        mediaTableColumns
+            .map(column => ({
+                value: column.name,
+                label: booleanCandidates.includes(column.name)
+                    ? [column.name, ' // suggested'].join('')
+                    : column.name,
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        draft.taggedColumn,
+        mediaTableColumns.length ? 'Select the tagged flag column' : 'No columns available',
+    );
 
-    return `
-    <section class="media-tagging-card media-tagging-card--tagging shell-section">
-      <div class="media-tagging-card__header">
-        <div>
-          <div class="media-tagging-card__eyebrow">2. Tagging</div>
-          <h2 class="media-tagging-card__title">Media Source</h2>
-        </div>
-      </div>
-      <div class="media-tagging-card__body">
-        <div class="media-tagging-form-grid">
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Media Table</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="mediaTable">
-              ${renderOptionList(
-                  tables
-                      .map(table => ({ value: table.name, label: table.name }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.mediaTable,
-                  'Select a media table',
-              )}
-            </select>
-          </label>
-          <div></div>
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Path Column</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="pathColumn">
-              ${renderOptionList(
-                  mediaTableColumns
-                      .map(column => ({
-                          value: column.name,
-                          label: pathCandidates.includes(column.name) ? `${column.name} // suggested` : column.name,
-                      }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.pathColumn,
-                  'Select the media path column',
-              )}
-            </select>
-          </label>
-          <label class="media-tagging-field">
-            <span class="media-tagging-field__label">Tagged Boolean Column</span>
-            <select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="taggedColumn">
-              ${renderOptionList(
-                  mediaTableColumns
-                      .map(column => ({
-                          value: column.name,
-                          label: booleanCandidates.includes(column.name) ? `${column.name} // suggested` : column.name,
-                      }))
-                      .sort((a, b) => a.label.localeCompare(b.label)),
-                  draft.taggedColumn,
-                  mediaTableColumns.length ? 'Select the tagged flag column' : 'No columns available',
-              )}
-            </select>
-          </label>
-        </div>
-
-        <div class="media-tagging-query-grid">
-          ${renderSqlTextarea({
-              label: 'Untagged Query',
-              value: draft.untaggedQuery,
-              dataBind: 'media-tagging-field',
-              dataField: 'untaggedQuery',
-          })}
-          ${renderSqlTextarea({
-              label: 'Tagged Query',
-              value: draft.taggedQuery,
-              dataBind: 'media-tagging-field',
-              dataField: 'taggedQuery',
-          })}
-        </div>
-
-        <div class="flex flex-wrap items-center gap-3">
-          <button
-            class="standard-button"
-            data-action="reset-media-tagging-queries"
-            type="button"
-          >
-            Reset Queries to Defaults
-          </button>
-        </div>
-      </div>
-    </section>
-  `;
+    return [
+        '<section class="media-tagging-card media-tagging-card--tagging shell-section">',
+        '<div class="media-tagging-card__header"><div><div class="media-tagging-card__eyebrow">2. Tagging</div><h2 class="media-tagging-card__title">Media Source</h2></div></div>',
+        '<div class="media-tagging-card__body"><div class="media-tagging-form-grid">',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Media Table</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="mediaTable">',
+        tableOptions,
+        '</select></label><div></div>',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Path Column</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="pathColumn">',
+        pathOptions,
+        '</select></label>',
+        '<label class="media-tagging-field"><span class="media-tagging-field__label">Tagged Boolean Column</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" data-bind="media-tagging-field" data-field="taggedColumn">',
+        taggedOptions,
+        '</select></label></div>',
+        '<div class="media-tagging-query-grid">',
+        renderSqlTextarea({
+            label: 'Untagged Query',
+            value: draft.untaggedQuery,
+            dataBind: 'media-tagging-field',
+            dataField: 'untaggedQuery',
+        }),
+        renderSqlTextarea({
+            label: 'Tagged Query',
+            value: draft.taggedQuery,
+            dataBind: 'media-tagging-field',
+            dataField: 'taggedQuery',
+        }),
+        '</div>',
+        '<div class="flex flex-wrap items-center gap-3"><button class="standard-button" data-action="reset-media-tagging-queries" type="button">Reset Queries to Defaults</button></div>',
+        '</div></section>',
+    ].join('');
 }
 
 function renderMappingSection(state) {