WIP: Dedupe crawl settings

frontend/src/components/ui/badge.ts

@@ -11,6 +11,7 @@ export type BadgeVariant =
   | "danger"
   | "neutral"
   | "primary"
+  | "lime"
   | "cyan"
   | "blue"
   | "violet"
@@ -73,6 +74,7 @@ export class Badge extends TailwindElement {
                   neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-300`,
                   "high-contrast": tw`bg-neutral-0 text-neutral-700 ring-neutral-600`,
                   primary: tw`bg-white text-primary ring-primary`,
+                  lime: tw`bg-lime-50 text-lime-600 ring-lime-600`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
                   text: tw`text-blue-500 ring-blue-600`,
@@ -88,6 +90,7 @@ export class Badge extends TailwindElement {
                 neutral: tw`bg-neutral-100 text-neutral-600`,
                 "high-contrast": tw`bg-neutral-600 text-neutral-0`,
                 primary: tw`bg-primary text-neutral-0`,
+                lime: tw`bg-lime-50 text-lime-600`,
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
                 violet: tw`bg-violet-50 text-violet-600`,

frontend/src/features/archived-items/archived-item-list/archived-item-list-item.ts

@@ -1,5 +1,6 @@
 import { localized, msg, str } from "@lit/localize";
 import type { SlCheckbox, SlHideEvent } from "@shoelace-style/shoelace";
+import clsx from "clsx";
 import { css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -9,8 +10,9 @@ import type { ArchivedItemCheckedEvent } from "./types";
 import { BtrixElement } from "@/classes/BtrixElement";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import { ReviewStatus, type ArchivedItem, type Crawl } from "@/types/crawler";
-import { renderName } from "@/utils/crawler";
+import { isCrawl, renderName } from "@/utils/crawler";
 import localize from "@/utils/localize";
+import { tw } from "@/utils/tailwind";
 
 /**
  * @slot actionCell - Action cell
@@ -82,14 +84,14 @@ export class ArchivedItemListItem extends BtrixElement {
       content=${msg("Not applicable")}
     >
       <sl-icon
-        name="slash"
+        name="slash-lg"
         class="text-base text-neutral-400"
         label=${msg("Not applicable")}
       ></sl-icon>
     </sl-tooltip>`;
     const none = html`<sl-tooltip hoist content=${msg("None")}>
       <sl-icon
-        name="slash"
+        name="dash-lg"
         class="text-base text-neutral-400"
         label=${msg("None")}
       ></sl-icon>
@@ -103,6 +105,9 @@ export class ArchivedItemListItem extends BtrixElement {
     const qaStatus = CrawlStatus.getContent({
       state: lastQAState || undefined,
     });
+    const dedupeDependent =
+      isCrawl(this.item) &&
+      (this.item.requiredByCrawls.length || this.item.requiresCrawls.length);
 
     return html`
       <btrix-table-row
@@ -149,38 +154,27 @@ export class ArchivedItemListItem extends BtrixElement {
                   hoist
                 >
                   <sl-icon
-                    class="text-inherit"
+                    class="size-4 text-base"
                     style="color: ${crawlStatus.cssColor}"
                     name=${typeIcon}
                     label=${typeLabel}
                   ></sl-icon>
                 </sl-tooltip>
               `}
           <sl-tooltip
+            content=${dedupeDependent
+              ? msg("Deduplication Dependent")
+              : msg("No Dependencies")}
             hoist
-            content=${activeQAStats
-              ? msg(
-                  str`QA Analysis: ${qaStatus.label} (${activeProgress}% finished)`,
-                )
-              : msg(
-                  str`QA Analysis: ${isUpload ? "Not Applicable" : qaStatus.label || msg("None")}`,
-                )}
           >
-            ${activeQAStats
-              ? html`
-                  <sl-progress-ring
-                    value="${activeProgress}"
-                    style="color: ${qaStatus.cssColor};"
-                  ></sl-progress-ring>
-                `
-              : html`
-                  <sl-icon
-                    class="text-base"
-                    style="color: ${qaStatus.cssColor}"
-                    name=${isUpload ? "slash" : "microscope"}
-                    library=${isUpload ? "default" : "app"}
-                  ></sl-icon>
-                `}
+            <sl-icon
+              class=${clsx(
+                tw`size-4 text-base`,
+                dedupeDependent ? tw`text-orange-600` : tw`text-neutral-400`,
+              )}
+              name=${dedupeDependent ? "file-earmark-scan3" : "file-earmark"}
+              library=${dedupeDependent ? "app" : "default"}
+            ></sl-icon>
           </sl-tooltip>
         </btrix-table-cell>
         <btrix-table-cell
@@ -281,22 +275,34 @@ export class ArchivedItemListItem extends BtrixElement {
         <btrix-table-cell class="tabular-nums">
           ${isUpload
             ? notApplicable
-            : lastQAStarted && qaRunCount
-              ? html`
-                  <sl-tooltip
-                    hoist
-                    content=${msg(
-                      str`Last run started on ${localize.date(lastQAStarted)}`,
-                    )}
-                  >
-                    <div class="min-w-4">
-                      ${this.localize.number(qaRunCount, {
-                        notation: "compact",
-                      })}
-                    </div>
-                  </sl-tooltip>
-                `
-              : none}
+            : activeQAStats
+              ? html`<sl-tooltip
+                  content="${msg(
+                    "QA Analysis in Progress",
+                  )}: ${qaStatus.label} (${activeProgress}% ${msg("finished")})"
+                  hoist
+                >
+                  <sl-progress-ring
+                    value="${activeProgress}"
+                    style="color: ${qaStatus.cssColor};"
+                  ></sl-progress-ring>
+                </sl-tooltip>`
+              : lastQAStarted && qaRunCount
+                ? html`
+                    <sl-tooltip
+                      hoist
+                      content=${msg(
+                        str`Last run started on ${localize.date(lastQAStarted)}`,
+                      )}
+                    >
+                      <div class="min-w-4">
+                        ${this.localize.number(qaRunCount, {
+                          notation: "compact",
+                        })}
+                      </div>
+                    </sl-tooltip>
+                  `
+                : none}
         </btrix-table-cell>
         <btrix-table-cell>
           ${isUpload

frontend/src/features/browser-profiles/templates/badges.ts

@@ -10,7 +10,7 @@ export const usageBadge = (inUse: boolean) =>
       ? msg("In Use by Crawl Workflow")
       : msg("Not In Use by Crawl Workflow")}
   >
-    <btrix-badge variant=${inUse ? "cyan" : "neutral"} class="font-monostyle">
+    <btrix-badge variant=${inUse ? "cyan" : "neutral"}>
       <sl-icon
         name=${inUse ? "check-circle" : "dash-circle"}
         class="mr-1.5"

frontend/src/features/collections/dedupe-badge.ts

@@ -0,0 +1,72 @@
+import { localized, msg, str } from "@lit/localize";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import localize from "@/utils/localize";
+import { pluralOf } from "@/utils/pluralize";
+
+export const dedupeIconFor = {
+  dependent: "file-earmark-scan3",
+  dependency: "file-earmark-scan2",
+  both: "file-earmark-scan3",
+} as const;
+
+export const dedupeLabelFor = {
+  dependent: msg("Dependent"),
+  dependency: msg("Dependency"),
+  both: msg("Dependent"),
+} as const;
+
+@customElement("btrix-dedupe-badge")
+@localized()
+export class DedupeBadge extends TailwindElement {
+  @property({ type: Array })
+  dependents?: string[] = [];
+
+  @property({ type: Array })
+  dependencies?: string[] = [];
+
+  render() {
+    const dependentsCount = this.dependents?.length;
+    const dependenciesCount = this.dependencies?.length;
+
+    if (!dependentsCount && !dependenciesCount) return;
+
+    let tooltip = "";
+    let icon: string = dedupeIconFor.both;
+    let text: string = dedupeLabelFor.both;
+
+    if (dependentsCount && dependenciesCount) {
+      const number_of_dependent_crawls = `${localize.number(dependentsCount)} ${pluralOf("crawls", dependentsCount)}`;
+      const number_of_dependency_crawls = `${localize.number(dependenciesCount)} ${pluralOf("crawls", dependenciesCount)}`;
+
+      tooltip = msg(
+        str`This crawl is a dependency of ${number_of_dependent_crawls} and is dependent on ${number_of_dependency_crawls} in the deduplication source.`,
+      );
+    } else if (dependenciesCount) {
+      const number_of_dependency_crawls = `${localize.number(dependenciesCount)} ${pluralOf("crawls", dependenciesCount)}`;
+
+      tooltip = msg(
+        str`This crawl is dependent on ${number_of_dependency_crawls}.`,
+      );
+      icon = dedupeIconFor.dependent;
+      text = dedupeLabelFor.dependent;
+    } else if (dependentsCount) {
+      const number_of_dependent_crawls = `${localize.number(dependentsCount)} ${pluralOf("crawls", dependentsCount)}`;
+
+      tooltip = msg(
+        str`This crawl is a dependency of ${number_of_dependent_crawls}.`,
+      );
+      icon = dedupeIconFor.dependency;
+      text = dedupeLabelFor.dependency;
+    }
+
+    return html`<btrix-popover content=${tooltip} hoist>
+      <btrix-badge variant="orange" outline>
+        <sl-icon class="mr-1.5" name=${icon} library="app"></sl-icon>
+        ${text}
+      </btrix-badge>
+    </btrix-popover>`;
+  }
+}

frontend/src/features/collections/dedupe-source-badge.ts

@@ -0,0 +1,25 @@
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+
+@customElement("btrix-dedupe-source-badge")
+@localized()
+export class DedupeSourceBadge extends TailwindElement {
+  render() {
+    return html`<btrix-popover
+      content=${msg("This collection is used as a deduplication source.")}
+      hoist
+    >
+      <btrix-badge variant="orange" outline>
+        <sl-icon
+          class="mr-1.5"
+          name="file-earmark-scan"
+          library="app"
+        ></sl-icon>
+        ${msg("Dedupe")}
+      </btrix-badge>
+    </btrix-popover>`;
+  }
+}

frontend/src/features/collections/index.ts

@@ -7,6 +7,8 @@ import("./collection-edit-dialog");
 import("./collection-create-dialog");
 import("./collection-initial-view-dialog");
 import("./collection-workflow-list");
+import("./dedupe-badge");
+import("./dedupe-source-badge");
 import("./linked-collections");
 import("./select-collection-access");
 import("./select-collection-page");

frontend/src/features/collections/linked-collections/linked-collections-list-item.ts

@@ -39,15 +39,15 @@ export class LinkedCollectionsListItem extends TailwindElement {
     const actual = isActualCollection(item);
     const dedupeEnabled = this.dedupeSource;
 
+    console.log(dedupeEnabled);
+
     const content = [
       html`<div
         class="inline-flex flex-1 items-center gap-2 p-1.5 leading-none"
       >
         <div class="w-0 flex-1 truncate">${item.name}</div>
         ${dedupeEnabled
-          ? html`<btrix-badge variant="primary">
-              ${msg("Dedupe Source")}
-            </btrix-badge>`
+          ? html`<btrix-dedupe-source-badge></btrix-dedupe-source-badge>`
           : nothing}
       </div>`,
     ];