<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Profile Viewer | whylogs</title>

    <link rel="icon" href="images/whylabs-favicon.png" type="image/png" sizes="16x16" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/whylogs-styles.css" />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
      integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>

  <body id="generated-html"></body>

  <script id="entry-template" type="text/x-handlebars-template">
    <div class="desktop-content">
      <nav class="navbar navbar-inverse fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <h5>Profile viewer for whylogs</h5>
            <ul class="navbar-nav d-inline-block">
              <li class="nav-item">
                <p>
                  Maintained by
                  <a
                    class="navbar-link"
                    href="https://try.whylabsapp.com?utm_source=whylogs_html_viewer"
                    target="_blank"
                    rel="noreferrer noopener"
                  >
                    <svg
                      width="145"
                      height="21.37"
                      viewBox="0 0 145 21.37"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <rect width="145" height="21.37" fill="url(#pattern0)"></rect>
                      <defs>
                        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                          <use xlink:href="#image0" transform="scale(0.0025 0.0169492)"></use>
                        </pattern>
                        <image
                          id="image0"
                          width="400"
                          height="59"
                          xlink:href="data:image/png;base64,[encoded data, 12332 characters]"
                        />
                      </defs>
                    </svg>
                  </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="container-fluid">
        <div class="row">
          <div class="sidebar">
            <div id="sidebar-content">
              <div class="sidebar-content__single-profile mb-4" id="sidebar-content-single-profile">
                <strong>Unlock the power of WhyLabs:</strong>
                <ul class="small mt-1 mb-3">
                  <li>Generate an API token to upload and save profiles to the platform</li>
                  <li>Analyze and compare profiles to identify data drift and other anomalies</li>
                  <li>Turn on monitoring with a single click, no manual set up required!</li>
                  <li>Get alerted in real time when data and model health issues arise</li>
                </ul>
                <a
                  class="btn btn-warning btn-signup"
                  target="_blank"
                  href="http://bit.ly/whylogs-to-whylabs-free-signup"
                >Sign up for a free WhyLabs account</a>
              </div>
              <div class="d-none sidebar-content__single-profile mb-4" id="sidebar-content-single-profile">
                <strong>Profile</strong>
                <h5 class="mt-1 wl__selected-profile">2020-02-26 12:23:32 PM PST</h5>
              </div>

              <div class="mb-3">
                <label for="wl__feature-search" class="form-label"><strong>Find feature</strong></label>
                <input type="search" class="form-control" id="wl__feature-search" placeholder="Quick search..." />
              </div>

              <strong>Total features</strong>
              <h1 class="feature-count mb-3 wl__feature-count">{{getTotalFeatureCount}}</h1>

              <strong>Filter features by type</strong>
              <div class="form-check mb-1 mt-2">
                <input
                  class="form-check-input wl__feature-filter-input"
                  type="checkbox"
                  value="Discrete"
                  id="inferredDiscrete"
                  onclick="changeDiscreteValue()"
                  checked
                />
                <label class="form-check-label" for="inferredDiscrete">
                  Inferred discrete (<span class="wl__feature-count--discrete">{{getDiscreteTypeCount}}</span>)
                </label>
              </div>

              <div class="form-check mb-1">
                <input
                  class="form-check-input wl__feature-filter-input"
                  type="checkbox"
                  value="Non-discrete"
                  id="inferredNonDiscrete"
                  onclick="changeNonDiscreteValue()"
                  checked
                />
                <label class="form-check-label" for="inferredNonDiscrete">
                  Inferred non-discrete (<span
                    class="wl__feature-count--non-discrete"
                  >{{getNonDiscreteTypeCount}}</span>)
                </label>
              </div>
              <div class="form-check mb-4">
                <input
                  class="form-check-input wl__feature-filter-input"
                  type="checkbox"
                  value="Unknown"
                  id="inferredUnknown"
                  onclick="changeUnknwonValue()"
                  checked
                />
                <label class="form-check-label" for="inferredUnknown">
                  Unknown (<span class="wl__feature-count--unknown">{{getUnknownTypeCount}}</span>)
                </label>
              </div>
              <strong>Feature list</strong>
              <p class="small mt-1">Click on features to scroll into view</p>
              <div class="mt-3">
                <ul
                  id="feature-list"
                  class="nav list-group list-group-flush wl__sidebar-feature-name-list"
                >{{{getFeatureList}}}</ul>
              </div>
            </div>
          </div>

          <div class="main">
            <div class="wl-table-wrap" id="table-content">
              <div class="wl-table" >
                <div class="wl-table-heading">
                  <div class="wl-table-row wl-table-row--bottom-shadow">
                    <div class="wl-table-head">Feature</div>
                    <div class="wl-table-head">Frequent items</div>
                    <div class="wl-table-head">Inf. feature type</div>
                    <div class="wl-table-head text-end">Total count</div>
                    <div class="wl-table-head text-end">Null fraction</div>
                    <div class="wl-table-head text-end">Est. unique values</div>
                    <div class="wl-table-head">Data type</div>
                    <div class="wl-table-head text-end">Data type count</div>
                    <div class="wl-table-head text-end">Mean</div>
                    <div class="wl-table-head text-end">Std. dev</div>
                    <div class="wl-table-head text-end">Min</div>
                    <div class="wl-table-head text-end">First quantile</div>
                    <div class="wl-table-head text-end">Median</div>
                    <div class="wl-table-head text-end">Third quantile</div>
                    <div class="wl-table-head text-end">Max</div>
                  </div>
                </div>

                <ul class="wl-table-body wl__table-body" id="table-body">
                  {{#each this.columns}}
                    <li

                      {{#if this.numberSummary}} class="wl-table-row wl-table-row--clickable" {{else}} class="wl-table-row" {{/if}}

                      data-feature-name={{@key}}
                      data-inferred-type={{inferredType this}}
                      data-scroll-to-feature-name={{@key}}
                    >
                      <div class="wl-table-cell">
                        <div class="wl-table-cell__title-wrap">
                          <h4 class="wl-table-cell__title">{{@key}}</h4>
                          <button class="wl-table-cell__title-button" onclick="openPropertyPanel('{{json this}}', '{{inferredType this}}')" type="button">View details</button></div>
                        <div class="wl-table-cell__graph-wrap"><div>
                            {{{getGraphHtml this}}}
                          </div></div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle"
                        style="max-width: 270px; padding-right: 18px"
                      > <div class="wl-table-cell__bedge-wrap">{{{frequentItems this}}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle"
                      ><div>{{inferredType this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{totalCount this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{nullFraction this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{estUniqValue this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle"
                      ><div>{{dataType this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle"
                      ><div>{{dataTypeCount this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{mean this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{stddev this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{min this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{firstQuantile this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{median this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{thirdQuantile this}}</div></div><div
                        class="wl-table-cell wl-table-cell--top-spacing align-middle text-end"
                      ><div>{{max this}}</div></div>
                    </li>
                  {{/each}}
                </ul>

                <div class="wl-property-panel">
                  <button type="button" class="wl-property-panel__button btn-close" onclick="handleClosePropertyPanel() " aria-label="Close"></button>
                  <h5 class="wl-property-panel__title"></h5>
                  <div>
                    <table class="wl-property-panel__table">
                      <thead class="wl-property-panel__table-head">
                        <tr class="wl-property-panel__table-tr">
                          <th class="wl-property-panel__table-th">Item</th>
                          <th class="wl-property-panel__table-th wl-property-panel__table-th-profile"></th>
                        </tr>
                      </thead>
                      <tbody class="wl-property-panel__frequent-items">
                        <!-- CONTENT IS GENERATED -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <div class="no-responsive">
      <div class="no-responsive__content">
        <h1 class="no-responsive__title">Hold on! :)</h1>
        <p class="no-responsive__text">
          It looks like your current screen size or device is not yet supported by the WhyLabs Sandbox. The Sandbox is
          best experienced on a desktop computer. Please try maximizing this window or switching to another device. We
          are working on adding support for a larger variety of devices.
        </p>
      </div>
    </div>
  </script>

  <script src="./js/jquery-3.6.0.min.js"></script>
  <script src="./js/d3.min.js"></script>
  <script src="js/handlebars.js"></script>
</html>
