{% extends "index_base.html" %}

{% block includes %}
<style>
  b {
    font-family: arial;
  }
  .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;

  } 

  .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;
  }
</style>

{%raw%}


<script id="start" type="text/x-underscore-template">
<p>
  This tutorial will introduce you to an extension
  to DBWipes called <b class='orange'>Scorpion</b>.
</p>
<p>
  You can ask Scorpion questions about anomalous query result values
  and it will suggest relevant filters.  It will automatically
  search through combinations of the attribute values so you don't have to!
</p>
<p>
  We will use the same randomly generated sales data 
  as the previous tutorial.  When you are ready, click Next.</p>
</script>

<script id="sq-bad" type="text/x-underscore-template">
<p>
  This button will add your selected points as examples of results 
  whose values are wrong (either too high or too low)
</p>
<p>
  Since we are interested in why the sales have gone up, 
  click on <span class='btn btn-danger btn-xs'>examples of outlier values</span>
</p>
</script>

<script id="sq-good" type="text/x-underscore-template">
<p>
  This button will add your selected points as examples of normal results
  whose values are OK
</p>
<p>
  Go ahead and click on 
  <span class='btn btn-success btn-xs'>examples of normal values</span>
</p>
</script>



<script id="sq-submit" type="text/x-underscore-template">
<p>That's all Scorpion needs from you!  Now click
<span class='btn btn-primary btn-xs'>Run Scorpion!</span>
</p>
<h2>What is Scorpion doing?</h2>
 <blockquote id='sq-helptext'>
   <p>Scorpion will look for subsets of records to remove that will:
    <ol>
      <li>drive the bad example values as toward the normal example values as possible.</li>
      <li>minimize the number of records that need to be removed.</li>
      <li>minimize how much the normal examples change.</li>
    </ol>
   </p>
   <p>
    Scorpion describes each subsets using a filter --
    the same as the ones you create when using the Facets.
   </p>
 </blockquote>
</script>



<script id="psrs" type="text/x-underscore-template">
<p>
  This section lists the best filters Scorpion has found
  so far.  The results while Scorpion runs are 
  <span class='greywhere'>grey</span> because they 
  may change when Scorpion finds better results.
</p>
<p>
  The results will turn
  <span class='blue'>blue</span> and you can click Next when Scorpion
  is done.
</p>
<p>
  Move your mouse over a result to set it as a <i>Temporary Filter</i>.
  It will also highlight the attribute values in the Facets.
</p>
<p class='bg-info' id='psrs-info' style='display: none;'>
  Scorpion has finished, click Next to continue!
</p>
</script>

<script id="srs-1" type="text/x-underscore-template">
<p>
  A summary of the top suggested filters are ordered 
  from the biggest absolute impact on the bad examples 
  (may require removing many records), to filters that 
  have the most impact <i>per matched record.</i>
</p>
<p>
  For example, Male Californians have a large <i>absolute impact</i>, 
  but Females from Pennsylvania spend more per purchase.
</p>
</script>


<script id="srs-2" type="text/x-underscore-template">
<p>
  The &lambda; slider lets you see the top filters for different
  trade-offs between <i>absolute impact </i> and the <i>biggest impact per record</i>.
</p>
<p>
  Slide it to the left to see larger absolute impact.<br/>
  Slide it to the right to see bigger impact per record.  
</p>
<p>
  This slider lets you see the top filters for different &lambda;
  values.  Try it out!
</p>
</script>

<script id="srs-3" type="text/x-underscore-template">
<p>
  You can see the summarized results by clicking on this button.
</p>
</script>



<script id="srs-4" type="text/x-underscore-template">
<p>
  It can be jarring to see the display jump to the 
  original query when you hover on and off of results. 
</p>
<p>
  Click on a <span class='bluewhere'>result filter</span> 
  to prevent DBWipes from rendering the original query
  when your cursor moves off the result (this <b>locks</b> the result).
  Click a locked result to unlock it.
</p>
<p>
  Interacting with the Facets, Temporary filters, Permanent filters, or the
  &lambda; slider will automatically unlock the result.
</p>
<p>Try clicking on a result.</p>
</script>


<script id="srs-remove" type="text/x-underscore-template">
<p>
  Switch this to 
  <span style='font-family: arial; font-weight: bold;'><span style='background:#D46F6F; 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>.
  to show what would happen if the records matching the result did not 
  exist.  This is a proxy for how much those records <i>influenced</i> 
  the final result.
</p>
<p>
  Hover a few results to see how the visualization changes.
</p>
</script>



<script id="checkboxes" type="text/x-underscore-template">
<p>
  By default, Scorpion searches through combinations of all 
  the attributes in the dataset (except for the x and y axes in the 
  visualization).
</p>
<p>
  You can uncheck the checkboxes next to an attribute to 
  ignore that attribute from the search. 
</p>
<p>
Let's rerun Scorpion and ignore <b>age</b>.  First uncheck <b>age</b>. 
</p>
</script>

<script id="checkboxes-2" type="text/x-underscore-template">
<p>
Click <span class='btn btn-xs btn-primary'>toggle scorpion</span>
to show the Scorpion dialog box.  The previous Scorpion query inputs are saved so you don't need
  to set any examples.
</p>
</script>

<script id="checkboxes-3"  type="text/x-underscore-template">
<p>
  Click <span class='btn btn-xs btn-primary'>Run Scorpion!</span> to re-run 
  scorpion without the age attribute.
</p>
</script>


<script id="checkboxes-4" type="text/x-underscore-template">
<p>
  The suggested filters don't contain any <b>age</b> attributes in the rules.
</p>
</script>



<script id="checkboxes-all" type="text/x-underscore-template">
<p>Finally, you can click this button to uncheck all of the attributes at once.</p>
</script>

<script id="end" type="text/x-underscore-template">
<p>You have just finished a tour of Scorpion!</p>
<p>Now we will ask you to to participate in the user study by analyzing a few datasets with and without the automated tool.</p>
<p>Please press Exit to go back to the main directory when you are ready.</p>
</script>

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

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

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

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

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

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



{%endraw%}

{% endblock %}
