{% extends "index_base.html" %}

{% block includes %}
<style>
  .orange {
    color:#ff7f0e; font-family: arial; font-weight: bold;
  }
  .blue {
    color:#1f77b4; font-family: arial; font-weight: bold;
  }
  .grey {
    color:grey; font-family: arial; font-weight: bold;
  }
  .green {
    color:rgb(92, 194, 50); font-family: arial; font-weight: bold;
  }
  .orange {
    color:rgb(231, 194, 0); font-family: arial; font-weight: bold;
    color:#ff7f0e;
  }
  .greenwhere {
    font-family: "Gill Sans";
    font-size: 9pt;
    color: black;
    background: rgb(237, 250, 236);
    border-left: 2px solid rgb(92, 194, 50);
    padding-left: .5em;
    padding-right: .5em;

  } 

  .greywhere {
    font-family: "Gill Sans";
    font-size: 9pt;
    color: black;
    background: #efefef;
    border-left: 2px solid grey;
    padding-left: .5em;
    padding-right: .5em;

  } 

  .orangewhere {
    font-family: "Gill Sans";
    font-size: 9pt;
    color: black;
    background: rgb(248, 241, 201);
    border-left: 2px solid rgb(231, 194, 0);
    padding-left: .5em;
    padding-right: .5em;

  } 

  small {
    font-size: 8pt;
    color: grey;
  }

  .smalllabel {
    font-size: smaller; 
    background: whitesmoke; 
    border: 1px solid white; 
    border-radius: 4px; 
    cursor: pointer; 
    min-width: 50px;
  }

  b {
    font-family: arial;
  }
</style>

{%raw%}

<script id="start" type="text/x-underscore-template">
  <p>This tutorial will walk you through the main DBWipes interface.</p>
  <p>
    We will use a randomly generated dataset of sales in several states
     over a 10-day period.  
    The attributes in the dataset include the day, the amount spent, 
    and customer age range, gender, and state.
  </p>
  <p>When you are ready, click Next.</p>
  <p class='bs-callout bs-callout-info'>
    For this study, zoom your browser window out 
    <kbd>ctrl-(minus) or &#8984;-(minus)</kbd> if the page seems cut-off.
  </p>
  <p class='bs-callout bs-callout-info'>
  You can move the tutorial boxes by clicking and dragging the 
  <span class='smalllabel' style='padding: 2px; padding-left: 1em; padding-right: 1em'>grey title bar</span> 
  at the top of the box.
  </p>
</script>



<script id="qviz" type="text/x-underscore-template">
<p>This area visualizes query results over the sample dataset. </p>
<p>
  For example, this shows the daily
  <span class='blue'>sum</span> 
  of sales in the dataset.
</p>
</script>


<script id="qformbtn-clicked" type="text/x-underscore-template">
<p>That button will show or hide the query form below</p>
<p>The form shows the SQL aggregation query that we
   are visualizing below.</p>
<p>We will walk through how to plot the <span class='orange'>average</span> 
   sales as well.</p>
</script>

<script id="cstat-label-template" type="text/x-underscore-template">
<p>
  For example, this <b>day</b> 
  attribute corresponds with the <b>day</b> 
  column in the sample table on the right.
</p>
<p>
  The small <span class='btn btn-xs smalllabel'>num</span> 
  label below is the data type, so we know this attribute is 
  a number and not a timestamp.</p>
</script>

<script id="dist-filter-2" type="text/x-underscore-template">
<p>This selects rows from day <b>1 to 3</b>.  The selected range is colored in grey, and the matching values are highlighted.</p>
<p>You can resize and drag the selection around.  Click anywhere within the plot but outside the grey selected region to clear it.</p>
<p>Go ahead and give it a try.</p>
</script>


<script id="dist-select" type="text/x-underscore-template">
<p>
  You can use the axes to zoom and scroll on the 
  <span class='btn btn-xs smalllabel'>num</span>,
  <span class='btn btn-xs smalllabel'>date</span>, and
  <span class='btn btn-xs smalllabel'>timestamp</span> attribute types.
