analyzer/webui/ferret.js
// display detailed results from a query that's been submitted
display detailed results from a query that's been submitted
display detailed results from a query that ' s been submitted
function displayDetailedResults(resultSet) {
  console.log("Displaying detailed results");
  console.log(resultSet);
  var container = $("#results-container-panel");
  container.empty();
  var numResults = resultSet.results.length;
  for (var i = 0; i < numResults; i++) {    
    var subSequence = resultSet.results[i ];
    var snippet = subSequence.snippet;
    var start = subSequence.startIndex;
    var end = subSequence.endIndex;
    var startTime = moment(snippet.events[start].timeStamp);
    var endTime = moment(snippet.events[end - 1].timeStamp);
    var dr_summary_panel = jQuery('<div/>', {
      id: "dr-summary-panel-" + i,
      class: "dr-summary-panel"
    });
    var attrString = "";
    jQuery.each(snippet.attributes, function(index, attr) {
      var val = attr.value;
      var valDisp = attr.value;
      console.log("typeof val: " + (typeof val) + ", val is " + val);
      if (attr.key === "xduration") { 
        var d = new Date(val);
        var h = val.getUTCHours();
        var m = val.getUTCMinutes();
        var s = val.getUTCSeconds();
        if (h != 0) {
          valDisp = h + "h" + m + "m";
        } else if (m != 0) {
          valDisp = m + "m" + h + "s";
        } else {
          valDisp = s + "s" + Math.round(val.getUTCMilliseconds()/100) + "ms";
        }
      }
      attrString += attr.key + ": " + valDisp + "<br/>";
    });
    attrString += "distance: " + subSequence.distance + "<br/>";
    attrString += "start time: " + startTime.format('M/D/YY H:mm:ss');
    dr_summary_panel.append(attrString);
    var dr_matched_snip_panel=jQuery('<div/>', {
      id: "dr-matched-snip-panel-" + i,
      class: "dr-snippet-panel"
    });
    var j = start;
    for ( ; j < end; j++ ) {
      var evt = subSequence.snippet.events[j];
      var event_panel = createEventPanel(dr_matched_snip_panel, evt);
      var color = eventIdColorMap[evt.identifier];
      if (color != null) {
        event_panel.css('border-color', color);
      } else {
        event_panel.css('border-color', mdGray);        
      }
    }
    var dr_matched_snip_label=jQuery('<div/>', {
      id: "dr-matched-result-label-" + i,
      class: "dr-snippet-label dr-matching-label"
    });
    dr_matched_snip_label.append("Matching");
    var dr_matched_result_container=jQuery('<div/>', {
      id: "dr-matched-result-container-" + i,
      class: "dr-snippet-container"
    });    
    dr_matched_result_container.append($(dr_matched_snip_label));
    dr_matched_result_container.append($(dr_matched_snip_panel));
    var dr_before_snip_panel=jQuery('<div/>', {
      id: "dr-before-snip-panel-" + i,
      class: "dr-snippet-panel"
    });
    var j = start - 50;
    if (j < 0) j = 0;
    for ( ; j < start; j++ ) {
      var evt = subSequence.snippet.events[j];
      var event_panel = createEventPanel(dr_before_snip_panel, evt);
      var color = eventIdColorMap[evt.identifier];
      if (color != null) {
        event_panel.css('border-color', color);
      } else {
        event_panel.css('border-color', mdGray);        
      }
    }
    var dr_before_snip_label=jQuery('<div/>', {
      id: "dr-before-result-label-" + i,
      class: "dr-snippet-label dr-before-label"
    });
    dr_before_snip_label.append("Before");   
    var dr_before_result_container=jQuery('<div/>', {
      id: "dr-before-result-container-" + i,
      class: "dr-snippet-container"
    });    
    dr_before_result_container.append($(dr_before_snip_label));
    dr_before_result_container.append($(dr_before_snip_panel));
    var dr_result_container=jQuery('<div/>', {
      id: "dr-result-container" + i,
      class: "dr-result-container"
    });
    dr_result_container.append($(dr_before_result_container));
    dr_result_container.append($(dr_matched_result_container));
    var dr_row=jQuery('<div/>', {
      id: "dr-row-" + i,
      class: "dr-row"
    });
    dr_row.append($(dr_summary_panel));
    dr_row.append($(dr_result_container));
    container.append($(dr_row));  
  }
}
function displayDetailedResults ( resultSet ) { console . log ( "Displaying detailed results" ) ; console . log ( resultSet ) ; var container = $ ( "#results-container-panel" ) ; container . empty ( ) ; var numResults = resultSet . results . length ; for ( var i = 0 ; i < numResults ; i ++ ) { var subSequence = resultSet . results [ i ] ; var snippet = subSequence . snippet ; var start = subSequence . startIndex ; var end = subSequence . endIndex ; var startTime = moment ( snippet . events [ start ] . timeStamp ) ; var endTime = moment ( snippet . events [ end - 1 ] . timeStamp ) ; var dr_summary_panel = jQuery ( '<div/>' , { id : "dr-summary-panel-" + i , class : "dr-summary-panel" } ) ; var attrString = "" ; jQuery . each ( snippet . attributes , function ( index , attr ) { var val = attr . value ; var valDisp = attr . value ; console . log ( "typeof val: " + ( typeof val ) + ", val is " + val ) ; if ( attr . key === "xduration" ) { var d = new Date ( val ) ; var h = val . getUTCHours ( ) ; var m = val . getUTCMinutes ( ) ; var s = val . getUTCSeconds ( ) ; if ( h != 0 ) { valDisp = h + "h" + m + "m" ; } else if ( m != 0 ) { valDisp = m + "m" + h + "s" ; } else { valDisp = s + "s" + Math . round ( val . getUTCMilliseconds ( ) / 100 ) + "ms" ; } } attrString += attr . key + ": " + valDisp + "<br/>" ; } ) ; attrString += "distance: " + subSequence . distance + "<br/>" ; attrString += "start time: " + startTime . format ( 'M/D/YY H:mm:ss' ) ; dr_summary_panel . append ( attrString ) ; var dr_matched_snip_panel = jQuery ( '<div/>' , { id : "dr-matched-snip-panel-" + i , class : "dr-snippet-panel" } ) ; var j = start ; for ( ; j < end ; j ++ ) { var evt = subSequence . snippet . events [ j ] ; var event_panel = createEventPanel ( dr_matched_snip_panel , evt ) ; var color = eventIdColorMap [ evt . identifier ] ; if ( color != null ) { event_panel . css ( 'border-color' , color ) ; } else { event_panel . css ( 'border-color' , mdGray ) ; } } var dr_matched_snip_label = jQuery ( '<div/>' , { id : "dr-matched-result-label-" + i , class : "dr-snippet-label dr-matching-label" } ) ; dr_matched_snip_label . append ( "Matching" ) ; var dr_matched_result_container = jQuery ( '<div/>' , { id : "dr-matched-result-container-" + i , class : "dr-snippet-container" } ) ; dr_matched_result_container . append ( $ ( dr_matched_snip_label ) ) ; dr_matched_result_container . append ( $ ( dr_matched_snip_panel ) ) ; var dr_before_snip_panel = jQuery ( '<div/>' , { id : "dr-before-snip-panel-" + i , class : "dr-snippet-panel" } ) ; var j = start - 50 ; if ( j < 0 ) j = 0 ; for ( ; j < start ; j ++ ) { var evt = subSequence . snippet . events [ j ] ; var event_panel = createEventPanel ( dr_before_snip_panel , evt ) ; var color = eventIdColorMap [ evt . identifier ] ; if ( color != null ) { event_panel . css ( 'border-color' , color ) ; } else { event_panel . css ( 'border-color' , mdGray ) ; } } var dr_before_snip_label = jQuery ( '<div/>' , { id : "dr-before-result-label-" + i , class : "dr-snippet-label dr-before-label" } ) ; dr_before_snip_label . append ( "Before" ) ; var dr_before_result_container = jQuery ( '<div/>' , { id : "dr-before-result-container-" + i , class : "dr-snippet-container" } ) ; dr_before_result_container . append ( $ ( dr_before_snip_label ) ) ; dr_before_result_container . append ( $ ( dr_before_snip_panel ) ) ; var dr_result_container = jQuery ( '<div/>' , { id : "dr-result-container" + i , class : "dr-result-container" } ) ; dr_result_container . append ( $ ( dr_before_result_container ) ) ; dr_result_container . append ( $ ( dr_matched_result_container ) ) ; var dr_row = jQuery ( '<div/>' , { id : "dr-row-" + i , class : "dr-row" } ) ; dr_row . append ( $ ( dr_summary_panel ) ) ; dr_row . append ( $ ( dr_result_container ) ) ; container . append ( $ ( dr_row ) ) ; } }
display detailed results from a query that's been submitted
display detailed results from a query that ' s been submitted
//iterate through all of the result snippets // create the summary panel that describes this result // disabled for now // create the snippet panel that shows the matching portion of the result snippet     // now display the events just before the matching region // now create the layout for this detailed result row