<commit_before><!DOCTYPE html>
<html lang="en" ng-app="js120">
<head>
  <title>JS-120</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <link rel="stylesheet" type="text/css" media="all" href="jssynth.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="lib/AudioContextMonkeyPatch.js"></script>
  <script src="src/analytics.js"></script>
  <script src="jssynth.js"></script>
</head>
<body>
<div id="header" class="flex flex-align-center pl1 pr1 pt1 pb1 border-box full-width" ng-controller="TransportController">
  <div id="logo-container">
    <h1 class="logo h2 mt0 mb0" style="line-height: 1.0em;">JS-120</h1>
    <span class="lightText">Web Synthesizer</span>
  </div>
  <div id="transport" class="flex flex-uniform-size flex-align-center">
    <button class="mr1 round button-hollow button-hollow-large {{playing ? 'button-enabled' : ''}}" ng-click="toggle();">►</button>
    <span class="inline-block">
      <span class="control">
        <label class="control-label" style="text-align: right;">Tempo&nbsp;&nbsp;</label>
        <span class="annotated-input">
          <input ng-model="tempo" ng-change="updateTempo();" type="range" min="30" max="255" />
          <span>{{tempo}}</span>
        </span>
      </span>
      <span class="control">
        <label class="control-label" style="text-align: right;">Volume&nbsp;&nbsp;</label>
        <span class="annotated-input">
          <input ng-model="amplitude" ng-change="updateAmplitude();" type="range" min="0.0" max="1.0" step="0.01" />
          <span>{{(amplitude * 100) | number:0}}%</span>
        </span>
      </span>
    </span>
  </div>
  <div id="download-container">
    <div style="position: relative;">
      <button class="button-full button-hollow right" ng-click="toggleDownloadBox();">
        <span class="h3" style="line-height: 1.0rem;">&darr;</span>&nbsp; *.wav
      </button>
      <a id="hidden-download-link" class="display-none" download="output.wav" href=""></a>
      <div class="mt3 pl1 pr1 pt1 pb1 popup-box" ng-class="{'display-none': downloadBoxVisible === false}" style="right: 0; width: 20.0rem;">
        <span class="control mt">
          <label class="control-label">File Name:</label>
          <span class="annotated-input">
            <input ng-model="downloadFileName" class="underlinedInput" type="text" />
            <span>.wav</span>
          </span>
        </span>
        <button class="button-full button-hollow mt1 right" ng-click="export();">Download</button>
      </div>
    </div>
  </div>
</div>

<div ng-controller="SequencerController" class="pl1 pr1 pt2 pb1 border-box" style="border-top: 2px solid #ddd;">
  <h2 class="mt0 mb1">Sequencer</h2>
  <div class="flex">
    <ul class="flex flex-column mt0 ml0 pl0 border-box" ng-class="{expanded: (expanded === true), contracted: (expanded === false)}">
      <li class="list-style-none border-box bb"><span><button class="button-small button-hollow pt0 pb0" style="border-radius: 6px; width: 40px;" ng-click="toggleExpansion();">{{expansionToggleLabel}}</button></span></li>
      <li class="flex-uniform-size list-style-none pr1 bb br" ng-repeat="track in tracks">
        <span class="short-name">{{track.name | limitTo:2}}</span>
        <input class="underlinedInput full-width" ng-model="track.name" ng-change="changeTrackName(track.id);" type="text" />
        <button class="button-hollow button-small {{track.muted ? 'button-enabled' : ''}}" ng-click="toggleTrackMute(track.id);">Mute</button>
        <button class="button-hollow button-small {{track.id === selectedTrack.id ? 'button-enabled' : ''}}" ng-click="changeSelectedTrack(track.id);">Edit</button>
      </li>
    </ul>
    <ul class="flex flex-uniform-size flex-column mt0 ml0 pl0 overflow-scroll-x border-box">
      <li class="inline-block list-style-none full-width">
        <ul class="flex ml0 pl0 no-whitespace-wrap">
          <li class="flex-uniform-size list-style-none border-box bb" style="min-width: 150px;" ng-model="currentStep" ng-repeat="n in [1,2,3,4,5,6,7,8,]">
            <span class="inline-block center full-width" ng-class="{enabled: currentStep === n}">{{n}}</span>
          </li>
        </ul>
      </li>
      <li ng-repeat="track in tracks" class="list-style-none full-width" style="height: 6.0rem;">
        <ul class="flex ml0 pl0 no-whitespace-wrap" style="height: 100%;">
          <li class="flex-uniform-size list-style-none center border-box bb br" style="min-width: 150px; height: 100%;" ng-repeat="pattern in track.patterns" ng-init="sequencerIndex = $index" ng-class="{enabledlight: currentStep === ($index + 1)}">
            <span class="flex flex-align-center pl1 pr1 border-box" style="height: 100%;">
              <select class="full-width" ng-model="pattern.patternID" ng-change="changeSequencer(sequencerIndex);" convert-to-number>
                <option ng-repeat="patternOption in patternOptions[$parent.$index]" value="{{patternOption.id}}">{{patternOption.name}}</option>
              </select>
            </span>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="flex flex-column mt0 ml0 pl0 border-box" ng-class="{'display-none': (expanded === false)}">
      <li class="list-style-none inline-block border-box bb"><span>&nbsp;</span></li>
      <li class="flex flex-align-center flex-uniform-size list-style-none bb bl" style="padding-left: 1.0rem;" ng-repeat="track in tracks">
        <button class="button-small button-hollow full-width round" ng-click="removeTrack(track.id);">X</button>
      </li>
    </ul>
  </div>
  <div>
    <button class="block button-full button-hollow" ng-click="addTrack();">Add Track</button>
  </div>
