CottageLabs / facetview2

a pure javascript frontend for ElasticSearch search indices.
MIT License
79 stars 31 forks source link

search+facets working, but results not displayed #7

Open petercsmith opened 9 years ago

petercsmith commented 9 years ago

I have facetview2 working against my ES index. The debug window shows results coming back from ES, but they refuse to display correctly in the results! The javascript debugger shows a bunch of empty 'td' tags, but I see results coming back from ES in the debugging console. See below for screenshot and code:

image

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>FacetView</title>

  <script type="text/javascript" src="vendor/jquery/1.7.1/jquery-1.7.1.min.js"></script>

  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>  

  <link rel="stylesheet" href="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.css">
  <script type="text/javascript" src="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.min.js"></script>

  <!-- note that we require the es.js integration, the bootstrap2 facetview and the facetview core -->
  <script type="text/javascript" src="es.js"></script>
  <script type="text/javascript" src="bootstrap2.facetview.theme.js"></script>
  <script type="text/javascript" src="jquery.facetview2.js"></script>

  <link rel="stylesheet" href="css/facetview.css">

  <script type="text/javascript">
jQuery(document).ready(function($) {
    $('.facet-view-simple').each(function() {
        $(this).facetview({
            search_url: 'http://services:9200/flow/_search',
            facets: [
                {'field': 'euid', 'size': 2, 'order':'term', 'display': 'EUID'},
                {'field': 'srcPort', 'size': 2, 'order':'term', 'display': 'Source Port'},
                {'field': 'protocol', 'size': 2, 'order':'term', 'display': 'protocol'},
                {'field': 'action', 'size': 2, 'order':'term', 'display': 'action'}, ],
            debug: true,
        });
    });
});
  </script>

<style type="text/css">
.facet-view-simple{
    width:1170px;
    height:600px;
    margin:20px auto 0 auto;
}
</style>

</head>
<body>

    <div class="facet-view-simple"></div>

</body>
</html>
richard-jones commented 9 years ago

Hi @petercsmith ,

Unless you specify a render function for records, fv2 will fall-back to its default result renderer which takes a configuration option to list some specific fields from the result record; that in turn just defaults to looking for a field called "id" to act as a kind of placeholder instead of the actual list you'd want to use. Since your data probably doesn't have an "id" field, it's just not rendering anything.

So, you have a couple of options.

1/ pass in your own renderer:


function customResultRenderer(options, record) {
    return "string representation of record"
}

$(this).facetview({
    search_url: 'http://services:9200/flow/_search',
    render_result_record: customResultRenderer    
    debug: true
});

2/ Use the default renderer, and tell it which fields from your data to display:

$(this).facetview({
    search_url: 'http://services:9200/flow/_search',
   result_display : [ 
        [ {"pre" : "<strong>EUID</strong>:", "field": "euid", "post" : "<br><br>"} ],
        [ {"pre" : "<strong>Source Port</strong>:", "field": "srcPort", "post" : "<br><br>"} ]
        [ {"pre" : "<strong>protocol</strong>:", "field": "protocol", "post" : "<br><br>"} ]
        [ {"pre" : "<strong>action</strong>:", "field": "action", "post" : "<br><br>"} ] 
    ],    
    debug: true
});

Hope that helps!

petercsmith commented 9 years ago

@richard-jones,

Thank you, that did the trick. I really appreciate your help!

Peter