@manta-eu/react 0.1.9 → 0.1.10

package/src/rules/RuleNarrativeSegments.tsx

@@ -0,0 +1,132 @@
+import type { DatalogTerm } from "@manta-eu/datalog-parser";
+import type { ReactNode } from "react";
+import { Fragment } from "react";
+import { match } from "ts-pattern";
+import { OntologyTermText } from "../ontology/OntologyTermText";
+import type { NarrativeSegment } from "./rule-narrative";
+import { predicatePrefix } from "./rule-narrative-format";
+import { cn } from "#style";
+
+export type VariableFocusState = {
+  activeVariable: string | null;
+  relatedVariables: ReadonlySet<string>;
+};
+
+export type RenderTermProducers = (term: string, graph: DatalogTerm | undefined) => ReactNode;
+
+export type RuleNarrativeSegmentsBaseProps = {
+  segments: readonly NarrativeSegment[];
+};
+
+export type RuleNarrativeSegmentsProps =
+  | (RuleNarrativeSegmentsBaseProps & {
+      variant: "narrative";
+      colorVariables?: boolean;
+      variableColors?: Readonly<Record<string, string>>;
+      variableFocus?: VariableFocusState;
+      onVariableFocus?: (variableName: string | null) => void;
+      renderTermProducers?: RenderTermProducers;
+    })
+  | (RuleNarrativeSegmentsBaseProps & {
+      variant: "edit-context";
+      activeEditId: string;
+    });
+
+export function RuleNarrativeSegments(props: RuleNarrativeSegmentsProps) {
+  const { segments } = props;
+  const narrativeProps = props.variant === "narrative" ? props : undefined;
+  const renderTermProducers = narrativeProps?.renderTermProducers;
+  const useVariableColors = narrativeProps?.colorVariables ?? false;
+  const activeVariable = narrativeProps?.variableFocus?.activeVariable ?? null;
+  const relatedVariables = narrativeProps?.variableFocus?.relatedVariables;
+  const onVariableFocus = narrativeProps?.onVariableFocus;
+
+  return (
+    <>
+      {segments.map((segment, index) =>
+        match(segment)
+          .with({ kind: "text" }, (text) => <span key={index}>{text.text}</span>)
+          .with({ kind: "entity" }, (entity) => {
+            const renderPrefix = entity.prefix === "has" ? predicatePrefix : undefined;
+            return entity.term ? (
+              <OntologyTermText
+                key={index}
+                term={entity.term}
+                fallbackLabel={entity.text}
+                title={entity.title}
+                className="typography-small-medium text-default-foreground"
+                resolveInstanceLabel={false}
+                tooltipExtra={renderTermProducers?.(entity.term, entity.graph)}
+                renderPrefix={renderPrefix}
+              />
+            ) : (
+              <Fragment key={index}>
+                {renderPrefix?.(entity.text)}
+                <span className="typography-small-medium text-default-foreground" title={entity.title}>
+                  {entity.text}
+                </span>
+              </Fragment>
+            );
+          })
+          .with({ kind: "variable" }, (variable) => {
+            const isActive = activeVariable === variable.name;
+            const isRelated = relatedVariables?.has(variable.name) ?? false;
+            const isRelatedOnly = isRelated && !isActive;
+            const isDimmed = activeVariable !== null && !isActive && !isRelated;
+            const variableColor = useVariableColors ? narrativeProps?.variableColors?.[variable.name] : undefined;
+            const onMouseEnter = onVariableFocus ? () => onVariableFocus(variable.name) : undefined;
+            const onMouseLeave = onVariableFocus ? () => onVariableFocus(null) : undefined;
+
+            return (
+              <span
+                key={index}
+                aria-label={`Variable ?${variable.name}`}
+                className={cn(
+                  "inline-block rounded bg-faint px-1 py-px align-baseline font-mono typography-caption outline-none transition-[background-color,color,box-shadow,opacity]",
+                  useVariableColors && variableColor ? variableColor : "text-muted-foreground",
+                  isRelatedOnly && [
+                    "bg-primary/5 ring-1 ring-primary/20",
+                    !useVariableColors && "text-default-foreground",
+                  ],
+                  isActive && [
+                    "bg-accent-foreground/10 ring-1 ring-active-border/30",
+                    !useVariableColors && "text-accent-foreground",
+                  ],
+                  isDimmed && "opacity-60",
+                )}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+              >
+                ?{variable.name}
+              </span>
+            );
+          })
+          .with({ kind: "value" }, (value) => {
+            const isEditContext = props.variant === "edit-context";
+            const isActiveEdit = isEditContext && value.edit?.id === props.activeEditId;
+
+            return (
+              <span
+                key={index}
+                className={cn(
+                  "align-baseline font-mono typography-caption-medium",
+                  !isEditContext && "rounded bg-primary/10 px-1.5 py-px text-primary",
+                  isEditContext && !isActiveEdit && "text-muted-foreground",
+                  isActiveEdit && "rounded bg-primary/10 px-1.5 py-px text-primary ring-2 ring-primary/30",
+                )}
+                title={value.title}
+              >
+                {value.text}
+              </span>
+            );
+          })
+          .with({ kind: "code" }, (code) => (
+            <span key={index} className="font-mono typography-caption text-muted-foreground">
+              {code.text}
+            </span>
+          ))
+          .exhaustive(),
+      )}
+    </>
+  );
+}

