Skip to content

Commit

Permalink
Initial import.
Browse files Browse the repository at this point in the history
  • Loading branch information
darth-pr committed Apr 9, 2015
1 parent 7a6fc64 commit 0deabe7
Show file tree
Hide file tree
Showing 42 changed files with 12,188 additions and 0 deletions.
3 changes: 3 additions & 0 deletions META-INF/MANIFEST.MF
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Manifest-Version: 1.0
Created-By: 1.7.0_71 (Oracle Corporation)

175 changes: 175 additions & 0 deletions README.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
FacetView_ is a pure javascript frontend for ElasticSearch search
indices.

(This used to work against SOLR too, but the need to maintain support for that became less, and is now not a priority. So has been removed altogether. If anyone needs it, it could be added back in by writing an alternative to the elasticsearchquery() with a solrsearchquery(), and making sure the returned resultset can be parsed out properly. Used to work fine so it can be done, but as new functionality like nesting and so on was brought in, it became less important.)

It's been developed as a jQuery plugin and lets you easily embed a faceted
browse front end into any web page.

.. _FacetView: https://okfnlabs.org/facetview/

Development is now taking place in this repo: https://github.com/okfn/facetview


Demo
====

See https://okfnlabs.org/facetview/ or if you have the source just take a look
at index.html or simple.html


Status
======

FacetView is pretty new, and still under active development but is already
pretty stable. If you have suggestions or want to make a contribution please
check out the github repo.


Using FacetView
===============

Add the following code to your web page::

<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>
<script type="text/javascript" src="vendor/linkify/1.0/jquery.linkify-1.0-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>
<script type="text/javascript" src="jquery.facetview.js"></script>
<link rel="stylesheet" href="css/facetview.css">
<script type="text/javascript" src="vendor/d3/d3.min.js"></script>
<script type="text/javascript" src="vendor/d3/d3.geom.min.js?2.1.3"></script>
<script type="text/javascript" src="vendor/d3/d3.layout.min.js?2.1.3"></script>


* BUT change the src URLs to something sensible depending on where you install
the files; or something different if you have the files available already.
If using your own, NOTE the versions; particularly bootstrap - we are on the 2.x
* d3 scripts can be dropped if you intend to disable filter visualisations.


Then add a script somewhere to your page that actually calls and sets up the
facetview on a particular page element:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.facet-view-simple').facetview({
search_url: 'https://bibsoup.net/query?',
search_index: 'elasticsearch',
facets: [
{'field': 'publisher.exact', 'size': 100, 'order':'term', 'display': 'publisher'},
{'field': 'author.name.exact', 'display': 'author'},
{'field': 'year.exact', 'display': 'year'}
],
});
});
</script>


Now that you have everything ready, you will probably want to customize to
get it looking the way you want it.


Customization
=============

Once you have FacetView all ready to go, you should probably do some
customisation. There are a few ways to do this:

Edit the config in jquery.facetview.js
--------------------------------------

View the config options near the top of the file to learn more. Some
important points:

* search_url – you need this. Should be an elasticsearch or SOLR query endpoint
* search_index – your index type, solr or elasticsearch
* result_display - there is a long example of result display. It is a list of
lists; each list represents a line; each line contains objects; the objects
specify the field they should output, and pre and post information to surround
it with
* display_images - if this is set to true, then facetview will attempt to find
the first https://... that ends with .jpg / .jpeg / .png / .gif in each record;
if one is found, it will be displayed in the search result as a 100 x (up to)
150 px thumbnail
* default_url_params – parameters to pass through with every query; should
include “wt”:”json” for SOLR queries to return JSON, and probably
“facet.mincount”:1 for SOLR queries to ignore zero counts on facet values
* predefined_filters – use these to apply some filters that will be appended
to every search. For example, customise a facetview display to only show
records with a particular owner / collection / tag / whatever

Pass in config settings when calling FacetView
----------------------------------------------

All of the settings can also be defined when calling FacetView, and will
overwrite the values set in the file itself. So you can do something like
this::

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('YOUR-PAGE-PART').facetview({
"search_index":"elasticsearch",
...
});
});
</script>

Passing config parameters in the URL
------------------------------------

Configs can be passed on the URL as query parameters. For example,
?q=blah will set the starting search to "blah". You can add complex
queries as JSON objects, such as ?paging={"size":20,"from":10}. Nice...

Providing the location of an external config file
-------------------------------------------------

