QRy-codes React Components

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

Installation

npm install @andorsearch/qry-codes-react

Components

• QryCluster for clustering similar vectors interactively with a similarity threshold slider
• BitVisualizer for showing vectors as QRy codes (QR-like codes)

Usage

Check out the "Hello World" demo at https://github.com/markharwood/qry-codes-react-helloworld

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';

type NewsDoc = {
  headline: string;
  embedding: Uint8Array;
};

export default function App() {
  const [myDocs, setMyDocs] = useState<NewsDoc[]>([]);

  useEffect(() => {
    async function loadData() {
      const resp = await fetch('/data/news_200.json');
      const json = await resp.json();
      const convertedDocs = json.map((doc: any) => ({
        ...doc,
        embedding: bytesConversion.fromBase64(doc.embedding)
      }));
      setMyDocs(convertedDocs);
    }

    loadData();
  }, []);

Once loaded, the data can be passed to the QryCluster 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 { QryCluster, BitVisualizer } from '@andorsearch/qry-codes-react';
...
      {myDocs.length > 0 && (
        <QryCluster
          vectors={vectors}
          minDocsPerCluster={1}
          renderClusterHeader={(cluster, clusterIndex) => (
            <button class="myClusterHeaderButton" onClick={() => doSomethingOnClusterClick(cluster.mergedVector)}>
              <BitVisualizer data={cluster.mergedVector} cols={64} cellSize={0.8} />
              <div>
                {cluster.indices.length > 1
                  ? `${cluster.indices.length} matches`
                  : '1 match'}
              </div>
            </button>
          )}
          renderClusterElement={(vectorIndex) => (
            <div className="article">
              {myDocs[vectorIndex]?.headline}
            </div>
          )}
        />
      )}