<commit_before>%html
  %head
    %title bc-scraper
    %meta(http-equiv="Content-type" content="text/html; charset=UTF-8")
    %link(href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet")
    %link(href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet")
    %link(href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/amelia/bootstrap.min.css" rel="stylesheet")
    %script(src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" data-main="app")

  %body
    %nav.navbar.navbar-default.navbar-static-top#navbar(role="navigation")
      .navbar-header
        %a.col-lg-2.navbar-brand(href="/") bc-scraper
        %form.navbar-form
          .navbar-form-group.col-lg-offset-4.col-lg-6.search
            .input-group
              %input.form-control(type="text" placeholder="Paste bandcamp url" data-bind="value: search")
              %span.input-group-btn
                %button.btn.btn-default(type="submit" data-bind="click: doSearch") Load
    %a.pull-left.text-primary(data-toggle="collapse" data-target="#settings" href="#")
      %span.glyphicon.glyphicon-wrench
    %a.pull-right.text-primary(data-toggle="collapse" data-target="#performance" href="#")
      %span.glyphicon.glyphicon-info-sign
    .clearfix
    .col-md-3.col-sm-4.col-xs-6
      .panel.collapse#settings(data-bind="template: { name: 'settings-template', data: settings }")
    .col-lg-offset-7.col-lg-2.col-md-offset-6.col-md-3.col-sm-offset-4.col-sm-4.col-xs-6
      .panel.panel-info.collapse#performance(data-bind="template: { name: 'performance-template', data: stats }")
    #container(data-bind="template: { name: 'canvas-template', data: canvas }")


    %script#canvas-template(type="text/html")
      #base(data-bind="style: { height: height, width: width }, event: { mouseup: onMouseUp, mousemove: onMouseMove }")
        #offset(data-bind="style: { webkitTransform: 'translate3d(' + left() + 'px, ' + top() + 'px, 0)' }")
          .items(data-bind="template: { name: 'item-template', foreach: items }")

    %script#performance-template(type="text/html")
      .panel-heading
        %h4.panel-title Stats
      .panel-body
        .panel
          .panel-heading
            %h5.panel-title Worker
          .panel-body
            .row
              %label.col-xs-8 Processed
              .col-xs-2.text-right(data-bind="text: processedLastFrame")
            .row
              %label.col-xs-8 Remaining
              .col-xs-2.text-right(data-bind="text: remainingItems")
        .panel
          .panel-heading
            %h5.panel-title Simulation
          .panel-body
            .row
              %label.col-xs-8 Entities
              .col-xs-2.text-right(data-bind="text: entities")

    %script#settings-template(type="text/html")
      .panel-heading
        %h4.panel-title Settings
      .panel-body
        %form.form-horizontal(role="form")
          .form-group
            %label.col-xs-4.control-label(for="attraction") Attraction
            .col-xs-8
              %input.form-control.input-sm#attraction(type="number" data-bind="value: attraction")
          .form-group
            %label.col-xs-4.control-label(for="repulsion") Repulsion
            .col-xs-8
              %input.form-control.input-sm#repulsion(type="number" data-bind="value: repulsion")
          .form-group
            %label.col-xs-4.control-label(for="damping") Damping
            .col-xs-8
              %input.form-control.input-sm#damping(type="number" data-bind="value: damping")
          .form-group
            .col-xs-offset-4.col-xs-8
              .checkbox
                %label
                  %input(type="checkbox" data-bind="checked: updateLayout") Update Layout
          .form-group
            .col-xs-offset-4.col-xs-8
              .checkbox
                %label
                  %input(type="checkbox" data-bind="checked: runSimulation") Run Simulation
          .form-group
            .col-sm-offset-4.col-sm-4.col-xs-offset-2.col-xs-5
              %button.btn.btn-default.btn-sm(data-bind="click: save") Save
            .col-sm-4.col-xs-5
              %button.btn.btn-default.btn-sm(data-bind="click: reset") Reset

    %script#item-template(type="text/html")
      .item(data-bind="style: { position: 'absolute', webkitTransform: 'translate3d(' + x() + 'px, ' + y() + 'px, 0)' }, event: { mouseover: onMouseOver, mouseout: onMouseOut, mousedown: $parent.onMouseDown }")
        %a(data-bind="click: load, if: !loaded() && !loading() && errored()" href="#")
          %i.fa.fa-exclamation-triangle
        %span(data-bind="if: !loaded() && !errored()")
          %i.fa.fa-spin.fa-spinner
        .dropdown
          %a(data-toggle="dropdown" data-bind="tooltip: { title: header, container: 'body', html: true }, if: loaded()" href="#")
            %span.glyphicon(data-bind="css: iconClass")
          %ul.dropdown-menu(role="menu")
            %li(role="presentation" data-bind="if: loaded")
              %a(role="menuitem" data-bind="if: loaded(), attr: { href: uri }" target="_blank")
                %i.fa.fa-external-link
                Open on bandcamp
            %li(role="presentation" data-bind="if: loaded() && !expanding() && relatedUndisplayed().length > 0")
              %a(role="menuitem" data-bind="click: expand" href="#")
                %i.glyphicon(data-bind="css: relatedClass")
                Expand
                %span(data-bind="text: relatedUndisplayed().length")
                %span(data-bind="text: relatedTypePluralized()")
<commit_msg>Use popover so can ensure it goes over the other items<commit_after>%html
  %head
    %title bc-scraper
    %meta(http-equiv="Content-type" content="text/html; charset=UTF-8")
    %link(href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet")
    %link(href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/amelia/bootstrap.min.css" rel="stylesheet")
    %script(src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" data-main="app")

  %body
    %nav.navbar.navbar-default.navbar-static-top#navbar(role="navigation")
      .navbar-header
        %a.col-lg-2.navbar-brand(href="/") bc-scraper
        %form.navbar-form
          .navbar-form-group.col-lg-offset-4.col-lg-6.search
            .input-group
              %input.form-control(type="text" placeholder="Paste bandcamp url" data-bind="value: search")
              %span.input-group-btn
                %button.btn.btn-default(type="submit" data-bind="click: doSearch") Load
    %a.pull-left.text-primary(data-toggle="collapse" data-target="#settings" href="#")
      %span.glyphicon.glyphicon-wrench
    %a.pull-right.text-primary(data-toggle="collapse" data-target="#performance" href="#")
      %span.glyphicon.glyphicon-info-sign
    .clearfix
    .col-md-3.col-sm-4.col-xs-6
      .panel.collapse#settings(data-bind="template: { name: 'settings-template', data: settings }")
    .col-lg-offset-7.col-lg-2.col-md-offset-6.col-md-3.col-sm-offset-4.col-sm-4.col-xs-6
      .panel.panel-info.collapse#performance(data-bind="template: { name: 'performance-template', data: stats }")
    #container(data-bind="template: { name: 'canvas-template', data: canvas }")


    %script#canvas-template(type="text/html")
      #base(data-bind="style: { height: height, width: width }, event: { mouseup: onMouseUp, mousemove: onMouseMove }")
        #offset(data-bind="style: { webkitTransform: 'translate3d(' + left() + 'px, ' + top() + 'px, 0)' }")
          .items(data-bind="template: { name: 'item-template', foreach: items }")

    %script#performance-template(type="text/html")
      .panel-heading
        %h4.panel-title Stats
      .panel-body
        .panel
          .panel-heading
            %h5.panel-title Worker
          .panel-body
            .row
              %label.col-xs-8 Processed
              .col-xs-2.text-right(data-bind="text: processedLastFrame")
            .row
              %label.col-xs-8 Remaining
              .col-xs-2.text-right(data-bind="text: remainingItems")
        .panel
          .panel-heading
            %h5.panel-title Simulation
          .panel-body
            .row
              %label.col-xs-8 Entities
              .col-xs-2.text-right(data-bind="text: entities")

    %script#settings-template(type="text/html")
      .panel-heading
        %h4.panel-title Settings
      .panel-body
        %form.form-horizontal(role="form")
          .form-group
            %label.col-xs-4.control-label(for="attraction") Attraction
            .col-xs-8
              %input.form-control.input-sm#attraction(type="number" data-bind="value: attraction")
          .form-group
            %label.col-xs-4.control-label(for="repulsion") Repulsion
            .col-xs-8
              %input.form-control.input-sm#repulsion(type="number" data-bind="value: repulsion")
          .form-group
            %label.col-xs-4.control-label(for="damping") Damping
            .col-xs-8
              %input.form-control.input-sm#damping(type="number" data-bind="value: damping")
          .form-group
            .col-xs-offset-4.col-xs-8
              .checkbox
                %label
                  %input(type="checkbox" data-bind="checked: updateLayout") Update Layout
          .form-group
            .col-xs-offset-4.col-xs-8
              .checkbox
                %label
                  %input(type="checkbox" data-bind="checked: runSimulation") Run Simulation
          .form-group
            .col-sm-offset-4.col-sm-4.col-xs-offset-2.col-xs-5
              %button.btn.btn-default.btn-sm(data-bind="click: save") Save
            .col-sm-4.col-xs-5
              %button.btn.btn-default.btn-sm(data-bind="click: reset") Reset

    %script#item-template(type="text/html")
      .item(data-bind="style: { position: 'absolute', webkitTransform: 'translate3d(' + x() + 'px, ' + y() + 'px, 0)' }, event: { mouseover: onMouseOver, mouseout: onMouseOut, mousedown: $parent.onMouseDown }")
        %a(data-bind="click: load, if: !loaded() && !loading() && errored()" href="#")
          %i.fa.fa-exclamation-triangle
        %span(data-bind="if: !loaded() && !errored()")
          %i.fa.fa-spin.fa-spinner
        .dropdown
          %a(data-bind="tooltip: { title: header, container: 'body', html: true }, popover: { template: 'item-popover-template', title: function () { return '<button class=\"close pull-right\" type=\"button\" data-dismiss=\"popover\">×</button>' + header(); }, container: 'body' }, if: loaded()" href="#")
            %span.glyphicon(data-bind="css: iconClass")

    %script#item-popover-template(type="text/html")
      %ul.nav.nav-pills.nav-stacked
        %li(data-bind="if: loaded")
          %a(data-bind="if: loaded(), attr: { href: uri }" target="_blank")
            %i.fa.fa-external-link
            Open on bandcamp
        %li(data-bind="if: loaded() && !expanding() && relatedUndisplayed().length > 0")
          %a(data-dismiss="popover" data-bind="click: expand" href="#")
            %i.glyphicon(data-bind="css: relatedClass")
            Expand
            %span(data-bind="text: relatedUndisplayed().length")
            %span(data-bind="text: relatedTypePluralized()")

{'fraction_non_alphanumeric': 0.17189862160960426, 'fraction_numerical': 0.01004891062694531, 'mean_word_length': 2.3390736342042757, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, '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': '62413', 'n_tokens_mistral': 3727, 'n_tokens_neox': 3609, 'n_words': 507}