<div id="app_panel" class="split-panel orient-reverse">
  <div class="split-panel-child">
    <div
      id="settings_panel"
      class="sidebar_column noselect split-panel orient-vertical"
    >
      <div id="settings_close_button" class="sidebar_close_button">
        <div class="sidebar_close_button_inner"></div>
      </div>
      <div id="debug_open_button" class="sidebar_close_button">
        <div class="sidebar_close_button_inner"></div>
      </div>
      <div id="plugin_selector_container">
        <div data-plugin="Map Scatter" class="plugin-select-item">
          <span class="plugin-select-item-name"></span>
        </div>
        <div id="plugin_selector_border"></div>
      </div>
      <div class="split-panel-child">
        <div id="selected-columns">
          <div id="active-columns">
            <div class="scroll-panel-container">
              <div slot="top_panel" id="top_panel">
                <div class="rrow">
                  <div id="group_by">
                    <div class="psp-text-field">
                      <ul for="group_by" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label
                        for="group_by"
                        class="pivot-selector-label"
                      ></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="split_by">
                    <div class="psp-text-field">
                      <ul for="split_by" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label
                        for="split_by"
                        class="pivot-selector-label"
                      ></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="sort">
                    <div class="psp-text-field">
                      <ul for="sort" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label for="sort" class="pivot-selector-label"></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="filter">
                    <div class="psp-text-field">
                      <ul for="filter" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label for="filter" class="pivot-selector-label"></label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                data-label="Longitude"
                data-index="0"
                class="column-selector-column"
              >
                <span class="toggle-mode is_column_active required"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="integer type-icon"></span
                    ><span class="column_name">Row ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div
                data-label="Latitude"
                data-index="1"
                class="column-selector-column"
              >
                <span class="toggle-mode is_column_active required"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Order ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div
                data-label="Color"
                data-index="2"
                class="column-selector-column"
              >
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="datetime type-icon"></span
                    ><span class="column_name">Order Date</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div
                data-label="Size"
                data-index="3"
                class="column-selector-column"
              >
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="datetime type-icon"></span
                    ><span class="column_name">Ship Date</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div
                data-label="Tooltip"
                data-index="4"
                class="column-selector-column"
              >
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Ship Mode</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="5" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Customer ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="6" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Segment</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="7" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Country</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="8" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">City</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="9" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">State</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="10" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="integer type-icon"></span
                    ><span class="column_name">Postal Code</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="11" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Region</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="12" class="column-selector-column">
                <span class="toggle-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Product ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div class="scroll-panel-auto-width"></div>
            </div>
            <div class="scroll-panel-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="split-panel-divider"></div>
  <div id="main_column">
    <div id="status_bar">
      <div class="section">
        <div id="status_reconnect" class="connected">
          <span id="status" class="connected"></span
          ><span id="status_updating" class="connected"></span>
        </div>
      </div>
      <span id="rows">99<span> x </span>19</span>
      <div id="spacer"></div>
    </div>
    <div id="main_panel_container"><slot></slot></div>
  </div>
</div>
