58 lines
1.6 KiB
HTML
58 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!-- vim: set ts=2 sw=2 et tw=80: -->
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>FoamTree Quick Start</title>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<style>
|
||
|
|
.document { float: left }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="docs"></div>
|
||
|
|
<div id="visualization" style="width: 800px; height: 600px"></div>
|
||
|
|
<template id="document">
|
||
|
|
<div class="document">
|
||
|
|
<img width="300" src="{{ url }}"/>
|
||
|
|
<h2>{{ title }}</h2>
|
||
|
|
<h3>By {{ author }}</h3>
|
||
|
|
{{ description }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script src="./carrotsearch.foamtree.js"></script>
|
||
|
|
<script>
|
||
|
|
const solr = "http://localhost:8983/solr/photo";
|
||
|
|
window.addEventListener("load", async function() {
|
||
|
|
let templateHTML = document.querySelector("#document").innerHTML;
|
||
|
|
let docs = document.querySelector("#docs");
|
||
|
|
let docMap = {}
|
||
|
|
|
||
|
|
const doc = (docData) => {
|
||
|
|
docMap[docData.id] = docData;
|
||
|
|
return templateHTML
|
||
|
|
.replace("{{ title }}", docData.t_title)
|
||
|
|
.replace("{{ author }}", docData.t_author)
|
||
|
|
.replace("{{ description }}", docData.t_description)
|
||
|
|
.replace("{{ url }}", docData.img_url);
|
||
|
|
};
|
||
|
|
|
||
|
|
let list = await fetch(solr + "/clustering?q=" + escape(prompt("query")));
|
||
|
|
let body = await list.json();
|
||
|
|
console.log(body);
|
||
|
|
docs.innerHTML = body.response.docs.map(doc).reduce((a, b) => a + b, "");
|
||
|
|
|
||
|
|
let clusters = body.clusters.map(e => { return { label: e.labels[0], weight:
|
||
|
|
e.score, groups: e.docs.map(id => { return { id, label: docMap[id].t_title }; }) }; });
|
||
|
|
var foamtree = new CarrotSearchFoamTree({
|
||
|
|
id: "visualization",
|
||
|
|
dataObject: {
|
||
|
|
groups: clusters
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>`
|