QRy-codes Vue FoamTree Component

Vue 3 component for clustering qry-codes and visualizing them using FoamTree Useful for search applications built using BinaryVectors.

Installation

npm install @andorsearch/qry-codes-vue-foamtree

Add styles by importing stylesheets:

import '@andorsearch/qry-codes-vue/dist/style.css';
import '@andorsearch/qry-codes-vue-foamtree/dist/style.css';

Components

• ClusterFoamTree for clustering similar vectors interactively with a similarity threshold slider

Usage

Check out a demo at https://news.inperspective.com

Applications will typically load data in JSON form with the binary embeddings encoded as hex or base64 strings. These need to be converted into Uint8Array objects for use in clustering algorithms. The 'bytesConversion' object offers "fromBase64" and "fromHex" helper functions to aid in this:

import { bytesConversion } from "@andorsearch/qry-codes"
let myDocs = ref<any[]>([])

async function loadData() {
  const data = await fetch("/mydata/myDocs.json");
  const json = await data.json()
  json.forEach(doc => {
    // Replace simple string objects loaded in json with Uint8Array binary vectors
    doc["embedding"] = bytesConversion.fromBase64(doc["embedding"])
    myDocs.value.push(doc)
  })
}
onMounted(() => {
  loadData()
});

Once loaded, the data can be passed to the ClusterFoamTree component for clustering and visualization. Clusters are listed horizontally and within each cluster a number of vectors are listed vertically where typically applications will show original text and/or images that were originally used to create the vectors rather than the raw vector data.

import {ClusterFoamTree} from "@andorsearch/qry-codes-vue-foamtree"

    <ClusterFoamTree v-if="myDocs.length > 0" :vectors="myDocs.map(doc => doc['embedding'])"
          :clusterLabeller="getFoamTreeClusterLabel"
          :itemLabeller="getFoamTreeItemLabel"
          @clusterClicked="foamTreeClusterClicked"
    >
    </ClusterFoamTree>

The helper functions shown above are called to fetch suitable text strings for labelling elements. Some example implementations are shown below:

function getFoamTreeItemLabel(vectorIndex:number){
  // assuming our documents have a "headline" text property
  return myDocs[vectorIndex].headline
}

function getFoamTreeClusterLabel(cluster:any):string{
    // Simplistic implementation labels cluster with label of the first item in the cluster
    return getFoamTreeItemLabel(cluster.indices[0])
}

The clusterClicked event is useful for drilling down to details within a cluster (See newsmap for an example )