Hierarchische Facettierung und Anzeige mit Solr und jQuery

Intro Als ich letzte Woche innerhalb von zwei Tagen zwei große Kunden besuchte, stellte sich mir bei beiden die gleiche…

Intro

Als ich letzte Woche innerhalb von zwei Tagen zwei große Kunden besuchte, stellte sich mir bei beiden die gleiche Frage: Wie können wir hierarchische Informationen wie Taxonomien, Dateipfade usw. besser nutzen?
in Lucidworks Search (LWS) (und Apache Solr) ihre Anwendungen, so dass sie etwas wie das folgende Bild in ihrer Benutzeroberfläche anzeigen können:

/> Da dies ziemlich einfach ist (vieles davon ist bereits
auf dem Solr Wiki erfasst) und ich sowohl
den clientseitigen als auch den serverseitigen Code dafür bereits in einigen Demos, die wir hier bei Lucid routinemäßig geben, geschrieben habe, dachte ich, ich würde es als Blog
schreiben, anstatt jedem von ihnen eine einmalige Antwort zu schicken. Ich werde diese Arbeit im Zusammenhang mit dem
LWS Financial Demo, für diejenigen, die auf Code-Ebene folgen möchten. Wir verwenden
, um eine kleine hierarchische Facettierung zu zeigen, die den Industriesektor eines S&P 500-Unternehmens mit dem Bundesland und der Stadt des Hauptsitzes dieses Unternehmens korreliert. In Ihrem speziellen Anwendungsfall möchten Sie es vielleicht für die Organisation von Inhalten in Dateisystemen, Websites, Taxonomien oder so ziemlich allem verwenden, das, wie der Name schon sagt, hierarchische Beziehungen aufweist.

Prämisse

Solr, die Grundlage von Lucidworks Search, verfügt zwar nicht über das „native“ Konzept der hierarchischen Facettierung, aber es ist ganz einfach,
mit einem wenig bekannten Parameter für die Standard-Facettierungsfunktionen
namens „facet.prefix“ zu verwenden. Der Parameter „facet.prefix“ filtert einfach alle Begriffe aus der Menge der in Frage kommenden Begriffe heraus, die das Präfix nicht enthalten. Bei der Indexierung
Ihrer hierarchischen Inhalte brauchen Sie also nur Ihre Hierarchie in einzelne Begriffe aufzuteilen und ihnen ein bekanntes Präfix voranzustellen, das die Tiefe
des Elements angibt. Nehmen wir als Beispiel an, ich habe die folgenden Hierarchien, die in der Datei sp500List.txt zu sehen sind, die sich in
https://github.com/Lucidworks/lws-financial-demo/tree/master/data:

    /Information Technology/Ireland/Dublin
    /Health Care/California/Santa Clara
    /Information Technology/California/San Jose

Um den Facetten-Präfix-Trick anzuwenden, kann ich bei der Indizierung einfach
einen Tiefenfaktor an jedes Split-Token anhängen, z.B. 0/Informationstechnologie; 1/Irland; 2/Dublin

Vom Schema her brauche ich dann nur noch ein String-Feld, das mehrwertige Felder akzeptiert, die ich im Skript setup.py
als „Hierarchie“ bezeichnet habe. Der Schritt der Indizierung wird in der Methode index_stocks() erfasst und sieht wie folgt aus:

    def index_stocks(solr, stocks, id):
     #Symbol,Company,City,State
     print "Indexing Company Info"
     for symbol in stocks:
         vals = stocks[symbol]
         items = {"id": symbol, "symbol": symbol, "company": vals[1], "industry": vals[2], "city": vals[3],
                 "state": vals[4], "hierarchy": ["1/" + vals[2], "2/" + vals[4], "3/" + vals[3]]} # Start at 1/ for ease integration w/ JS
         add(solr, [items], id, commit=False)

Der wichtigste Teil dieses Codeblocks ist natürlich der Abschnitt mit der Hierarchie, in dem ich den Attributen eine Tiefenangabe voranstelle. Sie werden
später sehen, wenn wir uns mit dem Front-End-Code befassen, wie dies von Javascript genutzt wird.

Lesen Sie in der README.md nach, wie Sie das Setup-Programm ausführen. Beachten Sie, dass Sie einen Twitter-API-Schlüssel benötigen, wenn Sie die Twitter-Feeds aus der Demo indizieren möchten.