</div>

<div ng-controller="TrackEditorController" class="mt2 pl1 pr1 pt1 pb1 border-box" style="border-top: 2px solid #ddd; border-bottom: 2px solid #ddd;">
  <div tab-list title="{{trackName}}" class="mt1">
    <div tab-pane title="Instrument">
      <div ng-controller="InstrumentController">
        <div instrument-editor instrument="instrument" class="flex overflow-scroll-x pb1 instrument-panel-container" update-instrument="updateInstrument()"></div>
      </div>
    </div>
    <div tab-pane title="Patterns" class="mt1">
      <div ng-controller="PatternCollectionController" class="mb2">
        <ul class="pl0 mt0 mb0 overflow-scroll-x">
          <li class="list-style-none inline-block pointer border-box mr1 mb1" style="width: 9.0rem;" ng-repeat="patternOption in patternOptions" ng-click="changeSelectedPattern(patternOption.id);"  ng-class="{paneTabSelected: (patternOption.id === selectedPatternID), paneTabUnselected: (patternOption.id !== selectedPatternID)}">
            <span style="float: left; width: 7.0rem;">{{patternOption.name}}</span>
            <button class="button-small button-hollow round right" style="padding: 0;" ng-click="removePattern(patternOption.id);" ng-class="{'display-none': (patternOptions.length <= 1)}">&nbsp;X&nbsp;</button>
          </li><commit_msg>Sequencer box heights now uniform when scrollbar always shown<commit_after><!DOCTYPE html>
<html lang="en" ng-app="js120">
<head>
  <title>JS-120</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <link rel="stylesheet" type="text/css" media="all" href="jssynth.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="lib/AudioContextMonkeyPatch.js"></script>
  <script src="src/analytics.js"></script>
  <script src="jssynth.js"></script>
</head>
<body>
<div id="header" class="flex flex-align-center pl1 pr1 pt1 pb1 border-box full-width" ng-controller="TransportController">
  <div id="logo-container">
    <h1 class="logo h2 mt0 mb0" style="line-height: 1.0em;">JS-120</h1>
    <span class="lightText">Web Synthesizer</span>
  </div>
  <div id="transport" class="flex flex-uniform-size flex-align-center">
    <button class="mr1 round button-hollow button-hollow-large {{playing ? 'button-enabled' : ''}}" ng-click="toggle();">►</button>
    <span class="inline-block">
      <span class="control">
        <label class="control-label" style="text-align: right;">Tempo&nbsp;&nbsp;</label>
        <span class="annotated-input">
          <input ng-model="tempo" ng-change="updateTempo();" type="range" min="30" max="255" />
          <span>{{tempo}}</span>
        </span>
      </span>
      <span class="control">
        <label class="control-label" style="text-align: right;">Volume&nbsp;&nbsp;</label>
        <span class="annotated-input">
          <input ng-model="amplitude" ng-change="updateAmplitude();" type="range" min="0.0" max="1.0" step="0.01" />
          <span>{{(amplitude * 100) | number:0}}%</span>
        </span>
      </span>
    </span>
  </div>
  <div id="download-container">
    <div style="position: relative;">
      <button class="button-full button-hollow right" ng-click="toggleDownloadBox();">
        <span class="h3" style="line-height: 1.0rem;">&darr;</span>&nbsp; *.wav
      </button>
      <a id="hidden-download-link" class="display-none" download="output.wav" href=""></a>
      <div class="mt3 pl1 pr1 pt1 pb1 popup-box" ng-class="{'display-none': downloadBoxVisible === false}" style="right: 0; width: 20.0rem;">
        <span class="control mt">
          <label class="control-label">File Name:</label>
          <span class="annotated-input">
            <input ng-model="downloadFileName" class="underlinedInput" type="text" />
            <span>.wav</span>
          </span>
        </span>
        <button class="button-full button-hollow mt1 right" ng-click="export();">Download</button>
      </div>
    </div>
  </div>
</div>

