<commit_before>`<template>
  <require from="components/dialog/dialog"></require>
  <require from="components/fragments/pile-menu"></require>
  <require from="components/multi-select/multi-select"></require>
  <require from="components/svg-icon/svg-icon"></require>
  <require from="components/spinner.html"></require>

  <div class="flex-c flex-a-c flex-jc-c full-dim error-indicator ${isErrored ? 'is-active' : ''}">
    <div class="flex-c flex-d-c flex-jc-c flex-a-c">
      <svg-icon icon-id="warning"></svg-icon>
      <span>${errorMsg}</span>
    </div>
  </div>
  <div class="flex-c flex-a-c flex-jc-c full-dim loading-indicator ${isLoading ? 'is-active' : ''}">
    <div class="flex-c flex-a-c flex-jc-c spinner-bg">
      <spinner if.bind="isLoading"></spinner>
    </div>
  </div>

  <dialog
    class="flex-c flex-a-c flex-jc-c full-dim ${dialogIsOpen ? 'is-active' : ''}"
    deferred.bind="dialogDeferred"
    is-open.bind="dialogIsOpen"
    message.bind="dialogMessage"></dialog>

  <pile-menu
    pile.bind="pileMenuPile"
    position.bind="pileMenuPosition"
    is-active.bind="isPileMenuShow"
    is-align-left.bind="isPileMenuAlignLeft"
    is-bottom-up.bind="isPileMenuBottomUp"></pile-menu>

  <div class="full-wh flex-c flex-d-c ${state.animation ? 'is-animated' : ''}" ref="baseEl">
    <main class="flex-g-1 rel fragment-plot ${state.isPilesInspection ? 'is-piles-inspection' : ''}">
      <div class="full-dim" css.one-way="plotWindowCss">
        <button
          class="axis-switch is-icon-only"
          if.bind="isLayout2d">
          <svg-icon icon-id="flip-xy" click.delegate="flipXY()"></svg-icon>
        </button>
        <div
          class="axis axis-x axis-top"
          if.bind="isLayout2d">
          <div class="flex-c flex-jc-sb axis-labels">
            <div class="axis-label axis-label-min">
              ${nicefyMeasure(state.dataMeasuresMin[arrangeMeasures[0]])}
            </div>
            <div class="axis-label axis-label-name">
              ${arrangeMeasuresReadible[0]}
            </div>
            <div class="axis-label axis-label-max">
              ${nicefyMeasure(state.dataMeasuresMax[arrangeMeasures[0]])}
            </div>
          </div>
          <div class="axis-line"></div>
          <div class="axis-arrow"></div>
        </div>
        <div
          class="axis axis-y axis-left"
          if.bind="isLayout2d">
          <div class="flex-c flex-jc-sb flex-d-c axis-labels">
            <div class="axis-label axis-label-min">
              <span>${nicefyMeasure(state.dataMeasuresMin[arrangeMeasures[1]])}</span>
            </div>
            <div class="axis-label axis-label-name">
              ${arrangeMeasuresReadible[1]}
            </div>
            <div class="axis-label axis-label-max">
              <span>${nicefyMeasure(state.dataMeasuresMax[arrangeMeasures[1]])}</span>
            </div>
          </div>
          <div class="axis-line"></div>
          <div class="axis-arrow"></div>
        </div>

        <div class="grid full-dim ${isGridShown ? 'is-active' : ''}">
          <ol class="columns full-dim flex-c">
            <li class="column flex-g-1" repeat.for="col of showGridCols"></li>
          </ol>
          <ol class="rows full-dim flex-c flex-d-c">
            <li class="row flex-g-1" repeat.for="row of showGridRows"></li>
          </ol>
        </div>

        <div class="full-dim" ref="plotEl"></div>
      </div>
    </main>
    <footer class="flex-c bottom-bar ${footerIsExpanded ? 'is-expanded' : ''}">
      <div class="flex-c flex-d-c flex-g-1 settings-container">
        <div class="flex-c settings-row">
          <h4>Arrange</h4>

          <multi-select
            class="flex-g-1"
            bottom-up="true"
            options.bind="state.measures"
            event-id.bind="arrangeSelectedEventId"
            state-query.bind="arrangeMeasuresAccessPath"
            disabled.bind="state.isPilesInspection"
            placeholder="Choose measures…"></multi-select>

          <ul class="flex-c settings-list settings-list-buttons-only">
            <li class="flex-c ${isDataClustered ? 'button-group' : ''}">
              <button
                class="flex-c flex-jc-c flex-a-c rel button ${isDataClustered && !state.isPilesInspection ? 'is-active' : ''}"
                click.delegate="clusterTsne()"
                disabled.bind="state.isPilesInspection">
                Cluster${isDataClustered ? 'ed' : ''}
              </button>
              <button
                class="flex-c flex-jc-c flex-a-c rel button"
                title="Run t-SNE again"
                click.delegate="clusterTsne(true)"
                disabled.bind="state.isPilesInspection"
                if.bind="isDataClustered">
                <svg-icon class="icon-inline" icon-id="reset"></svg-icon>
              </button>
            </li>
            <li>
              <button
                class="flex-c flex-jc-c flex-a-c rel button is-icon-only ${trashSize > 0 && !state.isPilesInspection ? 'is-enabled' : 'is-disabled'} ${state.trashIsActive ? 'is-active' : ''}"
                click.delegate="toggleTrash()"
                disabled.bind="trashSize === 0 || state.isPilesInspection">
                <svg-icon icon-id="trash"></svg-icon>
                <span class="button-info">${trashSize}</span>
              </button>
            </li>
            <li if.bind="state.isPilesInspection">
              <button
                class="flex-c flex-jc-c flex-a-c rel button is-active"
                click.delegate="closePilesInspectionHandler()">
                Close Inspection
              </button>
            </li>
          </ul>
        </div>

        <div class="flex-c settings-row">
          <h4>Layout</h4>

          <ul class="flex-c flex-g-1 settings-list">
            <li class="flex-c flex-d-c">
              <label for="settings-fgm-size">
                Snippet Size
                <span class="value ${cellSizeTmp ? 'is-active' : ''} ${cellSizeTmp !== state.cellSize ? 'new' : ''}">: <em>${cellSizeTmp}</em></span>
              </label>
              <input
                id="settings-fgm-size"
                type="range"
                min="1"
                max="10"
                step="1"
                value.one-way="state.cellSize"
                mousedown.delegate="cellSizeMousedownHandler($event)"
                mouseup.delegate="cellSizeMouseupHandler($event)"
                input.delegate="cellSizeInputHandler($event)"
                change.delegate="cellSizeChangeHandler($event)">
            </li>
            <li class="flex-c flex-d-c">
              <label
                for="settings-fgm-grid-to-snippet-size"
                title="Link grid size to cell size">&larr;</label>
              <input
                type="checkbox"
                id="settings-fgm-grid-to-snippet-size"
                checked.bind="gridCellSizeLock"
                click.delegate="gridCellSizeLockChangeHandler()">
            </li>
            <li class="flex-c flex-d-c ${gridCellSizeLock ? 'is-disabled' : 'is-enabled'}">
              <label for="settings-fgm-size">
                Grid Size
                <span class="value ${gridSizeTmp ? 'is-active' : ''} ${gridSizeTmp != state.gridSize ? 'new' : ''}">: <em>${gridSizeTmp}</em></span>
              </label>
              <input
                id="settings-fgm-size"
                type="range"
                min="0.25"
                max="10"<commit_msg>Increase the max grid size<commit_after>`<template>
  <require from="components/dialog/dialog"></require>
  <require from="components/fragments/pile-menu"></require>
  <require from="components/multi-select/multi-select"></require>
  <require from="components/svg-icon/svg-icon"></require>
  <require from="components/spinner.html"></require>

  <div class="flex-c flex-a-c flex-jc-c full-dim error-indicator ${isErrored ? 'is-active' : ''}">
    <div class="flex-c flex-d-c flex-jc-c flex-a-c">
      <svg-icon icon-id="warning"></svg-icon>
      <span>${errorMsg}</span>
    </div>
  </div>
  <div class="flex-c flex-a-c flex-jc-c full-dim loading-indicator ${isLoading ? 'is-active' : ''}">
    <div class="flex-c flex-a-c flex-jc-c spinner-bg">
      <spinner if.bind="isLoading"></spinner>
    </div>
  </div>

  <dialog
    class="flex-c flex-a-c flex-jc-c full-dim ${dialogIsOpen ? 'is-active' : ''}"
    deferred.bind="dialogDeferred"
    is-open.bind="dialogIsOpen"
    message.bind="dialogMessage"></dialog>

  <pile-menu
    pile.bind="pileMenuPile"
    position.bind="pileMenuPosition"
    is-active.bind="isPileMenuShow"
    is-align-left.bind="isPileMenuAlignLeft"
    is-bottom-up.bind="isPileMenuBottomUp"></pile-menu>

  <div class="full-wh flex-c flex-d-c ${state.animation ? 'is-animated' : ''}" ref="baseEl">
    <main class="flex-g-1 rel fragment-plot ${state.isPilesInspection ? 'is-piles-inspection' : ''}">
      <div class="full-dim" css.one-way="plotWindowCss">
        <button
          class="axis-switch is-icon-only"
          if.bind="isLayout2d">
          <svg-icon icon-id="flip-xy" click.delegate="flipXY()"></svg-icon>
        </button>
        <div
          class="axis axis-x axis-top"
          if.bind="isLayout2d">
          <div class="flex-c flex-jc-sb axis-labels">
            <div class="axis-label axis-label-min">
              ${nicefyMeasure(state.dataMeasuresMin[arrangeMeasures[0]])}
            </div>
            <div class="axis-label axis-label-name">
              ${arrangeMeasuresReadible[0]}
            </div>
            <div class="axis-label axis-label-max">
              ${nicefyMeasure(state.dataMeasuresMax[arrangeMeasures[0]])}
            </div>
          </div>
          <div class="axis-line"></div>
          <div class="axis-arrow"></div>
        </div>
        <div
          class="axis axis-y axis-left"
          if.bind="isLayout2d">
          <div class="flex-c flex-jc-sb flex-d-c axis-labels">
            <div class="axis-label axis-label-min">
              <span>${nicefyMeasure(state.dataMeasuresMin[arrangeMeasures[1]])}</span>
            </div>
            <div class="axis-label axis-label-name">
              ${arrangeMeasuresReadible[1]}
            </div>
            <div class="axis-label axis-label-max">
              <span>${nicefyMeasure(state.dataMeasuresMax[arrangeMeasures[1]])}</span>
            </div>
          </div>
          <div class="axis-line"></div>
          <div class="axis-arrow"></div>
        </div>

        <div class="grid full-dim ${isGridShown ? 'is-active' : ''}">
          <ol class="columns full-dim flex-c">
            <li class="column flex-g-1" repeat.for="col of showGridCols"></li>
          </ol>
          <ol class="rows full-dim flex-c flex-d-c">
            <li class="row flex-g-1" repeat.for="row of showGridRows"></li>
          </ol>
        </div>

        <div class="full-dim" ref="plotEl"></div>
      </div>
    </main>
    <footer class="flex-c bottom-bar ${footerIsExpanded ? 'is-expanded' : ''}">
      <div class="flex-c flex-d-c flex-g-1 settings-container">
        <div class="flex-c settings-row">
          <h4>Arrange</h4>

          <multi-select
            class="flex-g-1"
            bottom-up="true"
            options.bind="state.measures"
            event-id.bind="arrangeSelectedEventId"
            state-query.bind="arrangeMeasuresAccessPath"
            disabled.bind="state.isPilesInspection"
            placeholder="Choose measures…"></multi-select>

          <ul class="flex-c settings-list settings-list-buttons-only">
            <li class="flex-c ${isDataClustered ? 'button-group' : ''}">
              <button
                class="flex-c flex-jc-c flex-a-c rel button ${isDataClustered && !state.isPilesInspection ? 'is-active' : ''}"
                click.delegate="clusterTsne()"
                disabled.bind="state.isPilesInspection">
                Cluster${isDataClustered ? 'ed' : ''}
              </button>
              <button
                class="flex-c flex-jc-c flex-a-c rel button"
                title="Run t-SNE again"
                click.delegate="clusterTsne(true)"
                disabled.bind="state.isPilesInspection"
                if.bind="isDataClustered">
                <svg-icon class="icon-inline" icon-id="reset"></svg-icon>
              </button>
            </li>
            <li>
              <button
                class="flex-c flex-jc-c flex-a-c rel button is-icon-only ${trashSize > 0 && !state.isPilesInspection ? 'is-enabled' : 'is-disabled'} ${state.trashIsActive ? 'is-active' : ''}"
                click.delegate="toggleTrash()"
                disabled.bind="trashSize === 0 || state.isPilesInspection">
                <svg-icon icon-id="trash"></svg-icon>
                <span class="button-info">${trashSize}</span>
              </button>
            </li>
            <li if.bind="state.isPilesInspection">
              <button
                class="flex-c flex-jc-c flex-a-c rel button is-active"
                click.delegate="closePilesInspectionHandler()">
                Close Inspection
              </button>
            </li>
          </ul>
        </div>

        <div class="flex-c settings-row">
          <h4>Layout</h4>

          <ul class="flex-c flex-g-1 settings-list">
            <li class="flex-c flex-d-c">
              <label for="settings-fgm-size">
                Snippet Size
                <span class="value ${cellSizeTmp ? 'is-active' : ''} ${cellSizeTmp !== state.cellSize ? 'new' : ''}">: <em>${cellSizeTmp}</em></span>
              </label>
              <input
                id="settings-fgm-size"
                type="range"
                min="1"
                max="10"
                step="1"
                value.one-way="state.cellSize"
                mousedown.delegate="cellSizeMousedownHandler($event)"
                mouseup.delegate="cellSizeMouseupHandler($event)"
                input.delegate="cellSizeInputHandler($event)"
                change.delegate="cellSizeChangeHandler($event)">
            </li>
            <li class="flex-c flex-d-c">
              <label
                for="settings-fgm-grid-to-snippet-size"
                title="Link grid size to cell size">&larr;</label>
              <input
                type="checkbox"
                id="settings-fgm-grid-to-snippet-size"
                checked.bind="gridCellSizeLock"
                click.delegate="gridCellSizeLockChangeHandler()">
            </li>
            <li class="flex-c flex-d-c ${gridCellSizeLock ? 'is-disabled' : 'is-enabled'}">
              <label for="settings-fgm-size">
                Grid Size
                <span class="value ${gridSizeTmp ? 'is-active' : ''} ${gridSizeTmp != state.gridSize ? 'new' : ''}">: <em>${gridSizeTmp}</em></span>
              </label>
              <input
                id="settings-fgm-size"
                type="range"
                min="0.25"
                max="20"
{'fraction_non_alphanumeric': 0.16268706351845694, 'fraction_numerical': 0.0039906883937479215, 'mean_word_length': 1.8799080635893508, 'pattern_counts': {'":': 0, '<': 279, '<?xml version=': 0, '>': 279, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '237148', 'n_tokens_mistral': 4763, 'n_tokens_neox': 4587, 'n_words': 725}