A file can be made available anywhere on the web (depending, keep reading)
with any of the above listed settings in it (written in the usual way for a
JSON object). Then, just pass the URL of your config file when you call
FacetView - as a parameter called "config_file", and it will attempt to read
that config file for you.

The first attempt will make a JSONP request to the URL you specify, so if your
file is properly set up on a server that enables it to respond to such a request,
you can make these calls to any address on the internet.

If JSONP call fails, then a normal GET will be executed. So if the file is under
the same domain, it should be retrievable. In this case, the file must be
normally readable to a GET request - e.g. it should have a .html extension, or
be otherwise set up to return your config as a string to the GET request. The
JSON config object is then parsed and read in.

Config precedence
-----------------

When you introduce a new config object, they are merged into earlier configs with
overwrite. So any config you specify in facetview.jquery.js will be overwritten
and appended with newer info from any config passed in when calling facetview,
which is overwritten by config parameters passed in the URL,
and a call to a remote config file will similarly overwrite and append to all
previous.

Change the layout by making and using a custom CSS file
-------------------------------------------------------

Facetview uses the latest `twitter bootstrap`_. When you embed facetview in a page,
you need to include the calls to bootstrap js and css files (see the example
index.html here for more info). You could restyle facetview any way you want,
either with or without bootstrap - although it would be a hassle to strip
bootstrap out; recommend working with or around it.


Copyright and License
=====================

Copyright 2011 Open Knowledge Foundation and Cottage Labs.

Licensed under the `MIT License`_

.. _twitter bootstrap: https://twitter.github.com/bootstrap/
.. _MIT License: https://www.opensource.org/licenses/mit-license.php

18 changes: 18 additions & 0 deletions WEB-INF/web.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://java.sun.com/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">

<display-name>FacetView Web Application</display-name>

<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
77 changes: 77 additions & 0 deletions css/facetview.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
#facetview_freetext{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#facetview_filters h3{
margin:40px 0 20px 0;
}
#facetview_advanced{
float:left;
clear:left;
margin:10px;
padding:3px 5px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #a1a1a1;
color:#a1a1a1;
overflow:hidden;
width:165px;
}
#facetview_advanced select{
width:160px;
background:#fff;
border:1px solid #a1a1a1;
color:#a1a1a1;
font-size:11px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#facetview_visualisation{
border:1px solid #ccc;
margin:10px 0 10px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.facetview_rangecontainer{
border:1px solid #ccc;
padding:5px;
margin-bottom:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.node{
cursor:pointer;
}
.facetview_filterchoice{
text-decoration:none;
color:#373737;
}
.facetview_filterselected{
}
.facetview_facetlogic{
}
.facetview_freetext_filterdiv{
float:left;
clear:both;
background:#eee;
padding:0;
color:green;
width:100%;
}
.facetview_advancedshow{
text-decoration:none;
color:#a1a1a1;
}

.facetview_resultactions a{
color:#353535;
font-weight:bold;
text-decoration:none;
margin:0 5px 0 5px;
}

43 changes: 43 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**********************************************
* Generic Mods to Bootstrap
*********************************************/

html, body {
background-color: #eee;
}
body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}

.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.page-header {
background-color: #f5f5f5;
padding: 20px 20px 10px;
margin: -20px -20px 20px;
}

.container > footer p {
text-align: center;
}

/* specific additions for the example index page */
.nav-logo img {
margin-top: 4px;
}

h4 {
line-height: 28px;
margin-bottom: 10px;
}

70 changes: 70 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Celgene Facet View</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>

<script type="text/javascript" src="vendor/linkify/1.0/jquery.linkify-1.0-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>

<script type="text/javascript" src="jquery.facetview.js"></script>

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

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

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.facet-view-simple').facetview({
search_url: '',
search_index: 'solr',
facets: [
{'field':'year.exact', 'display': 'year'},
{'field':'publisher.exact', 'display': 'publisher'}
],
paging: {
from: 0,
size: 10
}

});
});
</script>
</head>

<body>

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">FacetView</a>
<ul class="nav">
<li><a href="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/darth-pr/facetview">Github</a></li>
<li><a href="https://github.com/darth-pr/facetview/issues">Issues</a></li>
</ul>
</div>
</div>
</div>

<div class="container">
<div class="content">
<div class="page-header">
<h1>
Study Search
</h1>
</div>

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

</div>

</div>
</body>
</html>
Loading

0 comments on commit 0deabe7

Please sign in to comment.