<commit_before><p></p>

<form #parmsForm="ngForm"
      (ngSubmit)="onSubmit()"
      class="form-horizontal">  <!-- "form-horizontal" is Bootstrap class -->
  <div class="form-group">                           <!-- "form-group" is Bootstrap class -->
    <div class=" control-label col-sm-3"> <!-- "control-label" is the class for labels in HORIZONTAL forms. -->
    <label for="numSystems"> 
      Number of systems in cluster
      <!-- Let's be ARIA-friendly, shall we?  I think 'sr-only' is a Bootstrap class. -->
      <span class="sr-only"> (required)</span>
    </label>
    <!-- <span class="glyphicon glyphicon-asterisk required" aria-hidden="true"></span> -->
    <!-- "Required" indicator: The straightforward approach: just slap in a static asterisk. -->
    <!-- <label class="required">*</label> -->
    </div>
    <div class="col-sm-2">
      <!-- "Required" indicator: The sopheesteecated approach, part (a): conditional Bootstrap class.  I got this from
         http://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/, but it's probably all over the place.
      -->
      <div [class.has-feedback]="isRequiredValueMissing('numSystems')">
        <!-- Strictly speaking, maxLength=2 and allowNumericValues 1-26 will prevent inputs like ".5" or "2.5" (although
            there's nothing wrong with "2."), and we don't need a regexp like 'pattern="[0-9]{1,2}"'.  Alternatively, we
            could use the regexp pattern to force integers and allowedNumericValues to restrict the range.
        -->
        <input id="numSystems" name="numSystems" [(ngModel)]="numSystems" #numSystemsInput
               type="text" class="form-control"
               required pattern="[0-9]{1,2}" allowedNumericValues="[1,26]" 
               />
        <!-- Fiddling with "hidden" property (e.g., '[hidden]="true"') doesn't work.  Bootstrap issue? -->
        <!-- Style with from stylesheet, magically (TBD). -->
        <!-- "Required" indicator: The sopheesteecated approach, part (b): conditional glyphicon (with our own custom
            "required" class so we can style a little diferent from Bootstrap, which doesn't have a "required"
            styling). 
        -->
        <span *ngIf="isRequiredValueMissing('numSystems')"
           class="glyphicon glyphicon-star form-control-feedback required"
              ></span>
        <!-- <span *ngIf="isRequiredValueMissing('numSystems')">(required)</span> -->
      </div>
    </div>
    <div *ngIf="formErrors.numSystems" class="col-sm-6 alert alert-danger">
      {{ formErrors.numSystems }}
    </div>
  </div>
  <!-- Does adding another input field prevent enter key from running first button on form? No.
  <div class="form-group">
    <div class="control-label col-sm-3">
      <label for="randomOtherInput">Some random other input</label>
    </div>
    <div class="col-sm-2">
      <input id="someRandomOtherInput" name="someRandomOtherInput"
             type="text" class="form-control"
             />
    </div>
  </div>
  -->
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">    <!-- "checkbox" is Bootstrap class -->
        <label for="slipstreamsHighLow">
          <!-- TODO: don't tie this directly to the model.  Only xfer to model when user hits "Go" button. -->
          <input id="slipstreamsHighLow" name="slipstreamsHighLow" [(ngModel)]="_useHighLowSlipstreams" type="checkbox" />
          Slipstreams Differentiated Between High & Low Slipknots
        </label>
        <a href="#" (click)="showHighLowHelp()"><span class="glyphicon glyphicon-info-sign"></span></a>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-8"
         *ngIf="_highLowHelpShowing"
         >
      <p>
        In our campaign, we added the extra twist of randomly assigning slipstreams incoming to a system to either the
        "high" or "low" slipknots (or north or south, if you prefer).  That has the effect of forcing travellers to
        traverse the entire system about half the time, instead of simply popping out of a slipstream, realigning, and
        re-entering slipspace at the same slipknot.  If you want that feature in your cluster, check the box.
      </p>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <!-- Note: default button type is "submit", per html spec, not "button".  For this reason, the enter key in a form
           element will submit the form by simulating a click on the first submit button in the form.  The rules are a
           little complicated; see "Implicit Submission" in the actual HTML spec.
        -->
      <button id="goBtn" (click)="generateCluster()" class="btn btn-default btn-warning"
              [disabled]="! parmsForm.form.valid"
              title="Obviously, this will hammer your existing cluster. Be sure you have it backed up or otherwise saved, or that you don't care."
              >
        Go!
      </button>
      <button id="revertBtn" type="button"
              class="btn btn-default"
              (click)="revertParams()"
              >
        Revert
      </button>
    </div>
  </div>
</form><commit_msg>Mock up list of available clusters to load.<commit_after><p></p>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">Enter parameters and generate a new cluster</h2>
    </div>
    <div class="panel-body">

<form #parmsForm="ngForm"
      (ngSubmit)="onSubmit()"
      class="form-horizontal">  <!-- "form-horizontal" is Bootstrap class -->


  <div class="form-group">                           <!-- "form-group" is Bootstrap class,  makes div behave like a .row in a .form-horizontal, so don't need .row -->
    <div class=" control-label col-sm-3"> <!-- "control-label" is the class for labels in HORIZONTAL forms. -->
    <label for="numSystems"> 
      Number of systems in cluster
      <!-- Let's be ARIA-friendly, shall we?  I think 'sr-only' is a Bootstrap class. -->
      <span class="sr-only"> (required)</span>
    </label>
    <!-- <span class="glyphicon glyphicon-asterisk required" aria-hidden="true"></span> -->
    <!-- "Required" indicator: The straightforward approach: just slap in a static asterisk. -->
    <!-- <label class="required">*</label> -->
    </div>
    <div class="col-sm-2">
      <!-- "Required" indicator: The sopheesteecated approach, part (a): conditional Bootstrap class.  I got this from
         http://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/, but it's probably all over the place.
      -->
      <div [class.has-feedback]="isRequiredValueMissing('numSystems')">
        <!-- Strictly speaking, maxLength=2 and allowNumericValues 1-26 will prevent inputs like ".5" or "2.5" (although
            there's nothing wrong with "2."), and we don't need a regexp like 'pattern="[0-9]{1,2}"'.  Alternatively, we
            could use the regexp pattern to force integers and allowedNumericValues to restrict the range.
        -->
        <input id="numSystems" name="numSystems" [(ngModel)]="numSystems" #numSystemsInput
               type="text" class="form-control"
               required pattern="[0-9]{1,2}" allowedNumericValues="[1,26]" 
               />
        <!-- Fiddling with "hidden" property (e.g., '[hidden]="true"') doesn't work.  Bootstrap issue? -->
        <!-- Style with from stylesheet, magically (TBD). -->
        <!-- "Required" indicator: The sopheesteecated approach, part (b): conditional glyphicon (with our own custom
            "required" class so we can style a little diferent from Bootstrap, which doesn't have a "required"
            styling). 
        -->
        <span *ngIf="isRequiredValueMissing('numSystems')"
           class="glyphicon glyphicon-star form-control-feedback required"
              ></span>
        <!-- <span *ngIf="isRequiredValueMissing('numSystems')">(required)</span> -->
      </div>
    </div>
    <div *ngIf="formErrors.numSystems" class="col-sm-6 alert alert-danger">
      {{ formErrors.numSystems }}
    </div>
  </div>
  <!-- Does adding another input field prevent enter key from running first button on form? No.
  <div class="form-group">
    <div class="control-label col-sm-3">
      <label for="randomOtherInput">Some random other input</label>
    </div>
    <div class="col-sm-2">
      <input id="someRandomOtherInput" name="someRandomOtherInput"
             type="text" class="form-control"
             />
    </div>
  </div>
  -->
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">    <!-- "checkbox" is Bootstrap class -->
        <label for="slipstreamsHighLow">
          <!-- TODO: don't tie this directly to the model.  Only xfer to model when user hits "Go" button. -->
          <input id="slipstreamsHighLow" name="slipstreamsHighLow" [(ngModel)]="_useHighLowSlipstreams" type="checkbox" />
          Slipstreams Differentiated Between High & Low Slipknots
        </label>
        <a href="#" (click)="showHighLowHelp()"><span class="glyphicon glyphicon-info-sign"></span></a>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-8"
         *ngIf="_highLowHelpShowing"
         >
      <p>
        In our campaign, we added the extra twist of randomly assigning slipstreams incoming to a system to either the
        "high" or "low" slipknots (or north or south, if you prefer).  That has the effect of forcing travellers to
        traverse the entire system about half the time, instead of simply popping out of a slipstream, realigning, and
        re-entering slipspace at the same slipknot.  If you want that feature in your cluster, check the box.
      </p>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <!-- Note: default button type is "submit", per html spec, not "button".  For this reason, the enter key in a form
           element will submit the form by simulating a click on the first submit button in the form.  The rules are a
           little complicated; see "Implicit Submission" in the actual HTML spec.
        -->
      <button id="goBtn" (click)="generateCluster()" class="btn btn-default btn-warning"
              [disabled]="! parmsForm.form.valid"
              title="Obviously, this will hammer your existing cluster. Be sure you have it backed up or otherwise saved, or that you don't care."
              >
        Go!
      </button>
      <button id="revertBtn" type="button"
              class="btn btn-default"
              (click)="revertParams()"
              >
        Revert
      </button>
    </div>
  </div>
</form>
    </div>
  </div>

<p></p>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">Or select an existing cluster</h2>
    </div>
    <div class="panel-body">
      
      <table class="table">
        <tr>
          <th></th>
          <th>Cluster Name</th>
          <th>User Name</th>
          <th>Changed</th>
          <th>Cluster Notes</th>
        </tr>
        <tr>
          <td>
          <button type="button" class="btn btn-warning" aria-label="Load cluster">
            <span class="glyphicon glyphicon-edit"></span>
          </button>
          </td>
          <td>alpha</td>
          <td>user name</td>
          <td>Mar. 30, 2017 5:41 PM</td>
          <td>All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  </td>
        </tr>
        <tr>
          <td>
          <button type="button" class="btn btn-warning" aria-label="Load cluster">
            <span class="glyphicon glyphicon-edit"></span>
          </button>
          </td>
          <td>alpha</td>
          <td>user name</td>
          <td>Mar. 30, 2017 5:41 PM</td>
          <td>All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  </td>
        </tr>
        <tr>
          <td>
          <button type="button" class="btn btn-warning" aria-label="Load cluster">
            <span class="glyphicon glyphicon-edit"></span>
          </button>
          </td>
          <td>alpha</td>
          <td>user name</td>
          <td>Mar. 30, 2017 5:41 PM</td>
          <td>All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  All work and no play makes Jack a dull boy.  </td>
        </tr>
      </table>
      
      <!--
      <div class="list-group">
        <button type="button" class="list-group-item">
          <div class="col-sm-2">cluster name</div>
          <div class="col-sm-2">user name</div>
          <div class="col-sm-8">notes notes notes</div>
        </button>
        <button type="button" class="list-group-item">
          cluster name
        </button>
        <button type="button" class="list-group-item">
          cluster name
        </button>
      </div>
      -->

      <!--
        <div class="row">
          <div class="col-sm-2">alpha</div>
          <div class="col-sm-2">user name</div>
          <div class="col-sm-8">notes notes notes</div>
        </div>
        <div class="row">
          <div class="col-sm-2">alpha</div>
          <div class="col-sm-2">user name</div>
          <div class="col-sm-8">notes notes notes</div>
        </div>
      -->
    </div> <!-- panel-body -->
  </div> <!-- panel -->
  
{'fraction_non_alphanumeric': 0.11867670225800805, 'fraction_numerical': 0.006651496586732014, 'mean_word_length': 2.4109452736318406, 'pattern_counts': {'":': 0, '<': 277, '<?xml version=': 0, '>': 277, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6644011', 'n_tokens_mistral': 5041, 'n_tokens_neox': 4904, 'n_words': 2053}