PSL Generator Prototype

This tool is designed to compliment the position of the TSS for customers with limited access to on-site TSS support. The PSL Generator's purpose is to create perfect PSL every time. When the user clicks Generate PSL it will display the user's PSL in the bottom text box and a email will/can be sent to the assigned TSS. This will allow the TSS to examine the PSL and provide expert feedback on enhancing the PSL for better search results.

by justinbrown

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://raw.github.com/jackmoore/autosize/master/jquery.autosize.js"></script>
<script src="https://raw.github.com/wordnik/swagger.js/master/lib/swagger.js"></script>
<script src="http://cloud.github.com/downloads/jzajpt/ember-bootstrap/ember-bootstrap-0.0.1.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Query Builder</a>
        <ul class="nav">
            <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          <!--<li><a href="#"><i class="icon-white icon-question-sign"></i> About</a></li>
          <li><a href="#"><i class="icon-white icon-flag"></i> Features</a></li>-->
        </ul>
        <ul class="nav pull-right">
          <!--<li><a href="#"><i class="icon-white icon-wrench"></i> Settings</a></li>-->
        </ul>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    {{view App.WordsView}}
    <div style="display:none">
    {{view App.WordEditorView contentBinding="App.wordsController.selectedWord"}}
    </div>
    <div class="row-fluid">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#assembly" data-toggle="tab">Workspace</a></li>
        <li><a href="#psl" data-toggle="tab">PSL</a></li>
      </ul>
      <div class="tab-content">
        <div id="assembly" class="tab-pane active fade in">
          {{view App.PslAssemblyView}}  
        </div>
        <div id="psl" class="tab-pane fade">
          <pre>{{App.queryController.queryTreePsl}}</pre>
        <div class="row-fluid">
          {{view Bootstrap.Forms.TextArea placeholder="Leave a message..."}}
        </div>
        <div class="row-fluid">
          <button class="btn...

SCSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

html, body, .application {
 height: 100%;
 position: relative;
 width: 100%;
}

.application {
  > * { overflow: auto; }
}

textarea { width: 100%; }

.char {
  background-color: white;
  font-family: monospace;
  font-size: 2em !important;
  height: 1.3em !important;
  text-align: center;
  width: 0.9em;
  
  &.is-optional {
    opacity: .5;
  }

  &.is-lowercase-only {
    text-decoration: underline;
  }

  &.is-match-any-char, &.is-match-many-chars {
    color: blue;
  }

  &.is-match-one-char {
    color: blue;
  }
}

.words {    
  .words-list {
    width: 100%;
    
    .word-list-item {
      &.is-selected {
        background-color: lightskyblue;
      }

      .psl { width: 80%; }
      .remove { width: 20%; }
    }
  }
}

.drop-options {
  /*display: none;*/
}

.drag-hovered {
  box-shadow: inset 0 0 10px lightgreen;
}

.pslAssembly {
  > .row-fluid {
    height: 500px;
  }

  .snippet-area {
    /*position: relative;*/
    height: 100%;
  }
    
  .assembly-snippet {
    display: inline-block;
    padding: 1.1em;
    margin: 0.2em;
    position: relative;
    
    > * {
      display: inline-block;  
    }
        
    .extent-badge {
      position: absolute;
    }
        
    &:last-of-type {
      &:after {
        content: "";
      }
    }

    .subsnippets {
      display: inline-block;
      border: 1px solid;
      border-radius: 5px;
    }
  }
}

.sample-document-view {
  position: absolute;
}

.keyboard-shortcuts {    
  .shortcut {
    margin-bottom: 0.3em;
    
    &:last-of-type { margin-bottom: 0; }

    &.enabled {
      background-color: #CCFFCD;
 ...

JavaScript

/*
TODO:
- Strip leading/trailing whitespace when copying from sample
- Table of contents comment structure
- Ability to toggle viewing comments in psl
- ^^ '*istan' 'istan*' '*istan*'
- Find commonalities in alternatives
- 'John [|Quincy ]Adams' not 'John [|Quincy] Adams'
- Alternative mode? Suspends regular navigation so you can type multiple in alts
- http://jsfiddle.net/chrisconley/NN35P/

BUGS:
- Can't navigate left from charinput that is a space
- If text is selected, don't append just allow to replace normally

Tell me about this PSL:
- Uppercase chars only match uppercase
- Lowercase chars match upper and lower case
- Words that start with...
- Words that end with...
- ? matches one alpha-numeric character
- . matches any one character

Use case story:
- Highlight a term in displaydoc
- Popup bubble "Build entity using this?"
- Open PSL generator with term populated
- Quicksearch for term runs asynchronously
- Take a sample of returned quicksearch documents and find common terms
- Suggest common terms to make psl more focused
*/

window.DragNDrop = Ember.Namespace.create();

DragNDrop.cancel = function(event) {
    event.preventDefault();
    return false;
};

DragNDrop.Draggable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        console.log('dragStart', this.get('elementId'));
        dataTransfer.setData('Text', this.get('elementId'));
    }
});

DragNDrop.Droppable = Ember.Mixin.create({
    dragOver: DragNDrop.cancel,
    drop: function(event) {
        event.preventDefault();
        return false;
    },
    classNameBindings: ['dragHovered'],
    dragHovered: false,
    dragEnter: function(event) {
        this.set('dragHovered', true);

        return DragNDrop.cancel(event);
    },
    dragLeave: function(event) {
        this.set('dragHovered', false);

        return DragNDrop.cancel(event);
    }
});

window.App =...