Anzeigen der Hierarchie auf dem Client

Auf der Client-Seite haben wir ein bisschen jQuery-basiertes Javascript entwickelt, das interaktiv einen hierarchischen Baum der Facetten anzeigt
und alle Anfragen zur Aktualisierung des Inhalts bearbeitet. Dieser Ansatz erfordert auch ein wenig Backend-Unterstützung in der Flask App durch die Methode
hierarchical_facets() in python.py, da wir die Informationen zur Facettenhierarchie außerhalb des Kontexts der Hauptanfrage
an LWS bei der Suche abfragen. Der Schlüssel zu dieser Methode ist einfach das Hinzufügen/Manipulieren des Parameters facet.prefix, der den vom Client
übergebenen Wert verwendet, um die Facettenwerte einzuschränken.

Auf der Client-Seite steckt alles im Javascript, das sich in ein paar Schlüsselfunktionen aufgliedern lässt, plus
einige Jinja2-Templates (die sich leicht in die von Ihnen bevorzugte Templating-Engine umwandeln lassen, da ich dies
in der Vergangenheit mehrmals getan habe) Kleber. (Verzeihen Sie mir, wenn dies nicht das beste Javascript ist, das Sie je gesehen haben, ich bin definitiv kein JS-Experte!)

Der gesamte Code für die Client-Seite befindet sich in der Datei facet_hierarchy.jinja2.

Zunächst fällt auf, dass wir ein einfaches Platzhalter-Div-Tag mit dem Namen „hierarchy“ haben, an das wir die Taxonomie in der HTML-Datei anhängen werden. Von hier aus ist es wahrscheinlich am einfachsten, vom Ende der Datei zurück zum Anfang zu arbeiten, da die erste Anfrage
an das Backend dort erstellt wird. Das Wichtigste ist die Einrichtung der Facettenabfrage und der Aufruf von jQuery.getJSON(), der
den Aufruf der Methode hierarchical_facets() im Backend ausführt:

    the_response = jQuery.getJSON(url, request_data, listCats);

Der letzte Parameter, listCats, ist die jQuery-Rückruffunktion, die für das Rendern des Baums verantwortlich ist und somit der logische
nächste Schritt in unserer Tour durch das Javascript ist. In listCats nehmen wir die Antwort aus dem Backend und erstellen unsere Liste von
Kategorien, indem wir catList() aufrufen und sie dann mit dem Aufruf in der Hierarchie darstellen:

    jQuery('#hierarchy').before(list).prev()
         .find('.expand').click( toggleCat ).css({cursor:'pointer', display:'inline-block', width:'1em'});

In der catList()-Methode wird das eigentliche HTML erzeugt (ja, ich hasse eingebettetes HTML in JS, aber für unser Beispiel reicht es).
Hinweis: Wenn Sie sich für die CSS-Seite der Gleichung interessieren, sehen Sie sich die Datei app.css
und den Abschnitt „facet-hierarchy“ für die entsprechenden CSS-Einstellungen an.

Das letzte Stückchen Code, das jetzt noch benötigt wird, ist die Funktionalität für die verschiedenen Klicks (Erweiterungen, Auswahl usw.), die
über den gesamten Code verteilt, aber hauptsächlich in der Methode toggleCat() konzentriert sind.

Wie Sie sehen, ist es wirklich ganz einfach, hierarchische Facetten in Ihre Suchanwendung einzubauen, und zwar mit ein wenig Indizierungstricks
und ein paar jQuery-Tricks.

Nächste Schritte

Es wäre kein Code, wenn wir hier nicht noch etwas tun könnten, um die Dinge zu verbessern. Als nächsten Schritt denke ich, dass es großartig wäre,
wenn jemand all dies ein wenig mehr in die entsprechenden Solr-Analysefunktionen und Request-Handler kodiert sowie
mein Flask und Javascript aufräumt. Um meinen Lieblingssatz aus meiner Zeit als Matheprofessor zu verwenden, überlasse ich das dem Leser als Übung. Wenn Sie
eine dieser Aufgaben übernehmen, können Sie mir gerne den Solr JIRA Issue mitteilen oder einen Pull Request einreichen und ich werde sehen, was ich tun kann
, um es zu integrieren.