</p> 
<p>
  When you hover over the x-axis your cursor will become
  <img src="/static/images/ew-resize.gif"/>.  Scroll up and down to 
  zoom in and out.  Click and drag left and right to scroll.
</p>
<p>
  For convenience, you can shift-click then drag left and right to zoom.
</p>
</script>

<script id="dist-select-2" type="text/x-underscore-template">
<p>
  When you hover over the y-axis your cursor will become
  <img src="/static/images/ns-resize.gif"/>.  Scroll up and down to 
  zoom in and out.  Click and drag up and down to scroll.
</p>
<p>
  For convenience, you can shift-click then drag up and down to zoom.
</p>
</script>


<script id="qv-zoom" type="text/x-underscore-template">
<p>
  The visualization axes can also be zoomed and panned in the same way!
</p>
</script>


<script id="dist-filter-3" type="text/x-underscore-template">
<p>The visualization will update whenever you filter using the facets</p>
<p>
  DBWipes turns the original visualization 
  <span class='grey'>grey</span>, and overlays the
  new query results in <span class='blue'>color</span>.  
  That way you can compare the effects of your filter.
</p> 
</script>

<script id="dist-filter-4" type="text/x-underscore-template">
  <p>
  The filters that are selected in the facets are listed in 
  <span class='greywhere'>grey</span> boxes.
  </p>
  <p>You can click on the <b>&times;</b> to remove the filter.</p>
</script>


<script id="seltype" type="text/x-underscore-template">
<p>
  The facets current <b style='color: rgb(26, 189, 64)'>select</b> 
  subsets of data that match your filters. </p>
<p>
  Sometimes it helps to see what happens if the data you selected 
  were <i>removed</i>.
  Toggle this switch to show data that <i>doesn't</i> match the filter.</p>
<p>
  Click on the green <span style='font-family: arial; font-weight: bold;'><b style='background:whitesmoke; color: black; padding-left: 10px; padding-right: 10px;'>select</b><span style='background:#6ADE85; border-radius: 4px; width: 2em;'>&nbsp;&nbsp;&nbsp;&nbsp;</span></span> 
  switch to the right.</p>
</script>


<script id="seltype-2" type="text/x-underscore-template">
<p>
When you set the switch to <span style='font-family: arial; font-weight: bold;'><span style='background:#D95050; border-radius: 4px; width: 2em;'>&nbsp;&nbsp;&nbsp;&nbsp;</span><b style='background:whitesmoke; color: black; padding-left: 10px; padding-right: 10px;'>Remove</b></span>, 
the <span class='greywhere'>filters</span> are negated to remove those corresponding rows from the query.
</p>
</script>




<script id="selapply" type="text/x-underscore-template">
<p>
The distributions in the facets can be expensive to recompute, 
so we don't recompute them when the temporary filters change.
</p>
<p>
Add the temporary filters as permanent filters to recompute the 
distributions on the filtered subset of data.
</p>
<p>
Now click on
<span class='btn btn-primary btn-xs' >&darr; Make Permanent</span> 
on the left.
</p>
</script>


<script id="selapply-2" type="text/x-underscore-template">
<p>
Your original <span class='greywhere'>temporary filters</span> 
have moved to the permanent filters section and turned
<span class='greenwhere'>green</span>, meaning their distributions are
reflected in the Facets.
</p>
<p>
The visualization on the right now defaults to the data that matches
the permanent filters.
</p>
<p>
DBWipes is recomputing the facet distributions.  If the dataset is 
large, it can take some time.
</p>
</script>

<script id="selapply-3" type="text/x-underscore-template">
<p>
Since they are part of the query, they are also listed in the 
WHERE clause of the query form.
</p>
<p>
Note that you can also directly edit these fields if there is a specific
filter you want to apply.
</p>
</script>


<script id="tupletoggle" type="text/x-underscore-template">
<p>
Click on this button to toggle a table of individual rows that match
the colored points shown in the visualization. 
<small>(AND/conjunction of temporary and permanent filters)</small>
</p>
<p>
The table is shown below the main visualization.
</p>
</script>


<script id="" type="text/x-underscore-template">
</script>

{%endraw%}

{% endblock %}