<div ng-controller="SequencerController" class="pl1 pr1 pt2 pb1 border-box" style="border-top: 2px solid #ddd;">
  <h2 class="mt0 mb1">Sequencer</h2>
  <div class="flex">
    <ul class="flex flex-column mt0 ml0 pl0 overflow-scroll-x border-box" ng-class="{expanded: (expanded === true), contracted: (expanded === false)}">
      <li class="list-style-none border-box bb"><span><button class="button-small button-hollow pt0 pb0" style="border-radius: 6px; width: 40px;" ng-click="toggleExpansion();">{{expansionToggleLabel}}</button></span></li>
      <li class="flex-uniform-size list-style-none pr1 border-box bb br" ng-repeat="track in tracks">
        <span class="short-name">{{track.name | limitTo:2}}</span>
        <input class="underlinedInput full-width" ng-model="track.name" ng-change="changeTrackName(track.id);" type="text" />
        <button class="button-hollow button-small {{track.muted ? 'button-enabled' : ''}}" ng-click="toggleTrackMute(track.id);">Mute</button>
        <button class="button-hollow button-small {{track.id === selectedTrack.id ? 'button-enabled' : ''}}" ng-click="changeSelectedTrack(track.id);">Edit</button>
      </li>
    </ul>
    <ul class="flex flex-uniform-size flex-column mt0 ml0 pl0 overflow-scroll-x border-box">
      <li class="inline-block list-style-none full-width border-box">
        <ul class="flex ml0 pl0 no-whitespace-wrap">
          <li class="flex-uniform-size list-style-none border-box bb" style="min-width: 150px;" ng-model="currentStep" ng-repeat="n in [1,2,3,4,5,6,7,8,]">
            <span class="inline-block center full-width" ng-class="{enabled: currentStep === n}">{{n}}</span>
          </li>
        </ul>
      </li>
      <li ng-repeat="track in tracks" class="list-style-none full-width border-box" style="height: 6.0rem;">
        <ul class="flex ml0 pl0 no-whitespace-wrap" style="height: 100%;">
          <li class="flex-uniform-size list-style-none center border-box bb br" style="min-width: 150px; height: 100%;" ng-repeat="pattern in track.patterns" ng-init="sequencerIndex = $index" ng-class="{enabledlight: currentStep === ($index + 1)}">
            <span class="flex flex-align-center pl1 pr1 border-box" style="height: 100%;">
              <select class="full-width" ng-model="pattern.patternID" ng-change="changeSequencer(sequencerIndex);" convert-to-number>
                <option ng-repeat="patternOption in patternOptions[$parent.$index]" value="{{patternOption.id}}">{{patternOption.name}}</option>
              </select>
            </span>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="flex flex-column mt0 ml0 pl0 overflow-scroll-x border-box" ng-class="{'display-none': (expanded === false)}">
      <li class="list-style-none inline-block border-box bb"><span>&nbsp;</span></li>
      <li class="flex flex-align-center flex-uniform-size list-style-none border-box bb bl" style="padding-left: 1.0rem;" ng-repeat="track in tracks">
        <button class="button-small button-hollow full-width round" ng-click="removeTrack(track.id);">X</button>
      </li>
    </ul>
  </div>
  <div>
    <button class="block button-full button-hollow" ng-click="addTrack();">Add Track</button>
  </div>
</div>

<div ng-controller="TrackEditorController" class="mt2 pl1 pr1 pt1 pb1 border-box" style="border-top: 2px solid #ddd; border-bottom: 2px solid #ddd;">
  <div tab-list title="{{trackName}}" class="mt1">
    <div tab-pane title="Instrument">
      <div ng-controller="InstrumentController">
        <div instrument-editor instrument="instrument" class="flex overflow-scroll-x pb1 instrument-panel-container" update-instrument="updateInstrument()"></div>
      </div>
    </div>
    <div tab-pane title="Patterns" class="mt1">
      <div ng-controller="PatternCollectionController" class="mb2">
        <ul class="pl0 mt0 mb0 overflow-scroll-x">
          <li class="list-style-none inline-block pointer border-box mr1 mb1" style="width: 9.0rem;" ng-repeat="patternOption in patternOptions" ng-click="changeSelectedPattern(patternOption.id);"  ng-class="{paneTabSelected: (patternOption.id === selectedPatternID), paneTabUnselected: (patternOption.id !== selectedPatternID)}">
            <span style="float: left; width: 7.0rem;">{{patternOption.name}}</span>
            <button class="button-small button-hollow round right" style="padding: 0;" ng-click="removePattern(patternOption.id);" ng-class="{'display-none': (patternOptions.length <= 1)}">&nbsp;X&nbsp;</button>
          </li>
{'fraction_non_alphanumeric': 0.18781232648528595, 'fraction_numerical': 0.019017212659633537, 'mean_word_length': 3.8401074907625126, 'pattern_counts': {'":': 0, '<': 303, '<?xml version=': 0, '>': 301, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '856985', 'n_tokens_mistral': 4791, 'n_tokens_neox': 4623, 'n_words': 951}