<commit_before><h1>{{title}}</h1>

<style type="text/css">
img.chart, svg {
  width: 100%;
  height: auto;
}
</style>

{{#unless motors}}
<p>
You haven't selected any motors for comparison.
As you view details of different motors, the ones you've seen most recently will be visible in
<a href="/motors/recent.html">Recently Viewed</a> and you can compare them.
You can also compare motors from the <a href="http://localhost:3000/motors/search.html">Attribute Search</a> results.
</p>
{{/unless}}

{{#if motors}}
<p>
You selected {{length motors}}
{{#if multiClasses}}(in {{length impulseClasses}} impulse classes){{/if}}
{{#if singleClass}}({{singleClass}} impulse){{/if}}
motors for comparison.
</p>

<div class="row">
  <div class="col-md-6">
    <h2>Burn Time vs Impulse</h2>
    {{#if impulseBurnTimeImg}}
    <img class="chart" id="impulseBurnTime" src="{{impulseBurnTimeImg}}" />
    {{/if}}
  </div>
  <div class="col-md-6">
    <h2>Avg Thrust vs Impulse</h2>
    {{#if impulseAvgThrustImg}}
    <img class="chart" id="impulseAvgThrust" src="{{impulseAvgThrustImg}}" />
    {{/if}}
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h2>Thrust Curve Overlay</h2>
    {{#if thrustCurveImg}}
    <img class="chart" id="thrustCurve" src="{{thrustCurveImg}}" />
    {{/if}}
  </div>
</div>

<div class="hidden-xs">
<h2>Motor Details</h2>
<table id="motor-list" class="table table-bordered">
  <thead>
    <tr>
     <th>Designation</th>
     <th>Manufacturer</th>
     <th>Type</th>
     <th class="number">Diam</th>
     <th class="number">Impulse</th>
     <th class="number">Avg Thr</th>
     <th class="number">Burn</th>
     <th class="action"><input type="checkbox" id="select-all" title="select/deselect all"/></th>
    </tr>
  </thead>
  <tbody>
  {{#each motors}}
  <tr data-id="{{_id}}">
    <td><a href="{{motorLink _manufacturer this}}">{{motorDesignation this}}</td>
    <td>{{_manufacturer.abbrev}}</td>
    <td>{{formatType type}}</td>
    <td class="number" data-sort="{{formatSort diameter}}">{{formatMMT diameter}}</td>
    <td class="number" data-sort="{{formatSort totalImpulse}}">{{formatImpulse totalImpulse}}</td>
    <td class="number" data-sort="{{formatSort avgThrust}}">{{formatForce avgThrust}}</td>
    <td class="number" data-sort="{{formatSort burnTime}}">{{formatDuration burnTime}}</td>
    <td class="action"><input type="checkbox" name="select" value="{{_id}}" title="select this motor"/></th>
  </tr>
  {{/each}}
  </tbody>
</table>
<p>Choose two or more motors from the list to <a id="compare" href="#">Compare again</a>.</p>
</div>

<script type="text/javascript">
var Motors = {
{{#each motors}}
  "{{_id}}": {
    title: "{{motorFullName this}}",
    diameter: "{{formatMMT diameter}}",
    totalImpulse: "{{formatImpulse totalImpulse}}",
    avgThrust: "{{formatForce avgThrust}}",
    maxThrust: "{{formatForce maxThrust}}",
    burnTime: "{{formatDuration burnTime}}",
    detailLink: "{{motorLink this}}"
  },
{{/each}}
};

function popoverTitle() {
  var svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id && (info = Motors[id]))
    return info.title;
  else
    return svg.attr('title') || svg.attr('orig-title');
}

function popoverContent() {
  var svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id && (info = Motors[id])) {
    return ('<table class="stats">' +
            '<tr><td>Diameter:</td><td>' + info.diameter + '</td></tr>\n' +
            '<tr><td>Tot Impulse:</td><td>' + info.totalImpulse + '</td></tr>\n' +
            '<tr><td>Avg Thrust:</td><td>' + info.avgThrust + '</td></tr>\n' +
            '<tr><td>Max Thrust:</td><td>' + info.maxThrust + '</td></tr>\n' +
            '<tr><td>Burn Time:</td><td>' + info.burnTime + '</td></tr>\n' +
            '</table>\n' +
            '<i>click for motor page</i>');
  } else {
    return '';
  }
}

function hoverMotor() {
  var svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id) {
    $('.motor-point:not(.motor-point-' + id + ')').css('opacity', 0.35)
    $('.motor-point-' + id).css('font-weight', 'bold')
    $('.motor-curve:not(.motor-curve-' + id + ')').css('opacity', 0.35)
    $('.motor-curve-' + id).css('font-weight', 'bold')
  }
}

function leaveMotor() {
  $('.motor-point').css('opacity', 1).css('font-weight', 'normal');
  $('.motor-curve').css('opacity', 1).css('font-weight', 'normal');
}

function clickMotor() {
  var svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id && (info = Motors[id]))
    window.location = info.detailLink;
}

inlineSVG('#impulseBurnTime, #impulseAvgThrust, #thrustCurve', function(svg) {
  svg.find('g.motor-point, g.motor-curve')
     .removeAttr('title')
     .css('cursor', 'pointer')
     .popover({
       container: 'body',
       trigger: 'hover',
       html: true,
       delay: 50,
       title: popoverTitle,
       content: popoverContent,<commit_msg>more data in compare popovers<commit_after><h1>{{title}}</h1>

<style type="text/css">
img.chart, svg {
  width: 100%;
  height: auto;
}
table.stats th {
  font-weight: normal;
  padding-right: 0.8em;
  text-align: left;
}
.popover .arrow {
  display: none;
}
</style>

{{#unless motors}}
<p>
You haven't selected any motors for comparison.
As you view details of different motors, the ones you've seen most recently will be visible in
<a href="/motors/recent.html">Recently Viewed</a> and you can compare them.
You can also compare motors from the <a href="http://localhost:3000/motors/search.html">Attribute Search</a> results.
</p>
{{/unless}}

{{#if motors}}
<p>
You selected {{length motors}}
{{#if multiClasses}}(in {{length impulseClasses}} impulse classes){{/if}}
{{#if singleClass}}({{singleClass}} impulse){{/if}}
motors for comparison.
</p>

<div class="row">
  <div class="col-md-6">
    <h2>Burn Time vs Impulse</h2>
    {{#if impulseBurnTimeImg}}
    <img class="chart" id="impulseBurnTime" src="{{impulseBurnTimeImg}}" />
    {{/if}}
  </div>
  <div class="col-md-6">
    <h2>Avg Thrust vs Impulse</h2>
    {{#if impulseAvgThrustImg}}
    <img class="chart" id="impulseAvgThrust" src="{{impulseAvgThrustImg}}" />
    {{/if}}
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h2>Thrust Curve Overlay</h2>
    {{#if thrustCurveImg}}
    <img class="chart" id="thrustCurve" src="{{thrustCurveImg}}" />
    {{/if}}
  </div>
</div>

<div class="hidden-xs">
<h2>Motor Details</h2>
<table id="motor-list" class="table table-bordered">
  <thead>
    <tr>
     <th>Designation</th>
     <th>Manufacturer</th>
     <th>Type</th>
     <th class="number">Diam</th>
     <th class="number">Impulse</th>
     <th class="number">Avg Thr</th>
     <th class="number">Burn</th>
     <th class="action"><input type="checkbox" id="select-all" title="select/deselect all"/></th>
    </tr>
  </thead>
  <tbody>
  {{#each motors}}
  <tr data-id="{{_id}}">
    <td><a href="{{motorLink _manufacturer this}}">{{motorDesignation this}}</td>
    <td>{{_manufacturer.abbrev}}</td>
    <td>{{formatType type}}</td>
    <td class="number" data-sort="{{formatSort diameter}}">{{formatMMT diameter}}</td>
    <td class="number" data-sort="{{formatSort totalImpulse}}">{{formatImpulse totalImpulse}}</td>
    <td class="number" data-sort="{{formatSort avgThrust}}">{{formatForce avgThrust}}</td>
    <td class="number" data-sort="{{formatSort burnTime}}">{{formatDuration burnTime}}</td>
    <td class="action"><input type="checkbox" name="select" value="{{_id}}" title="select this motor"/></th>
  </tr>
  {{/each}}
  </tbody>
</table>
<p>Choose two or more motors from the list to <a id="compare" href="#">Compare again</a>.</p>
</div>

<script type="text/javascript">
const Motors = {
{{#each motors}}
  "{{_id}}": {
    title: "{{motorFullName this}}",
    diameter: "{{formatMMT diameter}}",
    totalImpulse: "{{formatImpulse totalImpulse}}",
    avgThrust: "{{formatForce avgThrust}}",
    maxThrust: "{{formatForce maxThrust}}",
    burnTime: "{{formatDuration burnTime}}",
    detailLink: "{{motorLink this}}"
  },
{{/each}}
};

function popoverTitle() {
  let svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id && (info = Motors[id]))
    return info.title;
  else
    return svg.attr('title') || svg.attr('orig-title');
}

function popoverContent() {
  let svg = $(this),
      id, info;

  id = svg.attr('id');
  let what = /^thrustcurve/.test(id) ? 'line' : 'point';
  id = id.replace(/[^-]*-/g, '');
  if (id && (info = Motors[id])) {
    return $('<table class="stats">' +
             '<tr><th>Diameter:</th><td>' + info.diameter + '</td></tr>\n' +
             '<tr><th>Tot Impulse:</th><td>' + info.totalImpulse + '</td></tr>\n' +
             '<tr><th>Avg Thrust:</th><td>' + info.avgThrust + '</td></tr>\n' +
             '<tr><th>Max Thrust:</th><td>' + info.maxThrust + '</td></tr>\n' +
             '<tr><th>Burn Time:</th><td>' + info.burnTime + '</td></tr>\n' +
             '</table>\n' +
             '<small>click ' + what + ' for motor page</small>');
  } else {
    return '';
  }
}

function hoverMotor(e) {
  let svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id) {
    $('.motor-point:not(.motor-point-' + id + ')').css('opacity', 0.35)
    $('.motor-point-' + id).css('font-weight', 'bold')
    $('.motor-curve:not(.motor-curve-' + id + ')').css('opacity', 0.35)
    $('.motor-curve-' + id).css('font-weight', 'bold')
  }
}

function leaveMotor(e) {
  $('.motor-point').css('opacity', 1).css('font-weight', 'normal');
  $('.motor-curve').css('opacity', 1).css('font-weight', 'normal');
}

function clickMotor(e) {
  let svg = $(this),
      id, info;

  id = svg.attr('id').replace(/[^-]*-/g, '');
  if (id && (info = Motors[id]))
    window.location = info.detailLink;
}

inlineSVG('#impulseBurnTime, #impulseAvgThrust, #thrustCurve', function(svg) {
  svg.find('g.motor-point, g.motor-curve')
     .removeAttr('title')
     .css('cursor', 'pointer')
     .popover({
       container: 'body',
       trigger: 'hover',
       html: true,
       delay: 50,
       title: popoverTitle,
       content: popoverContent,
{'fraction_non_alphanumeric': 0.23296401608000786, 'fraction_numerical': 0.006275125012256104, 'mean_word_length': 3.5987376014427412, 'pattern_counts': {'":': 2, '<': 241, '<?xml version=': 0, '>': 241, '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': '7025262', 'n_tokens_mistral': 3869, 'n_tokens_neox': 3679, 'n_words': 771}