Aggregations

import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
import { aggregationItemStrictCompare, sysLang } from "@sinequa/atomic";
import type { Aggregation, AggregationItem } from "@sinequa/atomic";
import { SINEQUA } from "./sinequa";

@Component({
  selector: "app-facet",
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h3>{{ label(aggregation().name) }}</h3>

    <ul>
      @for (item of items(); track item.value) {
        <li>
          <button type="button" [attr.aria-pressed]="isSelected(item)" (click)="toggle.emit(item)">
            {{ label(item.display ?? item.value) }} ({{ item.count }})
          </button>
        </li>
      }
    </ul>

    <!-- $hasMore is set by the library from the item count, not by the server. -->
    @if (aggregation().$hasMore) {
      <button type="button" (click)="loadMore()" [disabled]="loading()">
        {{ loading() ? 'Loading…' : 'Load more' }}
      </button>
    }
  `,
})
export class FacetComponent {
  private readonly client = inject(SINEQUA);

  readonly aggregation = input.required<Aggregation>();
  readonly selected = input<AggregationItem[]>([]);

  readonly loading = signal(false);
  private readonly extra = signal<AggregationItem[]>([]);

  readonly items = computed(() => [...(this.aggregation().items ?? []), ...this.extra()]);

  /** Compares on `display` or `value` depending on the aggregation — hence the helper. */
  isSelected(item: AggregationItem) {
    return this.selected().some((s) => aggregationItemStrictCompare(this.aggregation(), s, item));
  }

  label(value: unknown) {
    return sysLang(String(value ?? ""), navigator.language);
  }

  /**
   * Pages through this aggregation's items. The page size comes from the declared
   * `aggregationCounts`; pass a 4th argument to override it for this call only.
   */
  async loadMore() {
    this.loading.set(true);
    try {
      const next = await this.client.api.query.aggregate(this.aggregation(), {
        name: "<your-query>",
        text: "report",
      });
      this.extra.update((current) => [...current, ...(next.items ?? []).slice(current.length)]);
    } finally {
      this.loading.set(false);
    }
  }
}

import { aggregationItemStrictCompare, sysLang } from "@sinequa/atomic";
import type { Aggregation, AggregationItem } from "@sinequa/atomic";
import { useState } from "react";
import { sinequa } from "./sinequa";

export function Facet({
  aggregation,
  selected,
  onToggle,
}: {
  aggregation: Aggregation;
  selected: AggregationItem[];
  onToggle: (item: AggregationItem) => void;
}) {
  const [extra, setExtra] = useState<AggregationItem[]>([]);
  const [loading, setLoading] = useState(false);

  const items = [...(aggregation.items ?? []), ...extra];

  /**
   * Pages through this aggregation's items. The page size comes from the declared
   * `aggregationCounts`; pass a 4th argument to override it for this call only.
   */
  async function loadMore() {
    setLoading(true);
    try {
      const next = await sinequa.api.query.aggregate(aggregation, { name: "<your-query>", text: "report" });
      setExtra((current) => [...current, ...(next.items ?? []).slice(current.length)]);
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <h3>{sysLang(aggregation.name, navigator.language)}</h3>

      <ul>
        {items.map((item) => (
          <li key={String(item.value)}>
            <button
              type="button"
              /* Compares on display or value depending on the aggregation. */
              aria-pressed={selected.some((s) => aggregationItemStrictCompare(aggregation, s, item))}
              onClick={() => onToggle(item)}
            >
              {sysLang(String(item.display ?? item.value), navigator.language)} ({item.count})
            </button>
          </li>
        ))}
      </ul>

      {/* $hasMore is set by the library from the item count, not by the server. */}
      {aggregation.$hasMore && (
        <button type="button" onClick={loadMore} disabled={loading}>
          {loading ? "Loading…" : "Load more"}
        </button>
      )}
    </>
  );
}

import { InjectionToken, inject, provideAppInitializer } from "@angular/core";
import { type AtomicClient, createAtomicClient } from "@sinequa/atomic";

export const SINEQUA = new InjectionToken<AtomicClient>("Sinequa client", {
  factory: () =>
    createAtomicClient({
      app: "<your-app>",
      backendUrl: "https://<your-sinequa-server>",
    }),
});

export function provideSinequa() {
  return provideAppInitializer(async () => {
    const client = inject(SINEQUA);
    await client.initializeConfig();
    await client.auth.login();

    // Read the configuration once, and hand the real page sizes to the library.
    // Without this it assumes 10, which makes `$hasMore` wrong both ways.
    const app = await client.api.app.get();
    const queryName = app.defaultQueryName ?? "<your-query>";

    client.configure({
      aggregationCounts: Object.fromEntries(
        (app.queries[queryName].aggregations ?? []).map((a) => [a.name, a.count]),
      ),
    });
  });
}

import { createAtomicClient } from "@sinequa/atomic";

export const sinequa = createAtomicClient({
  app: "<your-app>",
  backendUrl: "https://<your-sinequa-server>",
});

export const ready = (async () => {
  await sinequa.initializeConfig();
  await sinequa.auth.login();

  // Read the configuration once, and hand the real page sizes to the library.
  // Without this it assumes 10, which makes `$hasMore` wrong both ways.
  const app = await sinequa.api.app.get();
  const queryName = app.defaultQueryName ?? "<your-query>";

  sinequa.configure({
    aggregationCounts: Object.fromEntries(
      (app.queries[queryName].aggregations ?? []).map((a) => [a.name, a.count]),
    ),
  });
})();