package/src/rules/datalog-ast/DatalogAtomComponent.tsx

@@ -0,0 +1,212 @@
+import type { DatalogAtom } from "@manta-eu/datalog-parser";
+import { compactUri } from "@manta-eu/rdf-lib/namespaces";
+import { match } from "ts-pattern";
+import { DatalogTermComponent } from "./DatalogTermComponent";
+import type { VariableColors, HoverState } from "./types";
+import { Badge } from "#components/badge/index";
+
+type DatalogAtomComponentProps = {
+  atom: DatalogAtom;
+  variableColors?: VariableColors;
+  hoverState?: HoverState;
+  onVariableHover?: (varName: string | null) => void;
+};
+
+export function DatalogAtomComponent(props: DatalogAtomComponentProps) {
+  const { atom, variableColors, hoverState, onVariableHover } = props;
+
+  return match(atom)
+    .with({ type: "triple" }, (triple) => {
+      const isTypeAssertion =
+        triple.predicate.type === "iri" &&
+        (triple.predicate.value === "a" ||
+          triple.predicate.value === "rdf:type" ||
+          triple.predicate.value === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type");
+
+      if (isTypeAssertion) {
+        if (triple.object.type === "iri") {
+          return (
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge variant="primary" className="typography-caption">
+                type
+              </Badge>
+              <span className="text-muted-foreground font-mono typography-body">{compactUri(triple.object.value)}</span>
+              <span className="text-muted-foreground">[</span>
+              <DatalogTermComponent
+                term={triple.subject}
+                variableColors={variableColors}
+                hoverState={hoverState}
+                onVariableHover={onVariableHover}
+              />
+              <span className="text-muted-foreground">]</span>
+              {triple.graph && (
+                <>
+                  <span className="text-muted-foreground">@</span>
+                  <DatalogTermComponent
+                    term={triple.graph}
+                    variableColors={variableColors}
+                    hoverState={hoverState}
+                    onVariableHover={onVariableHover}
+                  />
+                </>
+              )}
+            </div>
+          );
+        }
+
+        return (
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="primary" className="typography-caption">
+              type
+            </Badge>
+            <DatalogTermComponent
+              term={triple.subject}
+              variableColors={variableColors}
+              hoverState={hoverState}
+              onVariableHover={onVariableHover}
+            />
+            <span className="text-muted-foreground font-mono">a</span>
+            <DatalogTermComponent
+              term={triple.object}
+              variableColors={variableColors}
+              hoverState={hoverState}
+              onVariableHover={onVariableHover}
+            />
+            {triple.graph && (
+              <>
+                <span className="text-muted-foreground">[</span>
+                <DatalogTermComponent
+                  term={triple.graph}
+                  variableColors={variableColors}
+                  hoverState={hoverState}
+                  onVariableHover={onVariableHover}
+                />
+                <span className="text-muted-foreground">]</span>
+              </>
+            )}
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex items-center gap-2 flex-wrap">
+          <Badge variant="secondary" className="typography-caption">
+            triple
+          </Badge>
+          <DatalogTermComponent
+            term={triple.subject}
+            variableColors={variableColors}
+            hoverState={hoverState}
+            onVariableHover={onVariableHover}
+          />
+          <DatalogTermComponent
+            term={triple.predicate}
+            variableColors={variableColors}
+            hoverState={hoverState}
+            onVariableHover={onVariableHover}
+          />
+          <DatalogTermComponent
+            term={triple.object}
+            variableColors={variableColors}
+            hoverState={hoverState}
+            onVariableHover={onVariableHover}
+          />
+          {triple.graph && (
+            <>
+              <span className="text-muted-foreground">[</span>
+              <DatalogTermComponent
+                term={triple.graph}
+                variableColors={variableColors}
+                hoverState={hoverState}
+                onVariableHover={onVariableHover}
+              />
+              <span className="text-muted-foreground">]</span>
+            </>
+          )}
+        </div>
+      );
+    })
+    .with({ type: "property" }, (property) => (
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="secondary" className="typography-caption">
+          property
+        </Badge>
+        <span className="text-muted-foreground font-mono">{compactUri(property.predicate)}</span>
+        <span className="text-muted-foreground">[</span>
+        <DatalogTermComponent
+          term={property.subject}
+          variableColors={variableColors}
+          hoverState={hoverState}
+          onVariableHover={onVariableHover}
+        />
+        <span className="text-muted-foreground">,</span>
+        <DatalogTermComponent
+          term={property.object}
+          variableColors={variableColors}
+          hoverState={hoverState}
+          onVariableHover={onVariableHover}
+        />
+        <span className="text-muted-foreground">]</span>
+        {property.graph && (
+          <>
+            <span className="text-muted-foreground">@</span>
+            <DatalogTermComponent
+              term={property.graph}
+              variableColors={variableColors}
+              hoverState={hoverState}
+              onVariableHover={onVariableHover}
+            />
+          </>
+        )}
+      </div>
+    ))
+    .with({ type: "class" }, (classAtom) => (
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="primary" className="typography-caption">
+          class
+        </Badge>
+        <span className="text-muted-foreground font-mono typography-body">{compactUri(classAtom.className)}</span>
+        <span className="text-muted-foreground">[</span>
+        <DatalogTermComponent
+          term={classAtom.instance}
+          variableColors={variableColors}
+          hoverState={hoverState}
+          onVariableHover={onVariableHover}
+        />
+        <span className="text-muted-foreground">]</span>
+        {classAtom.graph && (
+          <>
+            <span className="text-muted-foreground">@</span>
+            <DatalogTermComponent
+              term={classAtom.graph}
+              variableColors={variableColors}
+              hoverState={hoverState}
+              onVariableHover={onVariableHover}
+            />
+          </>
+        )}
+      </div>
+    ))
+    .with({ type: "general" }, (general) => (
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="secondary" className="typography-caption">
+          general
+        </Badge>
+        <span className="text-muted-foreground font-mono">{general.tableName}</span>
+        <span className="text-muted-foreground">[</span>
+        {general.terms.map((term, i) => (
+          <span key={i} className="inline-flex items-center gap-1">
+            {i > 0 && <span className="text-muted-foreground">,</span>}
+            <DatalogTermComponent
+              term={term}
+              variableColors={variableColors}
+              hoverState={hoverState}
+              onVariableHover={onVariableHover}
+            />
+          </span>
+        ))}
+        <span className="text-muted-foreground">]</span>
+      </div>
+    ))
+    .exhaustive();
+}

package/src/rules/datalog-ast/DatalogBodyFormulaComponent.tsx

@@ -0,0 +1,184 @@
+/* eslint-disable @manta-eu/no-theme-primitive-colors */
+
+import type {
+  AggregateBinding,
+  DatalogAggregate,
+  DatalogBind,
+  DatalogBodyFormula,
+  DatalogFilter,
+  DatalogNegation,
+  DatalogSkolem,
+} from "@manta-eu/datalog-parser";
+import { isPresent } from "@manta-eu/lib/present";
+import { Minus } from "lucide-react";
+import { match, P } from "ts-pattern";
+import { DatalogAtomComponent } from "./DatalogAtomComponent";
+import { renderExpressionWithVariables } from "./DatalogExpressionRenderer";
+import { DatalogTermComponent } from "./DatalogTermComponent";
+import type { HoverState, VariableColors } from "./types";
+import { Badge } from "#components/badge/index";
+
+type DatalogBodyFormulaComponentProps = {
+  formula: DatalogBodyFormula;
+  variableColors?: VariableColors;
+  hoverState?: HoverState;
+  onVariableHover?: (varName: string | null) => void;
+};
+
+function renderAggregateExpression(
+  binding: AggregateBinding,
+  variableColors?: VariableColors,
+  hoverState?: HoverState,
+  onVariableHover?: (varName: string | null) => void,
+): React.ReactNode {
+  if (binding.expression === "*") {
+    return "*";
+  }
+  const first = renderExpressionWithVariables(binding.expression, variableColors, hoverState, onVariableHover);
+  if (binding.percentile !== undefined) {
+    return (
+      <>
+        {first}
+        <span className="text-orange-100 font-mono">; PERCENTILE="{binding.percentile}"</span>
+      </>
+    );
+  }
+  if (!binding.secondExpression) return first;
+  return (
+    <>
+      {first}
+      <span className="text-orange-100 font-mono">, </span>
+      {renderExpressionWithVariables(binding.secondExpression, variableColors, hoverState, onVariableHover)}
+    </>
+  );
+}
+
+export function DatalogBodyFormulaComponent(props: DatalogBodyFormulaComponentProps) {
+  const { formula, variableColors, hoverState, onVariableHover } = props;
+
+  return match(formula)
+    .with({ type: P.union("triple", "property", "class", "general") }, (atom) => (
+      <DatalogAtomComponent
+        atom={atom}
+        variableColors={variableColors}
+        hoverState={hoverState}
+        onVariableHover={onVariableHover}
+      />
+    ))
+    .with({ type: "negation" }, (negation: DatalogNegation) => (
+      <div className="rounded border border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
+        <div className="px-3 py-2 border-b border-red-200 dark:border-red-800 bg-red-100 dark:bg-red-900/30">
+          <div className="flex items-center gap-2">
+            <Minus className="size-4 text-red-600" />
+            <Badge variant="secondary" className="typography-tiny bg-red-500 text-white">
+              NOT EXISTS
+            </Badge>
+            {isPresent(negation.existentialVars) && (
+              <span className="typography-tiny text-red-600">
+                (∃ {negation.existentialVars.map((v) => `?${v}`).join(", ")})
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="p-3 space-y-3">
+          {negation.formulas.map((f, i) => (
+            <div key={i} className="pl-4 border-l-2 border-red-300 dark:border-red-700">
+              <DatalogBodyFormulaComponent
+                formula={f}
+                variableColors={variableColors}
+                hoverState={hoverState}
+                onVariableHover={onVariableHover}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    ))
+    .with({ type: "filter" }, (filter: DatalogFilter) => (
+      <div className="flex items-center gap-2 p-2 rounded bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
+        <Badge variant="secondary" className="typography-tiny bg-yellow-600 text-white">
+          filter
+        </Badge>
+        <div className="flex items-center gap-1">
+          {renderExpressionWithVariables(filter.expression, variableColors, hoverState, onVariableHover)}
+        </div>
+      </div>
+    ))
+    .with({ type: "bind" }, (bind: DatalogBind) => (
+      <div className="flex items-center gap-2 p-2 rounded bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800">
+        <Badge variant="secondary" className="typography-tiny bg-indigo-600 text-white">
+          bind
+        </Badge>
+        {renderExpressionWithVariables(bind.expression, variableColors, hoverState, onVariableHover)}
+        <span className="text-indigo-600">→</span>
+        <DatalogTermComponent
+          term={{ type: "variable", name: bind.variable }}
+          variableColors={variableColors}
+          hoverState={hoverState}
+          onVariableHover={onVariableHover}
+        />
+      </div>
+    ))
+    .with({ type: "aggregate" }, (aggregate: DatalogAggregate) => (
+      <div className="rounded border border-muted-border bg-gradient-to-r from-orange-500/10 to-amber-500/10">
+        <div className="px-3 py-2 border-b border-muted-border bg-orange-500/20">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="secondary" className="typography-tiny bg-orange-600 text-white">
+              aggregate
+            </Badge>
+            {isPresent(aggregate.bindings) && (
+              <div className="flex flex-wrap items-center gap-2 typography-small">
+                <span className="text-orange-200">→</span>
+                {aggregate.bindings.map((b, i) => (
+                  <div key={i} className="flex shrink-0 items-center gap-1">
+                    {i > 0 && <span className="text-orange-300">,</span>}
+                    <span className="text-orange-100 font-mono">
+                      {b.distinct && "DISTINCT "}
+                      {b.function}(
+                    </span>
+                    {renderAggregateExpression(b, variableColors, hoverState, onVariableHover)}
+                    <span className="text-orange-100 font-mono">)</span>
+                    <span className="text-orange-300">→</span>
+                    <DatalogTermComponent
+                      term={{ type: "variable", name: b.variable }}
+                      variableColors={variableColors}
+                      hoverState={hoverState}
+                      onVariableHover={onVariableHover}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="p-3 space-y-3">
+          {aggregate.atoms.map((formula, index) => (
+            <div key={index} className="pl-4 border-l-2 border-orange-400/30">
+              <DatalogBodyFormulaComponent
+                formula={formula}
+                variableColors={variableColors}
+                hoverState={hoverState}
+                onVariableHover={onVariableHover}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    ))
+    .with({ type: "skolem" }, (skolem: DatalogSkolem) => (
+      <div className="flex items-center gap-2 p-2 rounded bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+        <Badge variant="secondary" className="typography-tiny bg-purple-600 text-white">
+          skolem
+        </Badge>
+        <span className="font-mono">SKOLEM(</span>
+        {skolem.args.map((arg, i) => (
+          <span key={i}>
+            {i > 0 && ", "}
+            {renderExpressionWithVariables(arg, variableColors, hoverState, onVariableHover)}
+          </span>
+        ))}
+        <span className="font-mono">)</span>
+      </div>
+    ))
+    .exhaustive();
+}

package/src/rules/datalog-ast/DatalogExpressionRenderer.tsx

@@ -0,0 +1,86 @@
+import type { DatalogExpression } from "@manta-eu/datalog-parser";
+import { match } from "ts-pattern";
+import { DatalogTermComponent } from "./DatalogTermComponent";
+import type { HoverState, VariableColors } from "./types";
+
+export function renderExpressionWithVariables(
+  expression: DatalogExpression,
+  variableColors?: VariableColors,
+  hoverState?: HoverState,
+  onVariableHover?: (varName: string | null) => void,
+): React.ReactNode {
+  return match(expression)
+    .with({ type: "binary" }, (bin) => (
+      <span>
+        {renderExpressionWithVariables(bin.left, variableColors, hoverState, onVariableHover)} {bin.operator}{" "}
+        {renderExpressionWithVariables(bin.right, variableColors, hoverState, onVariableHover)}
+      </span>
+    ))
+    .with({ type: "unary" }, (un) => (
+      <span>
+        {un.operator}
+        {renderExpressionWithVariables(un.operand, variableColors, hoverState, onVariableHover)}
+      </span>
+    ))
+    .with({ type: "term" }, (term) => (
+      <DatalogTermComponent
+        term={term.term}
+        variableColors={variableColors}
+        hoverState={hoverState}
+        onVariableHover={onVariableHover}
+      />
+    ))
+    .with({ type: "function" }, (fn) => {
+      // Handle IF function specially with multiline formatting
+      if (fn.name.toUpperCase() === "IF" && fn.args.length === 3) {
+        return (
+          <div className="inline-block">
+            <div className="font-mono">IF(</div>
+            <div className="ml-4">
+              <div className="py-1">
+                <span className="text-[#808a84] typography-tiny mr-2">condition:</span>
+                {fn.args[0] && renderExpressionWithVariables(fn.args[0], variableColors, hoverState, onVariableHover)}
+              </div>
+              <div className="py-1">
+                <span className="text-[#808a84] typography-tiny mr-2">then:</span>
+                {fn.args[1] && renderExpressionWithVariables(fn.args[1], variableColors, hoverState, onVariableHover)}
+              </div>
+              <div className="py-1">
+                <span className="text-[#808a84] typography-tiny mr-2">else:</span>
+                {fn.args[2] && renderExpressionWithVariables(fn.args[2], variableColors, hoverState, onVariableHover)}
+              </div>
+            </div>
+            <div className="font-mono">)</div>
+          </div>
+        );
+      }
+
+      // Handle other functions normally
+      return (
+        <span>
+          {fn.name}(
+          {fn.args.map((arg, i) => (
+            <span key={i}>
+              {i > 0 && ", "}
+              {renderExpressionWithVariables(arg, variableColors, hoverState, onVariableHover)}
+            </span>
+          ))}
+          )
+        </span>
+      );
+    })
+    .with({ type: "in" }, (inExpr) => (
+      <span>
+        {inExpr.negated && "NOT "}
+        {renderExpressionWithVariables(inExpr.expression, variableColors, hoverState, onVariableHover)} IN (
+        {inExpr.list.map((item, i) => (
+          <span key={i}>
+            {i > 0 && ", "}
+            {renderExpressionWithVariables(item, variableColors, hoverState, onVariableHover)}
+          </span>
+        ))}
+        )
+      </span>
+    ))
+    .exhaustive();
+}