{% 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 results 
  whose values are OK
</p>
<p>
  Scorpion will compute the values of the average bad point 
  and the average good point to decide if the bad points'
  values are too high or too low.
</p>
<p>
  Go ahead and click on 
  <span class='btn btn-success btn-xs'>examples of good 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>
</p>
<p>
 <blockquote id='sq-helptext'>
   <p>When you click <span class='btn btn-primary btn-xs'>Run Scorpion!</span>, 
      Scorpion will look for subsets of the 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 the subsets of records as filters, 
    the same as the ones you create when using the Facets.
   </p>
 </blockquote>
</p>
</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 filter the dataset.  
  This is the same as manually filtering the data using 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, in addition to the Male Californians from 
  the previous verification test, Females from Pennsylvania
  spend <i>more per purchase</i> but have less absolute impact on the
  total sales.
</p>
</script>


<script id="srs-2" type="text/x-underscore-template">
<p>
  Scorpion explicitly manages the trade-off between 
  <i>absolute impact </i> and the <i>biggest impact per record</i>
  using a parameter &lambda;.  
</p>
<p>
  When the value is small, Scorpion prefers large absolute impact
  on the bad examples.  When the value is big, Scorpion prefers 
  the biggest 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>
  When you lock a result, you can hover over
  another result for compare against it.
</p>
<p>
  Interacting with the Facets or the Temporary filters will
  automatically unlock the result.
</p>
<p>Try clicking on a result.</p>
</script>


<script id="srs-remove" type="text/x-underscore-template">
<p>
  Try switching 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>.
</p>
<p>
  Now try hovering over a Scorpion result.   The visualization 
  now shows 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>
</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 GROUPBY and SELECT attributes).
</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>
  Select some of the colored points in the 
  visualization to show the Scorpion dialog box and click 
  <span class='btn btn-xs btn-primary'>Run Scorpion!</span>.
</p>
<p>
  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>
  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 %}
