WhatsApp/Signal/Formstack/admin updates

packages/bridge-common/index.ts

@@ -9,3 +9,12 @@ export type {
   User,
 } from "./lib/database.js";
 export { getWorkerUtils } from "./lib/utils.js";
+export {
+  getMaxAttachmentSize,
+  getMaxTotalAttachmentSize,
+  MAX_ATTACHMENTS,
+} from "./lib/config/attachments.js";
+export {
+  getSignalAutoGroupNameTemplate,
+  buildSignalGroupName,
+} from "./lib/config/signal.js";

packages/bridge-common/lib/config/attachments.ts

@@ -0,0 +1,36 @@
+/**
+ * Attachment size configuration for messaging channels
+ *
+ * Environment variables:
+ * - BRIDGE_MAX_ATTACHMENT_SIZE_MB: Maximum size for a single attachment in MB (default: 50)
+ */
+
+/**
+ * Get the maximum attachment size in bytes from environment variable
+ * Defaults to 50MB if not set
+ */
+export function getMaxAttachmentSize(): number {
+  const envValue = process.env.BRIDGE_MAX_ATTACHMENT_SIZE_MB;
+  const sizeInMB = envValue ? parseInt(envValue, 10) : 50;
+
+  // Validate the value
+  if (isNaN(sizeInMB) || sizeInMB <= 0) {
+    console.warn(`Invalid BRIDGE_MAX_ATTACHMENT_SIZE_MB value: ${envValue}, using default 50MB`);
+    return 50 * 1024 * 1024;
+  }
+
+  return sizeInMB * 1024 * 1024;
+}
+
+/**
+ * Get the maximum total size for all attachments in a message
+ * This is 4x the single attachment size
+ */
+export function getMaxTotalAttachmentSize(): number {
+  return getMaxAttachmentSize() * 4;
+}
+
+/**
+ * Maximum number of attachments per message
+ */
+export const MAX_ATTACHMENTS = 10;

packages/bridge-common/lib/config/signal.ts

@@ -0,0 +1,29 @@
+/**
+ * Signal configuration
+ *
+ * Environment variables:
+ * - SIGNAL_AUTO_GROUP_NAME_TEMPLATE: Template for auto-created group names (default: "Support Request: {conversationId}")
+ *   Available placeholders: {conversationId}
+ */
+
+/**
+ * Get the Signal auto-group name template from environment variable
+ * Defaults to "Support Request: {conversationId}" if not set
+ */
+export function getSignalAutoGroupNameTemplate(): string {
+  const template = process.env.SIGNAL_AUTO_GROUP_NAME_TEMPLATE;
+
+  if (!template) {
+    return "Support Request: {conversationId}";
+  }
+
+  return template;
+}
+
+/**
+ * Build a Signal group name from the template and conversation ID
+ */
+export function buildSignalGroupName(conversationId: string): string {
+  const template = getSignalAutoGroupNameTemplate();
+  return template.replace('{conversationId}', conversationId);
+}

packages/bridge-common/lib/database.ts

@@ -1,19 +1,12 @@
 import { PostgresDialect, CamelCasePlugin } from "kysely";
-import type {
-  GeneratedAlways,
-  Generated,
-  ColumnType,
-  Selectable,
-} from "kysely";
+import type { GeneratedAlways, Generated, ColumnType, Selectable } from "kysely";
 import pg from "pg";
 import { KyselyAuth } from "@auth/kysely-adapter";
 const { Pool, types } = pg;
 
 type Timestamp = ColumnType<Date, Date | string>;
 
-types.setTypeParser(types.builtins.TIMESTAMPTZ, (val) =>
-  new Date(val).toISOString(),
-);
+types.setTypeParser(types.builtins.TIMESTAMPTZ, (val) => new Date(val).toISOString());
 
 type GraphileJob = {
   taskIdentifier: string;
@@ -138,15 +131,67 @@ export type VoiceLine = Selectable<Database["VoiceLine"]>;
 export type Webhook = Selectable<Database["Webhook"]>;
 export type User = Selectable<Database["User"]>;
 
-export const db = new KyselyAuth<Database>({
-  dialect: new PostgresDialect({
-    pool: new Pool({
-      host: process.env.DATABASE_HOST,
-      database: process.env.DATABASE_NAME,
-      port: parseInt(process.env.DATABASE_PORT!),
-      user: process.env.DATABASE_USER,
-      password: process.env.DATABASE_PASSWORD,
-    }),
-  }) as any,
-  plugins: [new CamelCasePlugin()],
+// Lazy database initialization to avoid errors during build time
+let _db: KyselyAuth<Database> | undefined;
+
+function getDb(): KyselyAuth<Database> {
+  if (_db) {
+    return _db;
+  }
+
+  // Validate environment variables
+  const DATABASE_HOST = process.env.DATABASE_HOST;
+  const DATABASE_NAME = process.env.DATABASE_NAME;
+  const DATABASE_PORT = process.env.DATABASE_PORT;
+  const DATABASE_USER = process.env.DATABASE_USER;
+  const DATABASE_PASSWORD = process.env.DATABASE_PASSWORD;
+
+  if (
+    !DATABASE_HOST ||
+    !DATABASE_NAME ||
+    !DATABASE_PORT ||
+    !DATABASE_USER ||
+    !DATABASE_PASSWORD
+  ) {
+    throw new Error(
+      "Missing required database environment variables: DATABASE_HOST, DATABASE_NAME, DATABASE_PORT, DATABASE_USER, DATABASE_PASSWORD",
+    );
+  }
+
+  const port = parseInt(DATABASE_PORT, 10);
+  if (isNaN(port) || port < 1 || port > 65535) {
+    throw new Error(
+      `Invalid DATABASE_PORT: ${DATABASE_PORT}. Must be a number between 1 and 65535.`,
+    );
+  }
+
+  _db = new KyselyAuth<Database>({
+    dialect: new PostgresDialect({
+      pool: new Pool({
+        host: DATABASE_HOST,
+        database: DATABASE_NAME,
+        port,
+        user: DATABASE_USER,
+        password: DATABASE_PASSWORD,
+      }),
+    }) as any,
+    plugins: [new CamelCasePlugin() as any],
+  });
+
+  return _db;
+}
+
+// Export db as a getter that lazily initializes the database
+export const db = new Proxy({} as KyselyAuth<Database>, {
+  get(_target, prop) {
+    const instance = getDb();
+    const value = (instance as any)[prop];
+
+    // If it's a function, bind it to the actual instance to preserve 'this' context
+    if (typeof value === "function") {
+      return value.bind(instance);
+    }
+
+    return value;
+  },
 });

packages/bridge-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@link-stack/bridge-common",
-  "version": "2.2.0",
+  "version": "3.3.0",
   "main": "build/main/index.js",
   "type": "module",
   "author": "Darren Clarke <darren@redaranj.com>",
@@ -9,14 +9,15 @@
     "build": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@auth/kysely-adapter": "^1.5.2",
+    "@auth/kysely-adapter": "^1.10.0",
     "graphile-worker": "^0.16.6",
-    "kysely": "0.26.1",
-    "pg": "^8.13.0"
+    "kysely": "0.27.5",
+    "pg": "^8.16.3"
   },
   "devDependencies": {
-    "@link-stack/eslint-config": "*",
-    "@link-stack/typescript-config": "*",
-    "typescript": "^5.6.2"
+    "@link-stack/eslint-config": "workspace:*",
+    "@link-stack/typescript-config": "workspace:*",
+    "@types/pg": "^8.15.5",
+    "typescript": "^5.9.3"
   }
 }

packages/bridge-ui/components/Detail.tsx

@@ -34,6 +34,8 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
   const { almostBlack } = colors;
   const { bodyLarge } = typography;
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+  const [showRelinkConfirmation, setShowRelinkConfirmation] = useState(false);
+  const [isRelinking, setIsRelinking] = useState(false);
 
   const continueDeleteAction = async () => {
     await deleteAction?.(id);
@@ -41,6 +43,23 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
     router.push(`${getBasePath()}${entity}`);
   };
 
+  const continueRelinkAction = async () => {
+    setIsRelinking(true);
+    try {
+      const response = await fetch(`/link/api/${entity}/bots/${token}/relink`, {
+        method: "POST",
+      });
+      if (response.ok) {
+        setShowRelinkConfirmation(false);
+        router.refresh();
+      }
+    } catch (error) {
+      console.error("Relink failed:", error);
+    } finally {
+      setIsRelinking(false);
+    }
+  };
+
   return (
     <>
       <Dialog
@@ -57,6 +76,15 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
                   onClick={() => setShowDeleteConfirmation(true)}
                 />
               </Grid>
+              {service === "whatsapp" && (
+                <Grid item>
+                  <Button
+                    text="Relink"
+                    kind="secondary"
+                    onClick={() => setShowRelinkConfirmation(true)}
+                  />
+                </Grid>
+              )}
               <Grid item>
                 <Button
                   text="Edit"
@@ -129,6 +157,35 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
           Are you sure you want to delete this record?
         </Box>
       </Dialog>
+      <Dialog
+        open={showRelinkConfirmation}
+        size="xs"
+        title="Relink WhatsApp Connection?"
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item>
+              <Button
+                text="Cancel"
+                kind="secondary"
+                onClick={() => setShowRelinkConfirmation(false)}
+                disabled={isRelinking}
+              />
+            </Grid>
+            <Grid item>
+              <Button
+                text={isRelinking ? "Relinking..." : "Relink"}
+                kind="primary"
+                onClick={continueRelinkAction}
+                disabled={isRelinking}
+              />
+            </Grid>
+          </Grid>
+        }
+      >
+        <Box sx={{ ...bodyLarge, color: almostBlack }}>
+          This will disconnect the current WhatsApp link and generate a new QR code. You will need to scan the new QR code to reconnect. Continue?
+        </Box>
+      </Dialog>
     </>
   );
 };

packages/bridge-ui/components/QRCode.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from "react";
+// @ts-ignore - react-qr-code doesn't have React 19 compatible types yet
 import QRCodeInternal from "react-qr-code";
 import { Box } from "@mui/material";
 import { colors } from "../styles/theme";
@@ -28,22 +29,30 @@ export const QRCode: FC<QRCodeProps> = ({
 
   useEffect(() => {
     if (!verified && getValue && refreshInterval) {
-      const interval = setInterval(async () => {
+      // Fetch immediately on mount
+      const fetchQR = async () => {
         const { qr, kind } = await getValue(token);
-        console.log({ kind });
         setValue(qr);
         setKind(kind);
-      }, refreshInterval * 1000);
+      };
+      fetchQR();
+
+      // Then set up interval for refreshes
+      const interval = setInterval(fetchQR, refreshInterval * 1000);
       return () => clearInterval(interval);
     }
-  }, [getValue, refreshInterval]);
+  }, [getValue, refreshInterval, token, verified]);
 
   return !verified ? (
     <Box sx={{ backgroundColor: white, m: 2 }}>
-      {kind === "data" ? (
-        <QRCodeInternal value={value} />
+      {value ? (
+        kind === "data" ? (
+          <QRCodeInternal value={value} />
+        ) : (
+          <img src={value} alt={name} />
+        )
       ) : (
-        <img src={value} alt={name} />
+        <Box>Loading QR code...</Box>
       )}
       <Box>{helperText}</Box>
     </Box>

packages/bridge-ui/components/ServiceLayout.tsx

@@ -3,18 +3,19 @@ type ServiceLayoutProps = {
   detail: any;
   edit: any;
   create: any;
-  params: {
+  params: Promise<{
     segment: string[];
-  };
+  }>;
 };
 
-export const ServiceLayout = ({
+export const ServiceLayout = async ({
   children,
   detail,
   edit,
   create,
-  params: { segment },
+  params,
 }: ServiceLayoutProps) => {
+  const { segment } = await params;
   const length = segment?.length ?? 0;
   const isCreate = length === 2 && segment[1] === "create";
   const isEdit = length === 3 && segment[2] === "edit";

packages/bridge-ui/config/signal.ts

@@ -1,7 +1,10 @@
 import { ServiceConfig } from "../lib/service";
 
 const getQRCode = async (token: string): Promise<Record<string, string>> => {
-  const url = `/link/api/signal/bots/${token}`;
+  const basePath = window?.location?.pathname?.startsWith("/link")
+    ? "/link"
+    : "";
+  const url = `${basePath}/api/signal/bots/${token}`;
   const result = await fetch(url, { cache: "no-store" });
   const { qr } = await result.json();
 

packages/bridge-ui/config/whatsapp.ts

@@ -2,11 +2,28 @@ import { ServiceConfig } from "../lib/service";
 // import { generateSelectOneAction } from "../lib/actions";
 
 const getQRCode = async (token: string) => {
-  const url = `/link/api/whatsapp/bots/${token}`;
-  const result = await fetch(url, { cache: "no-store" });
-  const { qr } = await result.json();
+  try {
+    const url = `/link/api/whatsapp/bots/${token}`;
+    const result = await fetch(url, { cache: "no-store" });
 
-  return { qr, kind: "data" };
+    if (!result.ok) {
+      console.error(`Failed to fetch QR code: ${result.status} ${result.statusText}`);
+      return { qr: "", kind: "data" };
+    }
+
+    const data = await result.json();
+    const { qr } = data;
+
+    if (!qr) {
+      console.error("No QR code in response");
+      return { qr: "", kind: "data" };
+    }
+
+    return { qr, kind: "data" };
+  } catch (error) {
+    console.error("Error fetching QR code:", error);
+    return { qr: "", kind: "data" };
+  }
 };
 
 export const whatsappConfig: ServiceConfig = {

packages/bridge-ui/index.ts

@@ -10,4 +10,5 @@ export {
   sendMessage,
   receiveMessage,
   handleWebhook,
+  relinkBot,
 } from "./lib/routing";

packages/bridge-ui/lib/routing.ts

@@ -5,19 +5,26 @@ import { getService } from "./utils";
 export const getBot = async (
   _req: NextRequest,
   params: ServiceParams,
-): Promise<NextResponse> => getService(params)?.getBot(params);
+): Promise<NextResponse> => (await getService(params))?.getBot(params);
 
 export const sendMessage = async (
   req: NextRequest,
   params: ServiceParams,
-): Promise<NextResponse> => getService(params)?.sendMessage(req, params);
+): Promise<NextResponse> =>
+  (await getService(params))?.sendMessage(req, params);
 
 export const receiveMessage = async (
   req: NextRequest,
   params: ServiceParams,
-): Promise<NextResponse> => getService(params)?.receiveMessage(req, params);
+): Promise<NextResponse> =>
+  (await getService(params))?.receiveMessage(req, params);
 
 export const handleWebhook = async (
   req: NextRequest,
   params: ServiceParams,
-): Promise<NextResponse> => getService(params)?.handleWebhook(req);
+): Promise<NextResponse> => (await getService(params))?.handleWebhook(req);
+
+export const relinkBot = async (
+  _req: NextRequest,
+  params: ServiceParams,
+): Promise<NextResponse> => (await getService(params))?.relink(params);

packages/bridge-ui/lib/service.ts

@@ -51,16 +51,15 @@ export type ServiceConfig = {
 };
 
 export type ServiceParams = {
-  params: {
+  params: Promise<{
     service: string;
     token?: string;
-  };
+  }>;
 };
 
 export class Service {
-  async getBot({
-    params: { service, token },
-  }: ServiceParams): Promise<NextResponse> {
+  async getBot({ params }: ServiceParams): Promise<NextResponse> {
+    const { service, token } = await params;
     const table = getServiceTable(service);
     const row = await db
       .selectFrom(table)
@@ -71,16 +70,15 @@ export class Service {
     return NextResponse.json(row);
   }
 
-  async registerBot({
-    params: { service, token },
-  }: ServiceParams): Promise<NextResponse> {
+  async registerBot({ params: _params }: ServiceParams): Promise<NextResponse> {
     return NextResponse.error() as any;
   }
 
   async sendMessage(
     req: NextRequest,
-    { params: { service, token } }: ServiceParams,
+    { params }: ServiceParams,
   ): Promise<NextResponse> {
+    const { service, token } = await params;
     const table = getServiceTable(service);
     const row = await db
       .selectFrom(table)
@@ -103,14 +101,14 @@ export class Service {
       },
     };
 
-    console.log(response);
     return NextResponse.json(response);
   }
 
   async receiveMessage(
     req: NextRequest,
-    { params: { service, token } }: ServiceParams,
+    { params }: ServiceParams,
   ): Promise<NextResponse> {
+    const { service, token } = await params;
     const json = await req.json();
     const worker = await getWorkerUtils();
     await worker.addJob(`${service}/receive-${service}-message`, {
@@ -124,4 +122,8 @@ export class Service {
   async handleWebhook(_req: NextRequest): Promise<NextResponse> {
     return NextResponse.error() as any;
   }
+
+  async relink({ params: _params }: ServiceParams): Promise<NextResponse> {
+    return NextResponse.error() as any;
+  }
 }

packages/bridge-ui/lib/signal.ts

@@ -11,7 +11,8 @@ const fetchNoCache = async (url: string, options = {}) => {
 };
 
 export class Signal extends Service {
-  async getBot({ params: { token } }: ServiceParams) {
+  async getBot({ params }: ServiceParams) {
+    const { token } = await params;
     const row = await db
       .selectFrom("SignalBot")
       .selectAll()

packages/bridge-ui/lib/utils.ts

@@ -3,7 +3,10 @@ import { Facebook } from "./facebook";
 import { Signal } from "./signal";
 import { Whatsapp } from "./whatsapp";
 
-export const getService = ({ params: { service } }: ServiceParams): Service => {
+export const getService = async ({
+  params,
+}: ServiceParams): Promise<Service> => {
+  const { service } = await params;
   if (service === "facebook") {
     return new Facebook();
   } else if (service === "signal") {

packages/bridge-ui/lib/whatsapp.ts

@@ -4,7 +4,8 @@ import { revalidatePath } from "next/cache";
 import { Service, ServiceParams } from "./service";
 
 export class Whatsapp extends Service {
-  async getBot({ params: { token } }: ServiceParams) {
+  async getBot({ params }: ServiceParams) {
+    const { token } = await params;
     const row = await db
       .selectFrom("WhatsappBot")
       .selectAll()
@@ -30,4 +31,30 @@ export class Whatsapp extends Service {
 
     return NextResponse.json(json);
   }
+
+  async relink({ params }: ServiceParams) {
+    const { token } = await params;
+    const row = await db
+      .selectFrom("WhatsappBot")
+      .selectAll()
+      .where("token", "=", token as string)
+      .executeTakeFirstOrThrow();
+    const id = row.id;
+
+    // Step 1: Call unverify to remove the bot directory and disconnect
+    const unverifyUrl = `${process.env.BRIDGE_WHATSAPP_URL}/api/bots/${id}/unverify`;
+    await fetch(unverifyUrl, { method: "POST" });
+
+    // Step 2: Reset verified flag in database
+    await db
+      .updateTable("WhatsappBot")
+      .set({ verified: false })
+      .where("id", "=", id)
+      .execute();
+
+    // Step 3: Revalidate the path to refresh the UI
+    revalidatePath(`/whatsapp/${id}`);
+
+    return NextResponse.json({ success: true, message: "WhatsApp connection reset. Please scan the new QR code." });
+  }
 }

packages/bridge-ui/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@link-stack/bridge-ui",
-  "version": "2.2.0",
+  "version": "3.3.0",
   "scripts": {
     "build": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@link-stack/bridge-common": "^2.2.0",
-    "@link-stack/signal-api": "*",
-    "@link-stack/ui": "^2.2.0",
-    "@mui/material": "^5",
-    "@mui/x-data-grid-pro": "^7.18.0",
-    "kysely": "0.26.1",
-    "next": "^14.2.25",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-qr-code": "^2.0.15"
+    "@link-stack/bridge-common": "workspace:*",
+    "@link-stack/signal-api": "workspace:*",
+    "@link-stack/ui": "workspace:*",
+    "@mui/material": "^6",
+    "@mui/x-data-grid-pro": "^7",
+    "kysely": "0.27.5",
+    "next": "15.5.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-qr-code": "^2.0.18"
   },
   "devDependencies": {
-    "@types/node": "^22.7.3",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "typescript": "5.6.2"
+    "@types/node": "^24.7.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "5.9.3"
   }
 }

packages/bridge-ui/styles/theme.ts

@@ -38,8 +38,6 @@ export const colors: any = {
   helpYellow: "#fff4d5",
   dwcDarkBlue: "#191847",
   hazyMint: "#ecf7f8",
-  leafcutterElectricBlue: "#4d6aff",
-  leafcutterLightBlue: "#fafbfd",
   waterbearElectricPurple: "#332c83",
   waterbearLightSmokePurple: "#eff3f8",
   bumpedPurple: "#212058",

packages/bridge-ui/tsconfig.json

@@ -1,26 +1,32 @@
 {
   "compilerOptions": {
+    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*", "../../node_modules/*"]
+    },
     "plugins": [
       {
         "name": "next"
       }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": ["**.d.ts", "**/*.ts", "**/*.tsx", "**/*.png, **/*.svg"],
+  "exclude": ["node_modules", "babel__core", "dist"]
 }

packages/eslint-config/index.js

@@ -0,0 +1,2 @@
+// Placeholder entry point for eslint-config package
+module.exports = {};

packages/eslint-config/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@link-stack/eslint-config",
-  "version": "2.2.0",
+  "version": "3.3.0",
   "description": "amigo's eslint config",
+  "main": "index.js",
   "author": "Abel Luck <abel@guardianproject.info>",
   "license": "AGPL-3.0-or-later",
-  "private": false,
+  "private": true,
   "scripts": {
     "fmt": "prettier \"profile/**/*.js\" --write"
   },
   "dependencies": {
-    "@rushstack/eslint-patch": "^1.10.4",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@rushstack/eslint-patch": "^1.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-xo-space": "^0.35.0",
-    "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-unicorn": "55.0.0",
-    "@babel/eslint-parser": "7.25.1"
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-unicorn": "61.0.2",
+    "@babel/eslint-parser": "7.28.4"
   },
   "peerDependencies": {
     "typescript": "^4.9.5"
   },
   "devDependencies": {
-    "eslint": "^8",
-    "jest": "^29.7.0",
-    "typescript": "^5.6.2"
+    "eslint": "^9",
+    "jest": "^30.2.0",
+    "typescript": "^5.9.3"
   }
 }

packages/jest-config/index.js

@@ -0,0 +1,2 @@
+// Placeholder entry point for jest-config package
+module.exports = {};

packages/jest-config/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@link-stack/jest-config",
-  "version": "2.2.0",
+  "version": "3.3.0",
   "description": "",
+  "main": "index.js",
   "author": "Abel Luck <abel@guardianproject.info>",
   "license": "AGPL-3.0-or-later",
-  "private": false,
+  "private": true,
   "engines": {
     "node": ">=14"
   },
   "dependencies": {
-    "@types/jest": "^29.5.13",
-    "jest": "^29.7.0",
+    "@types/jest": "^30.0.0",
+    "jest": "^30.2.0",
     "jest-junit": "^16.0.0"
   },
   "peerDependencies": {}

packages/leafcutter-ui/.gitignore

@@ -1,38 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
-
-/storybook-static
-
-*.tgz
-
-.vscode

packages/leafcutter-ui/LICENSE.md

@@ -1,616 +0,0 @@
-### GNU AFFERO GENERAL PUBLIC LICENSE
-
-Version 3, 19 November 2007
-
-Copyright (C) 2007 Free Software Foundation, Inc.
-<https://fsf.org/>
-
-Everyone is permitted to copy and distribute verbatim copies of this
-license document, but changing it is not allowed.
-
-### Preamble
-
-The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works. By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains
-free software for all its users.
-
-When we speak of free software, we are referring to freedom, not
-price. Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate. Many developers of free software are heartened and
-encouraged by the resulting cooperation. However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community. It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server. Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals. This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing
-under this license.
-
-The precise terms and conditions for copying, distribution and
-modification follow.
-
-### TERMS AND CONDITIONS
-
-#### 0. Definitions.
-
-"This License" refers to version 3 of the GNU Affero General Public
-License.
-
-"Copyright" also means copyright-like laws that apply to other kinds
-of works, such as semiconductor masks.
-
-"The Program" refers to any copyrightable work licensed under this
-License. Each licensee is addressed as "you". "Licensees" and
-"recipients" may be individuals or organizations.
-
-To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of
-an exact copy. The resulting work is called a "modified version" of
-the earlier work or a work "based on" the earlier work.
-
-A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy. Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies. Mere interaction with a user
-through a computer network, with no transfer of a copy, is not
-conveying.
-
-An interactive user interface displays "Appropriate Legal Notices" to
-the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License. If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-#### 1. Source Code.
-
-The "source code" for a work means the preferred form of the work for
-making modifications to it. "Object code" means any non-source form of
-a work.
-
-A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form. A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities. However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work. For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-The Corresponding Source need not include anything that users can
-regenerate automatically from other parts of the Corresponding Source.
-
-The Corresponding Source for a work in source code form is that same
-work.
-
-#### 2. Basic Permissions.
-
-All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met. This License explicitly affirms your unlimited
-permission to run the unmodified Program. The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work. This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-You may make, run and propagate covered works that you do not convey,
-without conditions so long as your license otherwise remains in force.
-You may convey covered works to others for the sole purpose of having
-them make modifications exclusively for you, or provide you with
-facilities for running those works, provided that you comply with the
-terms of this License in conveying all material for which you do not
-control copyright. Those thus making or running the covered works for
-you must do so exclusively on your behalf, under your direction and
-control, on terms that prohibit them from making any copies of your
-copyrighted material outside their relationship with you.
-
-Conveying under any other circumstances is permitted solely under the
-conditions stated below. Sublicensing is not allowed; section 10 makes
-it unnecessary.
-
-#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such
-circumvention is effected by exercising rights under this License with
-respect to the covered work, and you disclaim any intention to limit
-operation or modification of the work as a means of enforcing, against
-the work's users, your or third parties' legal rights to forbid
-circumvention of technological measures.
-
-#### 4. Conveying Verbatim Copies.
-
-You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-#### 5. Conveying Modified Source Versions.
-
-You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these
-conditions:
-
--   a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
--   b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under
-    section 7. This requirement modifies the requirement in section 4
-    to "keep intact all notices".
--   c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy. This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged. This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
--   d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit. Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-#### 6. Conveying Non-Source Forms.
-
-You may convey a covered work in object code form under the terms of
-sections 4 and 5, provided that you also convey the machine-readable
-Corresponding Source under the terms of this License, in one of these
-ways:
-
--   a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
--   b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the Corresponding
-    Source from a network server at no charge.
--   c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source. This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
--   d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge. You need not require recipients to copy the
-    Corresponding Source along with the object code. If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source. Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
--   e) Convey the object code using peer-to-peer transmission,
-    provided you inform other peers where the object code and
-    Corresponding Source of the work are being offered to the general
-    public at no charge under subsection 6d.
-
-A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal,
-family, or household purposes, or (2) anything designed or sold for
-incorporation into a dwelling. In determining whether a product is a
-consumer product, doubtful cases shall be resolved in favor of
-coverage. For a particular product received by a particular user,
-"normally used" refers to a typical or common use of that class of
-product, regardless of the status of the particular user or of the way
-in which the particular user actually uses, or expects or is expected
-to use, the product. A product is a consumer product regardless of
-whether the product has substantial commercial, industrial or
-non-consumer uses, unless such uses represent the only significant
-mode of use of the product.
-
-"Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to
-install and execute modified versions of a covered work in that User
-Product from a modified version of its Corresponding Source. The
-information must suffice to ensure that the continued functioning of
-the modified object code is in no case prevented or interfered with
-solely because modification has been made.
-
-If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information. But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or
-updates for a work that has been modified or installed by the
-recipient, or for the User Product in which it has been modified or
-installed. Access to a network may be denied when the modification
-itself materially and adversely affects the operation of the network
-or violates the rules and protocols for communication across the
-network.
-
-Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-#### 7. Additional Terms.
-
-"Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law. If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it. (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.) You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders
-of that material) supplement the terms of this License with terms:
-
--   a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
--   b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
--   c) Prohibiting misrepresentation of the origin of that material,
-    or requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
--   d) Limiting the use for publicity purposes of names of licensors
-    or authors of the material; or
--   e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
--   f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions
-    of it) with contractual assumptions of liability to the recipient,
-    for any liability that these contractual assumptions directly
-    impose on those licensors and authors.
-
-All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10. If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term. If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions; the
-above requirements apply either way.
-
-#### 8. Termination.
-
-You may not propagate or modify a covered work except as expressly
-provided under this License. Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-However, if you cease all violation of this License, then your license
-from a particular copyright holder is reinstated (a) provisionally,
-unless and until the copyright holder explicitly and finally
-terminates your license, and (b) permanently, if the copyright holder
-fails to notify you of the violation by some reasonable means prior to
-60 days after the cessation.
-
-Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License. If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-#### 9. Acceptance Not Required for Having Copies.
-
-You are not required to accept this License in order to receive or run
-a copy of the Program. Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance. However,
-nothing other than this License grants you permission to propagate or
-modify any covered work. These actions infringe copyright if you do
-not accept this License. Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-#### 10. Automatic Licensing of Downstream Recipients.
-
-Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License. You are not responsible
-for enforcing compliance by third parties with this License.
-
-An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations. If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License. For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-#### 11. Patents.
-
-A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based. The
-work thus licensed is called the contributor's "contributor version".
-
-A contributor's "essential patent claims" are all patent claims owned
-or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version. For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement). To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients. "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-A patent license is "discriminatory" if it does not include within the
-scope of its coverage, prohibits the exercise of, or is conditioned on
-the non-exercise of one or more of the rights that are specifically
-granted under this License. You may not convey a covered work if you
-are a party to an arrangement with a third party that is in the
-business of distributing software, under which you make payment to the
-third party based on the extent of your activity of conveying the
-work, and under which the third party grants, to any of the parties
-who would receive the covered work from you, a discriminatory patent
-license (a) in connection with copies of the covered work conveyed by
-you (or copies made from those copies), or (b) primarily for and in
-connection with specific products or compilations that contain the
-covered work, unless you entered into that arrangement, or that patent
-license was granted, prior to 28 March 2007.
-
-Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-#### 12. No Surrender of Others' Freedom.
-
-If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License. If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under
-this License and any other pertinent obligations, then as a
-consequence you may not convey it at all. For example, if you agree to
-terms that obligate you to collect a royalty for further conveying
-from those to whom you convey the Program, the only way you could
-satisfy both those terms and this License would be to refrain entirely
-from conveying the Program.
-
-#### 13. Remote Network Interaction; Use with the GNU General Public License.
-
-Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your
-version supports such interaction) an opportunity to receive the
-Corresponding Source of your version by providing access to the
-Corresponding Source from a network server at no charge, through some
-standard or customary means of facilitating copying of software. This
-Corresponding Source shall include the Corresponding Source for any
-work covered by version 3 of the GNU General Public License that is
-incorporated pursuant to the following paragraph.
-
-Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work. The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-#### 14. Revised Versions of this License.
-
-The Free Software Foundation may publish revised and/or new versions
-of the GNU Affero General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program
-specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation. If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever
-published by the Free Software Foundation.
-
-If the Program specifies that a proxy can decide which future versions
-of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-Later license versions may give you additional or different
-permissions. However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-#### 15. Disclaimer of Warranty.
-
-THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
-WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
-LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
-PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
-DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
-CORRECTION.
-
-#### 16. Limitation of Liability.
-
-IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
-CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
-ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
-NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
-LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
-TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
-PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
-
-#### 17. Interpretation of Sections 15 and 16.
-
-If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-END OF TERMS AND CONDITIONS

packages/leafcutter-ui/README.md

@@ -1,32 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/leafcutter-ui/actions/visualizations.ts

@@ -1,32 +0,0 @@
-"use server";
-
-import {
-  performLeafcutterQuery,
-  performZammadQuery,
-  createUserVisualization,
-} from "@link-stack/opensearch-common";
-
-export const createUserVisualizationAction = async ({
-  visualizationID,
-  title,
-  description,
-  query,
-}: any) => {
-  const email = "xxx@example.com";
-  const id = await createUserVisualization({
-    email,
-    visualizationID,
-    title,
-    description,
-    query,
-  });
-  return id;
-};
-
-export const searchVisualizationsAction = async (
-  kind: string,
-  searchQuery: string,
-) =>
-  kind === "zammad"
-    ? performZammadQuery(searchQuery, 1000)
-    : performLeafcutterQuery(searchQuery, 1000);

packages/leafcutter-ui/components/About.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { useTranslate } from "react-polyglot";
-import { Grid, Container, Box, Button } from "@mui/material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { AboutBox } from "./AboutBox";
-import { AboutFeature } from "./AboutFeature";
-import { PageHeader } from "./PageHeader";
-import AbstractDiagram from "../images/abstract-diagram.png";
-import AboutHeader from "../images/about-header.png";
-import Globe from "../images/globe.png";
-import Controls from "../images/controls.png";
-import CommunityBackground from "../images/community-background.png";
-import Bicycle from "../images/bicycle.png";
-
-export const About: FC = () => {
-  const t = useTranslate();
-  const {
-    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
-    typography: { h1, h4, p },
-  } = useLeafcutterContext();
-
-  return (
-    <>
-      <PageHeader
-        backgroundColor={leafcutterElectricBlue}
-        sx={{
-          backgroundImage: `url(${AboutHeader.src})`,
-          backgroundSize: "200px",
-          backgroundPosition: "bottom right",
-          backgroundRepeat: "no-repeat",
-        }}
-      >
-        <Grid
-          container
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Grid item xs={9}>
-            <Box component="h1" sx={h1}>
-              {t("aboutLeafcutterTitle")}
-            </Box>
-            <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
-              {t("aboutLeafcutterDescription")}
-            </Box>
-          </Grid>
-        </Grid>
-      </PageHeader>
-      <Container maxWidth="lg">
-        <AboutFeature
-          title={t("whatIsLeafcutterTitle")}
-          description={t("whatIsLeafcutterDescription")}
-          direction="row"
-          image={AbstractDiagram}
-          showBackground={false}
-          textColumns={8}
-        />
-        <AboutFeature
-          title={t("whatIsItForTitle")}
-          description={t("whatIsItForDescription")}
-          direction="row-reverse"
-          image={Controls}
-          showBackground
-          textColumns={8}
-        />
-        <AboutFeature
-          title={t("whoCanUseItTitle")}
-          description={t("whoCanUseItDescription")}
-          direction="row"
-          image={Globe}
-          showBackground
-          textColumns={6}
-        />
-      </Container>
-      <AboutBox backgroundColor={cdrLinkOrange}>
-        <Box component="h4" sx={{ ...h4, mt: 0 }}>
-          {t("whereDataComesFromTitle")}
-        </Box>
-        {t("whereDataComesFromDescription")
-          .split("\n")
-          .map((line: string, i: number) => (
-            <Box component="p" key={i} sx={p}>
-              {line}
-            </Box>
-          ))}
-      </AboutBox>
-      <AboutBox backgroundColor={leafcutterElectricBlue}>
-        <Box component="h4" sx={{ ...h4, mt: 0 }}>
-          {t("projectSupportTitle")}
-        </Box>
-        {t("projectSupportDescription")
-          .split("\n")
-          .map((line: string, i: number) => (
-            <Box component="p" key={i} sx={p}>
-              {line}
-            </Box>
-          ))}
-      </AboutBox>
-      <Box
-        sx={{
-          backgroundImage: `url(${CommunityBackground.src})`,
-          backgroundSize: "90%",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
-          position: "relative",
-          height: "700px",
-        }}
-      >
-        <Box sx={{ position: "absolute", left: 0, bottom: -20, width: 300 }}>
-          <Image src={Bicycle} alt="" />
-        </Box>
-        <Container
-          maxWidth="md"
-          sx={{ textAlign: "center", paddingTop: "280px" }}
-        >
-          <Box
-            component="h4"
-            sx={{ ...h4, maxWidth: 500, margin: "0 auto", mt: 3 }}
-          >
-            {t("interestedInLeafcutterTitle")}
-          </Box>
-          {t("interestedInLeafcutterDescription")
-            .split("\n")
-            .map((line: string, i: number) => (
-              <Box
-                component="p"
-                key={i}
-                sx={{ ...p, maxWidth: 500, margin: "0 auto" }}
-              >
-                {line}
-              </Box>
-            ))}
-          <Link href="mailto:info@digiresilience.org">
-            <Button
-              sx={{
-                fontSize: 14,
-                borderRadius: 500,
-                color: white,
-                backgroundColor: cdrLinkOrange,
-                fontWeight: "bold",
-                textTransform: "uppercase",
-                pl: 6,
-                pr: 5,
-                mt: 4,
-                ":hover": {
-                  backgroundColor: leafcutterElectricBlue,
-                  color: white,
-                  opacity: 0.8,
-                },
-              }}
-            >
-              {t("contactUs")}
-            </Button>
-          </Link>
-        </Container>
-      </Box>
-    </>
-  );
-};

packages/leafcutter-ui/components/AboutBox.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { FC, PropsWithChildren } from "react";
-import { Box } from "@mui/material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-type AboutBoxProps = PropsWithChildren<{
-  backgroundColor: string;
-}>;
-
-export const AboutBox: FC<AboutBoxProps> = ({
-  backgroundColor,
-  children,
-}: any) => {
-  const {
-    colors: { white },
-  } = useLeafcutterContext();
-
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        backgroundColor,
-        color: white,
-        p: 4,
-        borderRadius: "10px",
-        mt: "66px",
-        mb: "22px",
-        textAlign: "center",
-      }}
-    >
-      {children}
-    </Box>
-  );
-};

packages/leafcutter-ui/components/AboutFeature.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Image from "next/legacy/image";
-import { Grid, Box, GridSize } from "@mui/material";
-import AboutDots from "../images/about-dots.png";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface AboutFeatureProps {
-  title: string;
-  description: string;
-  direction: "row" | "row-reverse";
-  image: any;
-  showBackground: boolean;
-  textColumns: number;
-}
-
-export const AboutFeature: FC<AboutFeatureProps> = ({
-  title,
-  description,
-  direction,
-  image,
-  showBackground,
-  textColumns,
-}) => {
-  const {
-    typography: { h2, p },
-  } = useLeafcutterContext();
-
-  return (
-    <Box
-      sx={{
-        p: "20px",
-        mt: "40px",
-        backgroundImage: showBackground ? `url(${AboutDots.src})` : "",
-        backgroundSize: "200px 200px",
-        backgroundPosition: direction === "row" ? "20% 50%" : "80% 50%",
-        backgroundRepeat: "no-repeat",
-      }}
-    >
-      <Grid
-        direction={direction}
-        container
-        spacing={5}
-        alignContent="flex-start"
-      >
-        <Grid item xs={textColumns as GridSize}>
-          <Box component="h2" sx={h2}>
-            {title}
-          </Box>
-          <Box component="p" sx={p}>
-            {description}
-          </Box>
-        </Grid>
-        <Grid
-          item
-          xs={(12 - textColumns) as GridSize}
-          container
-          direction={direction}
-        >
-          <Box sx={{ width: "150px", mt: "-20px" }}>
-            <Image src={image} alt="" objectFit="contain" />
-          </Box>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/Button.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Link from "next/link";
-import { Button as MUIButton } from "@mui/material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface ButtonProps {
-  text: string;
-  color: string;
-  href: string;
-}
-
-export const Button: FC<ButtonProps> = ({ text, color, href }) => {
-  const {
-    colors: { white, almostBlack },
-  } = useLeafcutterContext();
-
-  return (
-    <Link href={href} passHref>
-      <MUIButton
-        variant="contained"
-        disableElevation
-        sx={{
-          fontFamily: "Poppins, sans-serif",
-          fontWeight: 700,
-          color:
-            color === white
-              ? `${almostBlack} !important`
-              : `${white} !important`,
-          borderRadius: 999,
-          backgroundColor: color,
-          padding: "6px 30px",
-          margin: "20px 0px",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {text}
-      </MUIButton>
-    </Link>
-  );
-};

packages/leafcutter-ui/components/Create.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { FC, useEffect } from "react";
-import { useTranslate } from "react-polyglot";
-import { useRouter, usePathname } from "next/navigation";
-import { Box, Grid } from "@mui/material";
-import { useCookies } from "react-cookie";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { PageHeader } from "./PageHeader";
-import { VisualizationBuilder } from "./VisualizationBuilder";
-
-type CreateProps = {
-  templates: any;
-};
-
-export const Create: FC<CreateProps> = ({ templates }) => {
-  const t = useTranslate();
-  const {
-    colors: { cdrLinkOrange },
-    typography: { h1, h4 },
-  } = useLeafcutterContext();
-  const router = useRouter();
-  const pathname = usePathname() ?? "";
-  const cookieName = "searchIntroComplete";
-  const [cookies, setCookie] = useCookies([cookieName]);
-  const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;
-
-  useEffect(() => {
-    if (searchIntroComplete === 0) {
-      setCookie(cookieName, `${1}`, { path: "/" });
-      router.push(`${pathname}?group=search&tooltip=1&checklist=1`);
-    }
-  }, [searchIntroComplete, router, setCookie]);
-
-  return (
-    <>
-      <PageHeader backgroundColor={cdrLinkOrange}>
-        <Grid container direction="row" spacing={2} alignItems="center">
-          {/*           <Grid item xs={2} sx={{ textAlign: "center" }}>
-            <Image src={SearchCreateHeader} width={100} height={100} alt="" />
-          </Grid> */}
-          <Grid container direction="column" item xs={10}>
-            <Grid item>
-              <Box component="h1" sx={{ ...h1 }}>
-                {t("searchAndCreateTitle")}
-              </Box>
-            </Grid>
-            <Grid item>
-              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
-                {t("searchAndCreateSubtitle")}
-              </Box>
-            </Grid>
-            {/*      <Grid>
-              <Box component="p" sx={{ ...p }}>
-                {t("searchAndCreateDescription")}
-              </Box>
-            </Grid> */}
-          </Grid>
-        </Grid>
-      </PageHeader>
-      <VisualizationBuilder templates={templates} />
-    </>
-  );
-};

packages/leafcutter-ui/components/FAQ.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { useTranslate } from "react-polyglot";
-import { Box, Grid } from "@mui/material";
-import { PageHeader } from "./PageHeader";
-import { Question } from "./Question";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import FaqHeader from "../images/faq-header.svg";
-
-export const FAQ: FC = () => {
-  const t = useTranslate();
-  const {
-    colors: { lavender },
-    typography: { h1, h4, p },
-  } = useLeafcutterContext();
-
-  const questions = [
-    {
-      question: t("whatIsLeafcutterQuestion"),
-      answer: t("whatIsLeafcutterAnswer"),
-    },
-    {
-      question: t("whoBuiltLeafcutterQuestion"),
-      answer: t("whoBuiltLeafcutterAnswer"),
-    },
-    {
-      question: t("whoCanUseLeafcutterQuestion"),
-      answer: t("whoCanUseLeafcutterAnswer"),
-    },
-    {
-      question: t("whatCanYouDoWithLeafcutterQuestion"),
-      answer: t("whatCanYouDoWithLeafcutterAnswer"),
-    },
-
-    {
-      question: t("whereIsTheDataComingFromQuestion"),
-      answer: t("whereIsTheDataComingFromAnswer"),
-    },
-    {
-      question: t("whereIsTheDataStoredQuestion"),
-      answer: t("whereIsTheDataStoredAnswer"),
-    },
-    {
-      question: t("howDoWeKeepTheDataSafeQuestion"),
-      answer: t("howDoWeKeepTheDataSafeAnswer"),
-    },
-
-    {
-      question: t("howLongDoYouKeepTheDataQuestion"),
-      answer: t("howLongDoYouKeepTheDataAnswer"),
-    },
-    {
-      question: t("whatOrganizationsAreParticipatingQuestion"),
-      answer: t("whatOrganizationsAreParticipatingAnswer"),
-    },
-    {
-      question: t("howDidYouGetMyProfileInformationQuestion"),
-      answer: t("howDidYouGetMyProfileInformationAnswer"),
-    },
-    {
-      question: t("howCanILearnMoreAboutLeafcutterQuestion"),
-      answer: t("howCanILearnMoreAboutLeafcutterAnswer"),
-    },
-  ];
-
-  return (
-    <>
-      <PageHeader
-        backgroundColor={lavender}
-        sx={{
-          backgroundImage: `url(${FaqHeader.src})`,
-          backgroundSize: "150px",
-          backgroundPosition: "bottom right",
-          backgroundRepeat: "no-repeat",
-        }}
-      >
-        <Grid
-          container
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Grid item>
-            <Box component="h1" sx={{ ...h1 }}>
-              {t("frequentlyAskedQuestionsTitle")}
-            </Box>
-            <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
-              {t("frequentlyAskedQuestionsSubtitle")}
-            </Box>
-            <Box component="p" sx={{ ...p }}>
-              {t("frequentlyAskedQuestionsDescription")}
-            </Box>
-          </Grid>
-        </Grid>
-      </PageHeader>
-      {questions.map((q: any, index: number) => (
-        <Question key={index} question={q.question} answer={q.answer} />
-      ))}
-    </>
-  );
-};

packages/leafcutter-ui/components/Footer.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { Container, Grid, Box, Button } from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import Image from "next/legacy/image";
-import Link from "next/link";
-import leafcutterLogo from "../images/leafcutter-logo.png";
-import footerLogo from "../images/footer-logo.png";
-import twitterLogo from "../images/twitter-logo.png";
-import gitlabLogo from "../images/gitlab-logo.png";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-export const Footer: FC = () => {
-  const t = useTranslate();
-  const {
-    colors: { white, leafcutterElectricBlue },
-    typography: { bodySmall },
-  } = useLeafcutterContext();
-  const smallLinkStyles: any = {
-    ...bodySmall,
-    color: white,
-    textTransform: "none",
-  };
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: leafcutterElectricBlue,
-        backgroundImage: `url(${footerLogo})`,
-        backgroundBlendMode: "overlay",
-        backgroundPosition: "bottom left",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "30%",
-        marginTop: "40px",
-        marginLeft: "300px",
-      }}
-    >
-      <Container sx={{ pt: 4, pb: 4 }}>
-        <Grid
-          container
-          direction="row"
-          wrap="nowrap"
-          justifyContent="space-between"
-        >
-          <Grid
-            item
-            container
-            direction="row"
-            wrap="nowrap"
-            sx={{ maxHeight: "auto" }}
-          >
-            <Grid item sx={{ width: 50, ml: 2, mr: 4 }}>
-              <Image src={leafcutterLogo} alt="CDR logo" />
-            </Grid>
-          </Grid>
-          <Grid item sx={{ color: "white" }}>
-            {t("contactUs")}
-          </Grid>
-        </Grid>
-      </Container>
-
-      <Box sx={{ backgroundColor: leafcutterElectricBlue }}>
-        <Container>
-          <Grid
-            item
-            container
-            direction="row"
-            justifyContent="space-between"
-            wrap="nowrap"
-            alignItems="center"
-          >
-            <Grid
-              item
-              container
-              direction="row"
-              spacing={1}
-              alignItems="center"
-            >
-              <Grid item>
-                <Box component="p" sx={{ ...bodySmall, color: white }}>
-                  ©️ {t("copyright")}
-                </Box>
-              </Grid>
-              <Grid item>
-                <Link href="/about/privacy" passHref>
-                  <Button variant="text" sx={smallLinkStyles}>
-                    {t("privacyPolicy")}
-                  </Button>
-                </Link>
-              </Grid>
-              <Grid item>
-                <Link href="/about/code-practice" passHref>
-                  <Button variant="text" sx={smallLinkStyles}>
-                    {t("codeOfPractice")}
-                  </Button>
-                </Link>
-              </Grid>
-            </Grid>
-            <Grid item sx={{ width: 40, p: 1, pl: 0 }}>
-              <a href="https://gitlab.com/digiresilience">
-                <Image src={gitlabLogo} alt="Gitlab logo" />
-              </a>
-            </Grid>
-            <Grid item sx={{ width: 40, p: 1, pr: 0 }}>
-              <a href="https://twitter.com/cdr_tech">
-                <Image src={twitterLogo} alt="Twitter logo" />
-              </a>
-            </Grid>
-          </Grid>
-        </Container>
-      </Box>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/GettingStartedDialog.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
-import { Close as CloseIcon } from "@mui/icons-material";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-type CheckboxItemProps = {
-  title: string;
-  description: string;
-  checked: boolean;
-  onChange: () => void;
-};
-
-const CheckboxItem: FC<CheckboxItemProps> = ({
-  title,
-  description,
-  checked,
-  onChange,
-}) => {
-  const {
-    typography: { p, small },
-  } = useLeafcutterContext();
-
-  return (
-    <Grid item container spacing={0}>
-      <Grid
-        item
-        container
-        spacing={0}
-        sx={{ backgroundColor: "white" }}
-        wrap="nowrap"
-      >
-        <Grid item xs={1}>
-          <Checkbox checked={checked} onChange={onChange} sx={{ mt: "-8px" }} />
-        </Grid>
-        <Grid
-          item
-          container
-          direction="column"
-          spacing={0}
-          xs={11}
-          sx={{ pl: 2 }}
-        >
-          <Grid item>
-            <Box sx={{ ...p, fontWeight: "bold" }}>{title}</Box>
-          </Grid>
-          <Grid item>
-            <Box sx={small}>{description}</Box>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-};
-
-export const GettingStartedDialog: FC = () => {
-  const {
-    colors: { almostBlack },
-    typography: { h4 },
-  } = useLeafcutterContext();
-  const t = useTranslate();
-  const router = useRouter();
-  const [completedItems, setCompletedItems] = useState([] as any[]);
-  const searchParams = useSearchParams();
-  const pathname = usePathname() ?? "";
-  const open = searchParams?.get("tooltip")?.toString() === "checklist";
-  const toggleCompletedItem = (item: any) => {
-    if (completedItems.includes(item)) {
-      setCompletedItems(completedItems.filter((i) => i !== item));
-    } else {
-      setCompletedItems([...completedItems, item]);
-    }
-  };
-
-  return (
-    <Dialog
-      open={open}
-      maxWidth="xs"
-      PaperProps={{
-        sx: { position: "absolute", bottom: 8, right: 8, borderRadius: 3 },
-      }}
-      hideBackdrop
-      disableEnforceFocus
-      disableAutoFocus
-      onBackdropClick={undefined}
-    >
-      <Grid container direction="column" spacing={2} sx={{ p: 3 }}>
-        <Grid item>
-          <Grid container direction="row" justifyContent="space-between">
-            <Grid item>
-              <Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
-            </Grid>
-            <Grid item>
-              <IconButton onClick={() => router.push(pathname ?? "")}>
-                <CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
-              </IconButton>
-            </Grid>
-          </Grid>
-          <Grid container direction="column" spacing={2}>
-            <CheckboxItem
-              title={t("searchTitle")}
-              description={t("searchDescription")}
-              checked={completedItems.includes("search")}
-              onChange={() => toggleCompletedItem("search")}
-            />
-            <CheckboxItem
-              title={t("createVisualizationTitle")}
-              description={t("createVisualizationDescription")}
-              checked={completedItems.includes("create")}
-              onChange={() => toggleCompletedItem("create")}
-            />
-            <CheckboxItem
-              title={t("saveTitle")}
-              description={t("saveDescription")}
-              checked={completedItems.includes("save")}
-              onChange={() => toggleCompletedItem("save")}
-            />
-            <CheckboxItem
-              title={t("exportTitle")}
-              description={t("exportDescription")}
-              checked={completedItems.includes("export")}
-              onChange={() => toggleCompletedItem("export")}
-            />
-            <CheckboxItem
-              title={t("shareTitle")}
-              description={t("shareDescription")}
-              checked={completedItems.includes("share")}
-              onChange={() => toggleCompletedItem("share")}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
-    </Dialog>
-  );
-};

packages/leafcutter-ui/components/Home.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import { useEffect, FC } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import Link from "next/link";
-import { Grid, Button } from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import { useCookies } from "react-cookie";
-import { Welcome } from "./Welcome";
-import { WelcomeDialog } from "./WelcomeDialog";
-import { VisualizationCard } from "./VisualizationCard";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { getBasePath } from "../lib/utils";
-
-type HomeProps = {
-  visualizations: any;
-  showWelcome?: boolean;
-};
-
-export const Home: FC<HomeProps> = ({
-  visualizations = [],
-  showWelcome = true,
-}) => {
-  console.log("Home", visualizations);
-  const router = useRouter();
-  const pathname = usePathname() ?? "";
-  const cookieName = "homeIntroComplete";
-  const [cookies, setCookie] = useCookies([cookieName]);
-  const t = useTranslate();
-  const {
-    colors: { white, leafcutterElectricBlue },
-    typography: { h4 },
-  } = useLeafcutterContext();
-  const homeIntroComplete = parseInt(cookies[cookieName], 10) || 0;
-
-  useEffect(() => {
-    if (homeIntroComplete === 0) {
-      setCookie(cookieName, `${1}`, { path: "/" });
-      router.push(`${pathname}?tooltip=welcome`);
-    }
-  }, [homeIntroComplete, router, setCookie]);
-
-  return (
-    <>
-      {showWelcome && <Welcome />}
-      <Grid
-        container
-        spacing={3}
-        sx={{ pt: "22px", pb: "22px" }}
-        direction="row-reverse"
-      >
-        <Link href={`${getBasePath()}/create`} passHref>
-          <Button
-            sx={{
-              fontSize: 14,
-              borderRadius: 500,
-              color: leafcutterElectricBlue,
-              border: `2px solid ${leafcutterElectricBlue}`,
-              fontWeight: "bold",
-              textTransform: "uppercase",
-              pl: 6,
-              pr: 5,
-              ":hover": {
-                backgroundColor: leafcutterElectricBlue,
-                color: white,
-                opacity: 0.8,
-              },
-            }}
-          >
-            {t("createVisualization")}
-          </Button>
-        </Link>
-      </Grid>
-      <Grid
-        container
-        direction="row"
-        wrap="wrap"
-        spacing={3}
-        justifyContent="space-between"
-      >
-        {visualizations.length === 0 ? (
-          <Grid
-            container
-            sx={{ height: 300, width: "100%", pt: 10 }}
-            justifyContent="center"
-          >
-            <Grid item sx={{ ...h4, width: 450, textAlign: "center" }}>
-              {"You don’t have any saved visualizations. Go to "}
-              <Link href={`${getBasePath()}/create`}>Search and Create</Link>
-              {" or "}
-              <Link href={`${getBasePath()}/trends`}>Trends</Link>
-              {" to get started."}
-            </Grid>
-          </Grid>
-        ) : null}
-        {visualizations.map((visualization: any, index: number) => (
-          <VisualizationCard
-            id={visualization.id}
-            key={index}
-            title={visualization.title}
-            description={visualization.description}
-            url={visualization.url}
-          />
-        ))}
-      </Grid>
-      <WelcomeDialog />
-    </>
-  );
-};

packages/leafcutter-ui/components/LeafcutterProvider.tsx

@@ -1,166 +0,0 @@
-"use client";
-
-import {
-  FC,
-  createContext,
-  useContext,
-  useReducer,
-  useState,
-  PropsWithChildren,
-} from "react";
-import { colors, typography } from "../styles/theme";
-
-const basePath = process.env.GITLAB_CI
-  ? "/link/link-stack/apps/leafcutter"
-  : "";
-const imageURL = (image: any) =>
-  typeof image === "string" ? `${basePath}${image}` : `${basePath}${image.src}`;
-
-const LeafcutterContext = createContext({
-  colors,
-  typography,
-  imageURL,
-  datasource: "leafcutter",
-  setDatasource: null as any,
-  query: null as any,
-  updateQuery: null as any,
-  updateQueryType: null as any,
-  replaceQuery: null as any,
-  clearQuery: null as any,
-  foundCount: 0,
-  setFoundCount: null as any,
-});
-
-export const LeafcutterProvider: FC<PropsWithChildren> = ({ children }) => {
-  const initialState = {
-    incidentType: {
-      display: "Incident Type",
-      queryType: "include",
-      values: [],
-    },
-    relativeDate: {
-      display: "Relative Date",
-      queryType: null,
-      values: [],
-    },
-    startDate: {
-      display: "Start Date",
-      queryType: null,
-      values: [],
-    },
-    endDate: {
-      display: "End Date",
-      queryType: null,
-      values: [],
-    },
-    targetedGroup: {
-      display: "Targeted Group",
-      queryType: "include",
-      values: [],
-    },
-    platform: {
-      display: "Platform",
-      queryType: "include",
-      values: [],
-    },
-    device: {
-      display: "Device",
-      queryType: "include",
-      values: [],
-    },
-    service: {
-      display: "Service",
-      queryType: "include",
-      values: [],
-    },
-    maker: {
-      display: "Maker",
-      queryType: "include",
-      values: [],
-    },
-    country: {
-      display: "Country",
-      queryType: "include",
-      values: [],
-    },
-    subregion: {
-      display: "Subregion",
-      queryType: "include",
-      values: [],
-    },
-    continent: {
-      display: "Continent",
-      queryType: "include",
-      values: [],
-    },
-  };
-  const reducer = (state: any, action: any) => {
-    const key = action.payload?.[0];
-    if (!key) {
-      throw new Error("Unknown key");
-    }
-    const newState = { ...state };
-    switch (action.type) {
-      case "UPDATE":
-        newState[key].values = action.payload[key].values;
-        return newState;
-      case "UPDATE_TYPE":
-        newState[key].queryType = action.payload[key].queryType;
-        return newState;
-      case "REPLACE":
-        return Object.keys(action.payload).reduce((acc: any, cur: string) => {
-          if (["startDate", "endDate"].includes(cur)) {
-            const rawDate = action.payload[cur].values[0];
-            const date = new Date(rawDate);
-            acc[cur] = {
-              ...action.payload[cur],
-              values: rawDate && date ? [date] : [],
-            };
-          } else {
-            acc[cur] = action.payload[cur];
-          }
-
-          return acc;
-        }, {});
-      case "CLEAR":
-        return initialState;
-      default:
-        throw new Error("Unknown action type");
-    }
-  };
-
-  const [query, dispatch] = useReducer(reducer, initialState);
-  const updateQuery = (payload: any) => dispatch({ type: "UPDATE", payload });
-  const updateQueryType = (payload: any) =>
-    dispatch({ type: "UPDATE_TYPE", payload });
-  const replaceQuery = (payload: any) => dispatch({ type: "REPLACE", payload });
-  const clearQuery = () => dispatch({ type: "CLEAR" });
-  const [foundCount, setFoundCount] = useState(0);
-  const [datasource, setDatasource] = useState("leafcutter");
-
-  return (
-    <LeafcutterContext.Provider
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
-      value={{
-        colors,
-        typography,
-        imageURL,
-        datasource,
-        setDatasource,
-        query,
-        updateQuery,
-        updateQueryType,
-        replaceQuery,
-        clearQuery,
-        foundCount,
-        setFoundCount,
-      }}
-    >
-      {children}
-    </LeafcutterContext.Provider>
-  );
-};
-
-export function useLeafcutterContext() {
-  return useContext(LeafcutterContext);
-}

packages/leafcutter-ui/components/LeafcutterWrapper.tsx

@@ -1,6 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { Box } from "@mui/material";
-
-export const LeafcutterWrapper: FC<PropsWithChildren> = ({ children }) => {
-  return <Box sx={{ p: 3 }}>{children}</Box>;
-};

packages/leafcutter-ui/components/LiveDataViewer.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import { FC, useEffect, useState } from "react";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { RawDataViewer } from "./RawDataViewer";
-import { searchVisualizationsAction } from "../actions/visualizations";
-
-export const LiveDataViewer: FC = () => {
-  const { query, setFoundCount, datasource } = useLeafcutterContext();
-  const [rows, setRows] = useState<any[]>([]);
-  useEffect(() => {
-    const fetchData = async () => {
-      const result = await searchVisualizationsAction(datasource, query);
-      setRows(result);
-      setFoundCount(result?.length ?? 0);
-    };
-    fetchData();
-  }, [query, setFoundCount, datasource]);
-
-  return <RawDataViewer rows={rows} height={350} />;
-};

packages/leafcutter-ui/components/MetricSelectCard.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import { Card, Grid } from "@mui/material";
-import {
-  PrivacyTip as PrivacyTipIcon,
-  PhoneIphone as PhoneIphoneIcon,
-  Map as MapIcon,
-  Group as GroupIcon,
-  DateRange as DateRangeIcon,
-  Public as PublicIcon,
-} from "@mui/icons-material";
-import { VisualizationDetailDialog } from "./VisualizationDetailDialog";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface MetricSelectCardProps {
-  visualizationID: string;
-  metricType: string;
-  title: string;
-  description: string;
-  enabled: boolean;
-}
-
-export const MetricSelectCard: FC<MetricSelectCardProps> = ({
-  visualizationID,
-  metricType,
-  title,
-  description,
-  enabled,
-}) => {
-  const [open, setOpen] = useState(false);
-  const closeDialog = () => setOpen(false);
-  const [dialogParams, setDialogParams] = useState<any>({});
-  const {
-    typography: { small },
-    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
-    query,
-  } = useLeafcutterContext();
-  /*   const images = {
-    actor: PrivacyTipIcon,
-    incidenttype: PrivacyTipIcon,
-    channel: PrivacyTipIcon,
-    date: DateRangeIcon,
-    targetedgroup: GroupIcon,
-    impactedtechnology: PhoneIphoneIcon,
-    location: MapIcon,
-  }; */
-
-  const createAndOpen = async () => {
-    const createParams = {
-      visualizationID,
-      title,
-      description,
-      query,
-    };
-    const result: any = await fetch(`/api/visualizations/create`, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(createParams),
-    });
-
-    const { id } = await result.json();
-    const params = {
-      id,
-      title: createParams.title,
-      description: createParams.description,
-      url: `/app/visualize?security_tenant=private#/edit/${id}?embed=true`,
-    };
-    setDialogParams(params);
-    setOpen(true);
-  };
-
-  return (
-    <>
-      <Card
-        sx={{
-          height: "100px",
-          backgroundColor: enabled ? leafcutterElectricBlue : white,
-          borderRadius: "10px",
-          padding: "10px",
-          opacity: enabled ? 1 : 0.5,
-          cursor: enabled ? "pointer" : "default",
-          "&:hover": {
-            backgroundColor: enabled ? cdrLinkOrange : white,
-          },
-        }}
-        elevation={enabled ? 2 : 0}
-        onClick={createAndOpen}
-      >
-        <Grid
-          direction="column"
-          container
-          justifyContent="space-around"
-          alignContent="center"
-          alignItems="center"
-          wrap="nowrap"
-          sx={{ height: "100%" }}
-          spacing={0}
-        >
-          <Grid
-            item
-            sx={{
-              ...small,
-              textAlign: "center",
-              color: enabled ? white : leafcutterElectricBlue,
-            }}
-          >
-            {title}
-          </Grid>
-          <Grid item>
-            {metricType === "impactedtechnology" && (
-              <PhoneIphoneIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "region" && (
-              <PublicIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "continent" && (
-              <PublicIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "country" && (
-              <MapIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "targetedgroup" && (
-              <GroupIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "incidenttype" && (
-              <PrivacyTipIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-            {metricType === "date" && (
-              <DateRangeIcon fontSize="large" sx={{ color: "white" }} />
-            )}
-          </Grid>
-        </Grid>
-      </Card>
-      {open ? (
-        <VisualizationDetailDialog
-          id={dialogParams.id}
-          title={dialogParams.title}
-          description={dialogParams.description}
-          url={dialogParams.url}
-          closeDialog={closeDialog}
-          editing
-        />
-      ) : null}
-    </>
-  );
-};

packages/leafcutter-ui/components/OpenSearchWrapper.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Iframe from "react-iframe";
-import { Box } from "@mui/material";
-
-interface OpenSearchWrapperProps {
-  url: string;
-  marginTop: string;
-}
-
-export const OpenSearchWrapper: FC<OpenSearchWrapperProps> = ({
-  url,
-  marginTop,
-}) => (
-  <Box sx={{ position: "relative", marginTop: "-100px" }}>
-    <Box
-      sx={{
-        width: "100%",
-        height: "100px",
-        marginTop: "-20px",
-        backgroundColor: "white",
-        zIndex: 100,
-        position: "relative",
-      }}
-    />
-    <Box
-      sx={{
-        marginTop,
-        zIndex: 1,
-        position: "relative",
-        height: "100vh",
-      }}
-    >
-      <Iframe
-        id="opensearch"
-        url={`/dashboards/${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
-        width="100%"
-        height="100%"
-        frameBorder={0}
-      />
-    </Box>
-  </Box>
-);

packages/leafcutter-ui/components/PageHeader.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-/* eslint-disable react/require-default-props */
-import { FC, PropsWithChildren } from "react";
-import { Box } from "@mui/material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-type PageHeaderProps = PropsWithChildren<{
-  backgroundColor: string;
-  sx?: any;
-}>;
-
-export const PageHeader: FC<PageHeaderProps> = ({
-  backgroundColor,
-  sx = {},
-  children,
-}: any) => {
-  const {
-    colors: { white },
-  } = useLeafcutterContext();
-
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        backgroundColor,
-        color: white,
-        p: 3,
-        borderRadius: "10px",
-        mb: "22px",
-        minHeight: "100px",
-        zIndex: 1000,
-        position: "relative",
-        ...sx,
-      }}
-    >
-      {children}
-    </Box>
-  );
-};

packages/leafcutter-ui/components/Preview.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { FC } from "react";
-/* eslint-disable no-underscore-dangle */
-import { RawDataViewer } from "./RawDataViewer";
-import { VisualizationDetail } from "./VisualizationDetail";
-
-interface PreviewProps {
-  visualization: any;
-  visualizationType: string;
-  data: any[];
-}
-
-export const Preview: FC<PreviewProps> = ({
-  visualization,
-  visualizationType,
-  data,
-}) =>
-  visualizationType === "rawData" ? (
-    <RawDataViewer rows={data} height={750} />
-  ) : (
-    <VisualizationDetail {...visualization} />
-  );

packages/leafcutter-ui/components/QueryBuilder.tsx

@@ -1,251 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import {
-  Box,
-  Grid,
-  Dialog,
-  DialogActions,
-  Button,
-  DialogContent,
-} from "@mui/material";
-import {
-  PrivacyTip as PrivacyTipIcon,
-  DateRange as DateRangeIcon,
-  PhoneIphone as PhoneIphoneIcon,
-  Map as MapIcon,
-  Group as GroupIcon,
-} from "@mui/icons-material";
-import { useTranslate } from "react-polyglot";
-import taxonomy from "../config/taxonomy.json";
-import { QueryBuilderSection } from "./QueryBuilderSection";
-import { QueryListSelector } from "./QueryListSelector";
-import { QueryDateRangeSelector } from "./QueryDateRangeSelector";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { Tooltip } from "./Tooltip";
-
-interface QueryBuilderProps {}
-
-export const QueryBuilder: FC<QueryBuilderProps> = () => {
-  const t = useTranslate();
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const {
-    typography: { p },
-    colors: { leafcutterElectricBlue, mediumGray, almostBlack },
-  } = useLeafcutterContext();
-
-  const openAdvancedOptions = () => {
-    setDialogOpen(false);
-    window.open(`/app/visualize`, "_ blank");
-  };
-
-  return (
-    <Box sx={{ mb: 6 }}>
-      <Grid container direction="row" spacing={2}>
-        <Tooltip
-          title={t("categoriesCardTitle")}
-          description={t("categoriesCardDescription")}
-          tooltipID="categories"
-          placement="left"
-          previousURL="/create?tooltip=searchCreate"
-          nextURL="/create?tooltip=dateRange"
-        >
-          <Box sx={{ width: 0 }} />
-        </Tooltip>
-        <QueryBuilderSection
-          width={4}
-          name={t("incidentType")}
-          keyName="incidentType"
-          Image={PrivacyTipIcon}
-          showQueryType
-          tooltipTitle={t("incidentTypeCardTitle")}
-          tooltipDescription={t("incidentTypeCardDescription")}
-        >
-          <Grid container>
-            <QueryListSelector
-              title={t("type")}
-              keyName="incidentType"
-              values={taxonomy.incidentType}
-              width={12}
-            />
-          </Grid>
-        </QueryBuilderSection>
-        <Tooltip
-          title={t("dateRangeCardTitle")}
-          description={t("dateRangeCardDescription")}
-          tooltipID="dateRange"
-          placement="top"
-          previousURL="/create?tooltip=categories"
-          nextURL="/create?tooltip=subcategories"
-        >
-          <Box sx={{ width: 0 }} />
-        </Tooltip>
-        <QueryBuilderSection
-          width={4}
-          name={t("date")}
-          keyName="date"
-          Image={DateRangeIcon}
-          tooltipTitle={t("dateRangeCardTitle")}
-          tooltipDescription={t("dateRangeCardDescription")}
-        >
-          <QueryDateRangeSelector />
-        </QueryBuilderSection>
-        <QueryBuilderSection
-          width={4}
-          name={t("targetedGroup")}
-          keyName="targetedGroup"
-          Image={GroupIcon}
-          showQueryType
-          tooltipTitle={t("targetedGroupCardTitle")}
-          tooltipDescription={t("targetedGroupCardDescription")}
-        >
-          <Grid container>
-            <QueryListSelector
-              title={t("group")}
-              keyName="targetedGroup"
-              values={taxonomy.targetedGroup}
-              width={12}
-            />
-          </Grid>
-        </QueryBuilderSection>
-        <Tooltip
-          title={t("subcategoriesCardTitle")}
-          description={t("subcategoriesCardDescription")}
-          tooltipID="subcategories"
-          placement="top"
-          previousURL="/create?tooltip=dateRange"
-          nextURL="/create?tooltip=advancedOptions"
-        >
-          <Box sx={{ width: 0 }} />
-        </Tooltip>
-        <QueryBuilderSection
-          width={12}
-          name={t("impactedTechnology")}
-          keyName="impactedTechnology"
-          Image={PhoneIphoneIcon}
-          showQueryType
-          tooltipTitle={t("impactedTechnologyCardTitle")}
-          tooltipDescription={t("impactedTechnologyCardDescription")}
-        >
-          <Grid container spacing={2}>
-            <QueryListSelector
-              title={t("platform")}
-              keyName="platform"
-              values={taxonomy.platform}
-              width={3}
-            />
-            <QueryListSelector
-              title={t("device")}
-              keyName="device"
-              values={taxonomy.device}
-              width={3}
-            />
-            <QueryListSelector
-              title={t("service")}
-              keyName="service"
-              values={taxonomy.service}
-              width={3}
-            />
-            <QueryListSelector
-              title={t("maker")}
-              keyName="maker"
-              values={taxonomy.maker}
-              width={3}
-            />
-          </Grid>
-        </QueryBuilderSection>
-        <QueryBuilderSection
-          width={12}
-          name={t("region")}
-          keyName="subregion"
-          Image={MapIcon}
-          showQueryType={false}
-          tooltipTitle={t("regionCardTitle")}
-          tooltipDescription={t("regionCardDescription")}
-        >
-          <Grid container spacing={2}>
-            <QueryListSelector
-              title={t("continent")}
-              keyName="continent"
-              values={taxonomy.continent}
-              width={4}
-            />
-            <QueryListSelector
-              title={t("country")}
-              keyName="country"
-              values={taxonomy.country}
-              width={4}
-            />
-            <QueryListSelector
-              title={t("subregion")}
-              keyName="subregion"
-              values={taxonomy.subregion}
-              width={4}
-            />
-          </Grid>
-        </QueryBuilderSection>
-        <Grid item xs={12}>
-          <Tooltip
-            title={t("advancedOptionsCardTitle")}
-            description={t("advancedOptionsCardDescription")}
-            tooltipID="advancedOptions"
-            placement="top"
-            previousURL="/create?tooltip=subcategories"
-            nextURL="/create?tooltip=queryResults"
-          >
-            <Button
-              sx={{
-                ...p,
-                color: leafcutterElectricBlue,
-                textDecoration: "underline",
-                textTransform: "none",
-                fontWeight: "bold",
-              }}
-              onClick={() => setDialogOpen(true)}
-            >
-              {`+ ${t("advancedOptions")}`}
-            </Button>
-          </Tooltip>
-        </Grid>
-      </Grid>
-      <Dialog open={dialogOpen}>
-        <DialogContent sx={{ maxWidth: 350 }}>
-          {t("fullInterfaceWillOpen")}
-        </DialogContent>
-        <DialogActions>
-          <Grid
-            container
-            direction="row"
-            justifyContent="space-between"
-            wrap="nowrap"
-            sx={{ pl: 2, pr: 2, pt: 1, pb: 1 }}
-          >
-            <Grid item>
-              <Button
-                sx={{
-                  backgroundColor: mediumGray,
-                  color: almostBlack,
-                }}
-                variant="contained"
-                size="small"
-                onClick={() => setDialogOpen(false)}
-              >
-                {t("cancel")}
-              </Button>
-            </Grid>
-            <Grid item>
-              <Button
-                sx={{ backgroundColor: leafcutterElectricBlue }}
-                variant="contained"
-                size="small"
-                onClick={openAdvancedOptions}
-              >
-                {t("open")}
-              </Button>
-            </Grid>
-          </Grid>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/QueryBuilderSection.tsx

@@ -1,230 +0,0 @@
-"use client";
-
-import { FC, PropsWithChildren, useState } from "react";
-import {
-  Box,
-  Grid,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Button,
-  ButtonGroup,
-  IconButton,
-  Tooltip as MUITooltip,
-} from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import {
-  ExpandMore as ExpandMoreIcon,
-  Help as HelpIcon,
-} from "@mui/icons-material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface QueryBuilderSectionProps {
-  name: string;
-  keyName: string;
-  children: any;
-  Image: any;
-  width: number;
-  // eslint-disable-next-line react/require-default-props
-  showQueryType?: boolean;
-  tooltipTitle: string;
-  tooltipDescription: string;
-}
-
-type TooltipProps = PropsWithChildren<{
-  title: string;
-  description: string;
-  children: any;
-  open: boolean;
-}>;
-
-const Tooltip: FC<TooltipProps> = ({ title, description, children, open }) => {
-  const {
-    colors: { white, leafcutterElectricBlue, almostBlack },
-    typography: { h5, small },
-  } = useLeafcutterContext();
-
-  return (
-    <MUITooltip
-      open={open}
-      title={
-        <Box sx={{ width: 300, p: 2, pt: 1 }}>
-          <Grid container direction="column">
-            <Grid
-              item
-              sx={{
-                ...h5,
-                textTransform: "none",
-                textAlign: "left",
-                fontWeight: 700,
-                ml: 0,
-                color: leafcutterElectricBlue,
-              }}
-            >
-              {title}
-            </Grid>
-            <Grid item sx={{ ...small, color: almostBlack }}>
-              {description}
-            </Grid>
-          </Grid>
-        </Box>
-      }
-      arrow
-      placement="top"
-      componentsProps={{
-        tooltip: {
-          sx: {
-            backgroundColor: white,
-            boxShadow: "0px 6px 8px rgba(0,0,0,0.5)",
-          },
-        },
-        arrow: {
-          sx: {
-            color: "white",
-            fontSize: "22px",
-          },
-        },
-      }}
-    >
-      {children}
-    </MUITooltip>
-  );
-};
-
-export const QueryBuilderSection: FC<QueryBuilderSectionProps> = ({
-  name,
-  keyName,
-  children,
-  Image,
-  width,
-  showQueryType = false,
-  tooltipTitle,
-  tooltipDescription,
-}) => {
-  const t = useTranslate();
-  const [queryType, setQueryType] = useState("include");
-  const [showTooltip, setShowTooltip] = useState(false);
-  const {
-    colors: { white, leafcutterElectricBlue, warningPink, almostBlack },
-    typography: { h6, small },
-    updateQueryType,
-  } = useLeafcutterContext();
-  const updateType = (type: string) => {
-    setQueryType(type);
-    updateQueryType({
-      [keyName]: { queryType: type },
-    });
-  };
-
-  const minHeight = "42px";
-  const maxHeight = "42px";
-
-  return (
-    <Grid item xs={width}>
-      <Accordion>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
-          sx={{
-            backgroundColor: leafcutterElectricBlue,
-            height: "14px",
-            minHeight,
-            maxHeight,
-            "&.Mui-expanded": {
-              minHeight,
-              maxHeight,
-            },
-          }}
-        >
-          <Grid container direction="row" alignItems="center">
-            <Grid item>
-              <Image
-                sx={{ color: white, fontSize: 24, mr: "8px", mt: "2px" }}
-                alt=""
-              />
-            </Grid>
-            <Grid item>
-              <Box sx={{ ...h6, color: white, fontWeight: "bold", mt: "-2px" }}>
-                {name}
-              </Box>
-            </Grid>
-            <Grid item>
-              <Tooltip
-                open={showTooltip}
-                title={tooltipTitle}
-                description={tooltipDescription}
-              >
-                <IconButton
-                  onMouseEnter={() => setShowTooltip(true)}
-                  onMouseLeave={() => setShowTooltip(false)}
-                >
-                  <HelpIcon
-                    sx={{ color: white, width: "14px", mt: "-1px", ml: "-3px" }}
-                  />
-                </IconButton>
-              </Tooltip>
-            </Grid>
-          </Grid>
-        </AccordionSummary>
-        <AccordionDetails>
-          {showQueryType ? (
-            <Grid
-              container
-              direction="row"
-              spacing={1}
-              sx={{ mt: 0, mb: 2 }}
-              justifyContent="center"
-            >
-              <Grid item sx={{ mt: "-6px" }}>
-                <ButtonGroup>
-                  <Button
-                    variant="contained"
-                    size="small"
-                    sx={{
-                      fontSize: 10,
-                      height: 20,
-                      color: queryType === "include" ? white : almostBlack,
-                      backgroundColor:
-                        queryType === "include"
-                          ? leafcutterElectricBlue
-                          : white,
-                      "&:hover": {
-                        color: white,
-                        backgroundColor: leafcutterElectricBlue,
-                      },
-                    }}
-                    onClick={() => updateType("include")}
-                  >
-                    {t("include")}
-                  </Button>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    size="small"
-                    sx={{
-                      fontSize: 10,
-                      height: 20,
-                      color: queryType === "exclude" ? white : almostBlack,
-                      backgroundColor:
-                        queryType === "exclude" ? warningPink : white,
-                      "&:hover": {
-                        color: white,
-                        backgroundColor: warningPink,
-                      },
-                    }}
-                    onClick={() => updateType("exclude")}
-                  >
-                    {t("exclude")}
-                  </Button>
-                </ButtonGroup>
-              </Grid>
-              <Grid item>
-                <Box sx={{ ...small, mt: "0px" }}>these items:</Box>
-              </Grid>
-            </Grid>
-          ) : null}
-          <Box>{children}</Box>
-        </AccordionDetails>
-      </Accordion>
-    </Grid>
-  );
-};

packages/leafcutter-ui/components/QueryDateRangeSelector.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { FC, useState, useEffect } from "react";
-import { Box, Grid, TextField, Select, MenuItem } from "@mui/material";
-import { DatePicker } from "@mui/x-date-pickers-pro";
-import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface QueryDateRangeSelectorProps {}
-
-export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
-  const t = useTranslate();
-  const [relativeDate, setRelativeDate] = useState("");
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-  const { updateQuery, query } = useLeafcutterContext();
-  useEffect(() => {
-    if (!query) return;
-    setStartDate(query.startDate.values[0] ?? null);
-    setEndDate(query.endDate.values[0] ?? null);
-    setRelativeDate(query.relativeDate.values[0] ?? "");
-  }, [query, setStartDate, setEndDate, setRelativeDate]);
-
-  return (
-    <Box sx={{ height: 305, width: "100%", pt: 2 }}>
-      <Grid container direction="column">
-        <Grid item xs={12} sx={{ mb: 2 }}>
-          <Select
-            fullWidth
-            size="small"
-            placeholder={t("relativeDate")}
-            value={relativeDate}
-            onChange={(event: any) => {
-              setStartDate(null);
-              setEndDate(null);
-              setRelativeDate(event.target.value);
-              updateQuery({
-                startDate: { values: [] },
-              });
-              updateQuery({
-                endDate: { values: [] },
-              });
-              updateQuery({
-                relativeDate: { values: [event.target.value] },
-              });
-            }}
-          >
-            <MenuItem value={7}>{t("last7Days")}</MenuItem>
-            <MenuItem value={30}>{t("last30Days")}</MenuItem>
-            <MenuItem value={90}>{t("last3Months")}</MenuItem>
-            <MenuItem value={180}>{t("last6Months")}</MenuItem>
-            <MenuItem value={365}>{t("lastYear")}</MenuItem>
-            <MenuItem value={730}>{t("last2Years")}</MenuItem>
-          </Select>
-        </Grid>
-        <Grid item sx={{ textAlign: "center", mb: 2 }}>
-          – or –
-        </Grid>
-        <Grid item xs={12}>
-          <DatePicker
-            label={t("startDate")}
-            value={startDate}
-            onChange={(date: any) => {
-              setStartDate(date);
-              updateQuery({
-                startDate: { values: [date] },
-              });
-            }}
-            // @ts-ignore
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                sx={{
-                  width: "100%",
-                  color: "black",
-                  "& .MuiOutlinedInput-root": {
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                  },
-                }}
-                size="small"
-              />
-            )}
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <DatePicker
-            label={t("endDate")}
-            value={endDate}
-            onChange={(date: any) => {
-              setEndDate(date);
-              updateQuery({
-                endDate: { values: [date] },
-              });
-            }}
-            // @ts-ignore
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                sx={{
-                  backgroundColor: "white",
-                  mt: "-1px",
-                  width: "100%",
-                  color: "black",
-                  "& .MuiOutlinedInput-root": {
-                    borderTop: 0,
-                    borderTopLeftRadius: 0,
-                    borderTopRightRadius: 0,
-                  },
-                }}
-                size="small"
-              />
-            )}
-          />
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/QueryListSelector.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import { FC, useState, useEffect } from "react";
-import { Box, Grid, Tooltip } from "@mui/material";
-import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface QueryListSelectorProps {
-  title: string;
-  keyName: string;
-  values: any;
-  width: number;
-}
-
-export const QueryListSelector: FC<QueryListSelectorProps> = ({
-  title,
-  keyName,
-  values,
-  width,
-}) => {
-  const [selectionModel, setSelectionModel] = useState([] as any[]);
-  const {
-    colors: { leafcutterLightBlue, pink, leafcutterElectricBlue, warningPink },
-    typography: { small },
-    query,
-    updateQuery,
-  } = useLeafcutterContext();
-  const isExclude = query?.[keyName]?.queryType === "exclude";
-  const columns: GridColDef[] = [
-    {
-      field: "value",
-      renderHeader: () => (
-        <Box sx={{ ...small, fontWeight: "bold" }}>{title}</Box>
-      ),
-      renderCell: ({ value, row }) => (
-        <Tooltip title={row.description}>
-          <Box sx={{ width: "100%" }}>{value}</Box>
-        </Tooltip>
-      ),
-      editable: false,
-      flex: 1,
-    },
-  ];
-  const rows = Object.keys(values).map((k) => ({
-    id: k,
-    value: values[k].display,
-    description: values[k].description,
-    category: values[k].category,
-  }));
-
-  useEffect(() => {
-    if (!query) return;
-    setSelectionModel(query[keyName].values);
-  }, [query, keyName, setSelectionModel]);
-
-  return (
-    <Grid item xs={width}>
-      <Box style={{ height: 280, width: "100%" }}>
-        <Grid container direction="column" spacing={2}>
-          <Grid item>
-            <DataGridPro
-              sx={{
-                height: 260,
-                "& .MuiCheckbox-root": {
-                  color: isExclude ? warningPink : leafcutterElectricBlue,
-                },
-                "& .Mui-selected": {
-                  backgroundColor: `${
-                    isExclude ? pink : leafcutterLightBlue
-                  } !important`,
-                },
-              }}
-              rows={rows}
-              columns={columns}
-              density="compact"
-              pageSizeOptions={[100]}
-              checkboxSelection
-              disableRowSelectionOnClick
-              hideFooter
-              disableColumnMenu
-              scrollbarSize={10}
-              onRowSelectionModelChange={(newSelectionModel) => {
-                setSelectionModel(newSelectionModel as any);
-                updateQuery({
-                  [keyName]: { values: newSelectionModel },
-                });
-              }}
-              rowSelectionModel={selectionModel}
-            />
-          </Grid>
-        </Grid>
-      </Box>
-    </Grid>
-  );
-};

packages/leafcutter-ui/components/QueryText.tsx

@@ -1,129 +0,0 @@
-"use client";
-
-import { FC, useState, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import taxonomy from "../config/taxonomy.json";
-import { colors } from "../styles/theme";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-export const QueryText: FC = () => {
-  const t = useTranslate();
-  const {
-    typography: { h6 },
-    query: q,
-  } = useLeafcutterContext();
-
-  const displayNames: any = {
-    incidentType: t("incidentType"),
-    startDate: t("startDate"),
-    endDate: t("endDate"),
-    relativeDate: t("relativeDate"),
-    targetedGroup: t("targetedGroup"),
-    platform: t("platform"),
-    device: t("device"),
-    service: t("service"),
-    maker: t("maker"),
-    country: t("country"),
-    subregion: t("subregion"),
-    continent: t("continent"),
-  };
-
-  const createClause = (query: any, key: string) => {
-    const { values, queryType } = query?.[key] ?? {};
-    const color =
-      queryType === "include"
-        ? colors.leafcutterElectricBlue
-        : colors.warningPink;
-
-    if (values?.length > 0) {
-      return `where <span  style="color: ${color};"><strong>${
-        displayNames[key]
-      }</strong> ${
-        queryType === "include" ? ` ${t("is")} ` : ` ${t("isNot")} `
-      } ${values
-        .map(
-          (value: string) =>
-            // @ts-ignore
-            `<em>${taxonomy[key]?.[value]?.display ?? ""}</em>`,
-        )
-        .join(` ${t("or")} `)}</span>`;
-    }
-
-    return null;
-  };
-  const createDateClause = (query: any, key: string) => {
-    if (!query) return null;
-    const { values } = query[key];
-    const color = colors.leafcutterElectricBlue;
-    if (values.length > 0) {
-      const range = key === "startDate" ? t("onOrAfter") : t("onOrBefore");
-      return `${t("where")} <span style="color: ${color};"><strong>${
-        displayNames[key]
-      }</strong> is ${range} <em>${values[0]?.toLocaleDateString()}</em></span>`;
-    }
-    return null;
-  };
-  const createRelativeDateClause = (query: any, key: string) => {
-    if (!query) return null;
-    const { values } = query[key];
-    const color = colors.leafcutterElectricBlue;
-
-    if (query[key].values.length > 0) {
-      const range = t("onOrAfter");
-      return `${t("where")} <span style="color: ${color};"><strong>${
-        displayNames[key]
-      }</strong> is ${range} <em>${values[0]} days ago</em></span>`;
-    }
-    return null;
-  };
-
-  const [queryText, setQueryText] = useState(t("findAllIncidents"));
-  useEffect(() => {
-    const generateQueryText = (query: any) => {
-      const incidentClause = createClause(query, "incidentType");
-      const startDateClause = createDateClause(query, "startDate");
-      const endDateClause = createDateClause(query, "endDate");
-      const relativeDateClause = createRelativeDateClause(
-        query,
-        "relativeDate",
-      );
-      const targetedGroupClause = createClause(query, "targetedGroup");
-      const platformClause = createClause(query, "platform");
-      const deviceClause = createClause(query, "device");
-      const serviceClause = createClause(query, "service");
-      const makerClause = createClause(query, "maker");
-      const countryClause = createClause(query, "country");
-      const subregionClause = createClause(query, "subregion");
-      const continentClause = createClause(query, "continent");
-      const joinedClauses = [
-        incidentClause,
-        startDateClause,
-        endDateClause,
-        relativeDateClause,
-        targetedGroupClause,
-        platformClause,
-        deviceClause,
-        serviceClause,
-        makerClause,
-        countryClause,
-        subregionClause,
-        continentClause,
-      ]
-        .filter((clause) => clause !== null)
-        .join(" and ");
-
-      return `${t("findAllIncidents")} ${joinedClauses}`;
-    };
-    const text = generateQueryText(q);
-    setQueryText(text);
-  }, [q]);
-
-  return (
-    <Grid container direction="column">
-      <Grid item>
-        <Box sx={h6} dangerouslySetInnerHTML={{ __html: queryText }} />
-      </Grid>
-    </Grid>
-  );
-};

packages/leafcutter-ui/components/Question.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import {
-  Grid,
-  Box,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from "@mui/material";
-import {
-  ChevronRight as ChevronRightIcon,
-  ExpandMore as ExpandMoreIcon,
-  Circle as CircleIcon,
-} from "@mui/icons-material";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface QuestionProps {
-  question: string;
-  answer: string;
-}
-
-export const Question: FC<QuestionProps> = ({ question, answer }) => {
-  const [expanded, setExpanded] = useState(false);
-  const {
-    colors: { lavender, darkLavender },
-    typography: { h5, p },
-  } = useLeafcutterContext();
-
-  return (
-    <Accordion
-      expanded={expanded}
-      onChange={() => setExpanded(!expanded)}
-      elevation={0}
-      sx={{ "::before": { display: "none" } }}
-    >
-      <AccordionSummary>
-        <Grid
-          container
-          direction="row"
-          justifyContent="space-between"
-          sx={{ maxWidth: 500 }}
-        >
-          <Box component="h5" sx={h5}>
-            <CircleIcon
-              sx={{
-                fontSize: 14,
-                color: expanded ? darkLavender : lavender,
-                mr: 1,
-                mb: "-2px",
-              }}
-            />
-            {question}
-          </Box>
-          {expanded ? (
-            <ExpandMoreIcon
-              htmlColor={lavender}
-              fontSize="medium"
-              sx={{ mt: "2px" }}
-            />
-          ) : (
-            <ChevronRightIcon
-              htmlColor={lavender}
-              fontSize="medium"
-              sx={{ mt: "4px" }}
-            />
-          )}
-        </Grid>
-      </AccordionSummary>
-      <AccordionDetails sx={{ border: 0 }}>
-        <Box
-          sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
-        >
-          <ReactMarkdown>{answer}</ReactMarkdown>
-        </Box>
-      </AccordionDetails>
-    </Accordion>
-  );
-};

packages/leafcutter-ui/components/RawDataViewer.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { useRouter } from "next/navigation";
-import { Box, Grid } from "@mui/material";
-import { DataGridPro } from "@mui/x-data-grid-pro";
-import { useTranslate } from "react-polyglot";
-
-interface RawDataViewerProps {
-  rows: any[];
-  height: number;
-}
-
-export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
-  const t = useTranslate();
-  const router = useRouter();
-  const columns = [
-    {
-      field: "open_date",
-      headerName: "Open Date", //t("date"),
-      editable: false,
-      flex: 0.7,
-      valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
-    },
-    {
-      field: "close_date",
-      headerName: "Close Date", // t("date"),
-      editable: false,
-      flex: 0.7,
-      valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
-    },
-
-    {
-      field: "incident",
-      headerName: t("incident"),
-      editable: false,
-      flex: 1,
-    },
-    {
-      field: "technology",
-      headerName: t("technology"),
-      editable: false,
-      flex: 0.8,
-    },
-    {
-      field: "targeted_group",
-      headerName: t("targetedGroup"),
-      editable: false,
-      flex: 1.3,
-    },
-    {
-      field: "country",
-      headerName: t("country"),
-      editable: false,
-      flex: 1,
-    },
-    {
-      field: "region",
-      headerName: t("subregion"),
-      editable: false,
-      flex: 1,
-    },
-    {
-      field: "continent",
-      headerName: t("continent"),
-      editable: false,
-      flex: 1,
-    },
-  ];
-
-  return (
-    <Grid item xs={12}>
-      <Box
-        sx={{ width: "100%", height }}
-        onClick={(e: any) => e.stopPropagation()}
-      >
-        <Grid container direction="column" spacing={2}>
-          <Grid item>
-            <DataGridPro
-              sx={{ width: "100%", height }}
-              rows={rows}
-              columns={columns}
-              density="compact"
-              pageSizeOptions={[100]}
-              disableRowSelectionOnClick
-              hideFooter
-              disableColumnMenu
-              scrollbarSize={10}
-              disableVirtualization
-              onCellClick={(e) => router.push("/tickets/" + e.row.id)}
-            />
-          </Grid>
-        </Grid>
-      </Box>
-    </Grid>
-  );
-};

packages/leafcutter-ui/components/Tooltip.tsx

@@ -1,160 +0,0 @@
-"use client";
-
-/* eslint-disable react/require-default-props */
-import { FC } from "react";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import {
-  Box,
-  Grid,
-  Tooltip as MUITooltip,
-  Button,
-  IconButton,
-} from "@mui/material";
-import { Close as CloseIcon } from "@mui/icons-material";
-import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface TooltipProps {
-  title: string;
-  description: string;
-  placement: any;
-  tooltipID: string;
-  nextURL?: string;
-  previousURL?: string;
-  children: any;
-}
-
-export const Tooltip: FC<TooltipProps> = ({
-  title,
-  description,
-  placement,
-  tooltipID,
-  children,
-  previousURL = null,
-  nextURL = null,
-  // eslint-disable-next-line arrow-body-style
-}) => {
-  const t = useTranslate();
-  const {
-    typography: { p, small },
-    colors: { white, leafcutterElectricBlue, almostBlack },
-  } = useLeafcutterContext();
-  const router = useRouter();
-  const pathname = usePathname() ?? "";
-  const searchParams = useSearchParams();
-  const activeTooltip = searchParams?.get("tooltip")?.toString();
-  const open = activeTooltip === tooltipID;
-  const showNavigation = true;
-
-  return (
-    <MUITooltip
-      open={open}
-      title={
-        <Grid container direction="column">
-          <Grid item container direction="row-reverse">
-            <Grid item>
-              <IconButton onClick={() => router.push(pathname)}>
-                <CloseIcon
-                  sx={{
-                    color: leafcutterElectricBlue,
-                    fontSize: "14px",
-                    mt: 1,
-                  }}
-                />
-              </IconButton>
-            </Grid>
-          </Grid>
-          <Grid item>
-            <Box sx={{ p: "12px", pt: 0, mb: "6px" }}>
-              <Box sx={{ ...p, fontWeight: "bold" }}>
-                <Grid container direction="row" alignItems="center">
-                  <Grid item>{title}</Grid>
-                </Grid>
-              </Box>
-              <Box sx={{ ...small, mt: 1, color: almostBlack }}>
-                {description}
-              </Box>
-            </Box>
-          </Grid>
-          {showNavigation ? (
-            <Grid
-              item
-              container
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              sx={{ p: "12px" }}
-            >
-              <Grid item>
-                {previousURL ? (
-                  <Button
-                    sx={{
-                      ...small,
-                      borderRadius: 500,
-                      border: `1px solid ${leafcutterElectricBlue}`,
-                      p: "2px 8px",
-                      color: leafcutterElectricBlue,
-                      textTransform: "none",
-                    }}
-                    onClick={() => router.push(previousURL)}
-                  >
-                    {t("previous")}
-                  </Button>
-                ) : null}
-              </Grid>
-              <Grid item>
-                {nextURL ? (
-                  <Button
-                    sx={{
-                      ...small,
-                      borderRadius: 500,
-                      border: `1px solid ${leafcutterElectricBlue}`,
-                      p: "2px 8px",
-                      color: leafcutterElectricBlue,
-                      textTransform: "none",
-                    }}
-                    onClick={() => router.push(nextURL)}
-                  >
-                    {t("next")}
-                  </Button>
-                ) : (
-                  <Button
-                    sx={{
-                      ...small,
-                      borderRadius: 500,
-                      border: `1px solid ${leafcutterElectricBlue}`,
-                      p: "2px 8px",
-                      color: leafcutterElectricBlue,
-                      textTransform: "none",
-                    }}
-                    onClick={() => router.push(pathname)}
-                  >
-                    {t("done")}
-                  </Button>
-                )}
-              </Grid>
-            </Grid>
-          ) : null}
-        </Grid>
-      }
-      arrow
-      placement={placement}
-      sx={{ opacity: 0.9 }}
-      componentsProps={{
-        tooltip: {
-          sx: {
-            opacity: 1.0,
-            backgroundColor: white,
-            color: leafcutterElectricBlue,
-            boxShadow: "0px 6px 20px rgba(0,0,0,0.25)",
-          },
-        },
-        arrow: {
-          sx: { opacity: 1.0, fontSize: "22px", color: white },
-        },
-      }}
-    >
-      {children}
-    </MUITooltip>
-  );
-};

packages/leafcutter-ui/components/Trends.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { Grid, Box } from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import { PageHeader } from "./PageHeader";
-import { VisualizationCard } from "./VisualizationCard";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-type TrendsProps = {
-  visualizations: any;
-};
-
-export const Trends: FC<TrendsProps> = ({ visualizations }) => {
-  const t = useTranslate();
-  const {
-    colors: { cdrLinkOrange },
-    typography: { h1, h4, p },
-  } = useLeafcutterContext();
-
-  return (
-    <>
-      <PageHeader backgroundColor={cdrLinkOrange}>
-        <Grid
-          container
-          direction="row"
-          spacing={2}
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          {/*      <Grid item xs={3} sx={{ textAlign: "center" }}>
-            <Image src={SearchCreateHeader} width={200} height={200} alt="" />
-          </Grid> */}
-          <Grid item container direction="column" xs={12}>
-            <Grid item>
-              <Box component="h1" sx={{ ...h1 }}>
-                {t("trendsTitle")}
-              </Box>
-            </Grid>
-            <Grid item>
-              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
-                {t("trendsSubtitle")}
-              </Box>
-            </Grid>
-            <Grid>
-              <Box component="p" sx={{ ...p }}>
-                {t("trendsDescription")}
-              </Box>
-            </Grid>
-          </Grid>
-        </Grid>
-      </PageHeader>
-      <Grid
-        container
-        direction="row"
-        wrap="wrap"
-        spacing={3}
-        justifyContent="space-between"
-      >
-        {visualizations.map((visualization: any, index: number) => (
-          <VisualizationCard
-            key={index}
-            id={visualization.id}
-            title={visualization.title}
-            description={visualization.description}
-            url={visualization.url}
-          />
-        ))}
-      </Grid>
-    </>
-  );
-};

packages/leafcutter-ui/components/VisualizationBuilder.tsx

@@ -1,393 +0,0 @@
-"use client";
-
-import { FC, useState, useEffect } from "react";
-import {
-  Box,
-  Button,
-  Grid,
-  Popover,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Dialog,
-  Divider,
-  Paper,
-  MenuList,
-  MenuItem,
-  ListItemText,
-  ListItemIcon,
-  TextField,
-} from "@mui/material";
-import {
-  ExpandMore as ExpandMoreIcon,
-  AddCircleOutline as AddCircleOutlineIcon,
-  SavedSearch as SavedSearchIcon,
-  RemoveCircle as RemoveCircleIcon,
-} from "@mui/icons-material";
-import { useTranslate } from "react-polyglot";
-import { QueryBuilder } from "./QueryBuilder";
-import { QueryText } from "./QueryText";
-import { LiveDataViewer } from "./LiveDataViewer";
-import { Tooltip } from "./Tooltip";
-import visualizationMap from "../config/visualizationMap.json";
-import { VisualizationSelectCard } from "./VisualizationSelectCard";
-import { MetricSelectCard } from "./MetricSelectCard";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface VisualizationBuilderProps {
-  templates: any[];
-}
-
-export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
-  templates,
-}) => {
-  const t = useTranslate();
-  const {
-    typography: { h4 },
-    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
-    foundCount,
-    query,
-    replaceQuery,
-    clearQuery,
-    datasource,
-    setDatasource,
-  } = useLeafcutterContext();
-  const { visualizations } = visualizationMap;
-  const [selectedVisualizationType, setSelectedVisualizationType] = useState(
-    null as any,
-  );
-  const toggleSelectedVisualizationType = (visualizationType: string) => {
-    if (visualizationType === selectedVisualizationType) {
-      setSelectedVisualizationType(null);
-    } else {
-      setSelectedVisualizationType(visualizationType);
-    }
-  };
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [savedSearches, setSavedSearches] = useState([]);
-  const [savedSearchName, setSavedSearchName] = useState("");
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  const updateSearches = async () => {
-    const result = await fetch("/api/searches/list");
-    const existingSearches = await result.json();
-    setSavedSearches(existingSearches);
-  };
-  useEffect(() => {
-    updateSearches();
-  }, [setSavedSearches]);
-
-  const showSavedSearchPopup = (event: any) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setSavedSearchName("");
-    setAnchorEl(null);
-  };
-  const closeDialog = () => {
-    setDialogOpen(false);
-  };
-  const createSavedSearch = async (name: string, q: any) => {
-    await fetch("/api/searches/create", {
-      method: "POST",
-      body: JSON.stringify({ name, query: q }),
-    });
-    await updateSearches();
-    handleClose();
-    closeDialog();
-  };
-
-  const deleteSavedSearch = async (name: string) => {
-    await fetch("/api/searches/delete", {
-      method: "POST",
-      body: JSON.stringify({ name }),
-    });
-    await updateSearches();
-    closeDialog();
-  };
-
-  const updateSearch = (name: string) => {
-    handleClose();
-    closeDialog();
-    const found: any = savedSearches.find(
-      (search: any) => search.name === name,
-    );
-    replaceQuery(found?.query);
-  };
-
-  const clearSearch = () => clearQuery();
-
-  const open = Boolean(anchorEl);
-  const elementID = open ? "simple-popover" : undefined;
-  const [queryExpanded, setQueryExpanded] = useState(true);
-  const [resultsExpanded, setResultsExpanded] = useState(false);
-  const minHeight = "42px";
-  const maxHeight = "42px";
-  const summaryStyles = {
-    backgroundColor: leafcutterElectricBlue,
-    height: "14px",
-    minHeight,
-    maxHeight,
-    "&.Mui-expanded": {
-      minHeight,
-      maxHeight,
-    },
-  };
-  const buttonStyles = {
-    fontFamily: "Poppins, sans-serif",
-    fontWeight: 700,
-    color: `${white} !important`,
-    borderRadius: 999,
-    backgroundColor: leafcutterElectricBlue,
-    padding: "6px 30px",
-    margin: "20px 0px",
-    whiteSpace: "nowrap",
-  };
-
-  return (
-    <Box>
-      <Dialog open={dialogOpen}>
-        <Box sx={{ pt: 3, pl: 3, pr: 3 }}>
-          <Grid container direction="column" spacing={2}>
-            <Grid item>
-              <TextField
-                size="small"
-                placeholder="Saved search name"
-                sx={{ width: 400 }}
-                onChange={(e) => setSavedSearchName(e.target.value)}
-              />
-            </Grid>
-            <Grid item container direction="row" justifyContent="space-between">
-              <Grid item>
-                <Button sx={buttonStyles} onClick={closeDialog}>
-                  Cancel
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  sx={buttonStyles}
-                  onClick={async () => {
-                    await createSavedSearch(savedSearchName, query);
-                  }}
-                >
-                  Save
-                </Button>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Box>
-      </Dialog>
-      <Grid
-        container
-        direction="row"
-        sx={{ mt: 4, mb: 2 }}
-        justifyContent="space-between"
-      >
-        <Grid item>
-          <Tooltip
-            title={t("searchAndCreateTitle")}
-            description={t("searchAndCreateDescription")}
-            tooltipID="searchCreate"
-            nextURL="/create?tooltip=categories"
-            previousURL="/?tooltip=profile"
-            placement="top"
-          >
-            <Box sx={h4}>Search Criteria</Box>
-          </Tooltip>
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            onClick={() =>
-              setDatasource(
-                datasource === "leafcutter" ? "zammad" : "leafcutter",
-              )
-            }
-            sx={{
-              backgroundColor: cdrLinkOrange,
-              textTransform: "none",
-              fontStyle: "italic",
-              fontWeight: "bold",
-              mr: 2,
-            }}
-          >
-            {datasource === "zammad" ? "Switch to Global" : "Switch to Local"}
-          </Button>
-
-          <Button
-            aria-describedby={elementID}
-            variant="contained"
-            onClick={showSavedSearchPopup}
-            sx={{
-              backgroundColor: cdrLinkOrange,
-              textTransform: "none",
-              fontStyle: "italic",
-              fontWeight: "bold",
-            }}
-          >
-            <SavedSearchIcon sx={{ mr: 1 }} />
-            {t("savedSearch")}
-          </Button>
-          <Button
-            variant="contained"
-            onClick={clearSearch}
-            sx={{
-              backgroundColor: leafcutterElectricBlue,
-              textTransform: "none",
-              fontWeight: "bold",
-              ml: 3,
-            }}
-          >
-            {t("clear")}
-          </Button>
-          <Popover
-            id={elementID}
-            open={open}
-            anchorEl={anchorEl}
-            onClose={handleClose}
-            anchorOrigin={{
-              vertical: "bottom",
-              horizontal: "right",
-            }}
-            transformOrigin={{ vertical: "top", horizontal: "right" }}
-          >
-            <Paper>
-              <MenuList>
-                <MenuItem
-                  onClick={() => {
-                    handleClose();
-                    setDialogOpen(true);
-                  }}
-                >
-                  <ListItemIcon>
-                    <AddCircleOutlineIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText>{t("saveCurrentSearch")}</ListItemText>
-                </MenuItem>
-                <Divider />
-                {savedSearches.map?.((savedSearch: any) => (
-                  <MenuItem
-                    key={savedSearch.name}
-                    onClick={() => updateSearch(savedSearch.name)}
-                  >
-                    <ListItemIcon />
-                    <ListItemText>{savedSearch.name}</ListItemText>
-                    <Box
-                      onClick={() => deleteSavedSearch(savedSearch.name)}
-                      sx={{ p: 0, m: 0, zIndex: 100 }}
-                    >
-                      <RemoveCircleIcon
-                        sx={{
-                          color: cdrLinkOrange,
-                          p: 0,
-                          m: 0,
-                          ":hover": { color: leafcutterElectricBlue },
-                        }}
-                      />
-                    </Box>
-                  </MenuItem>
-                ))}
-              </MenuList>
-            </Paper>
-          </Popover>
-        </Grid>
-      </Grid>
-      <QueryBuilder />
-      <Accordion
-        expanded={queryExpanded}
-        onClick={() => setQueryExpanded(!queryExpanded)}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
-          sx={summaryStyles}
-        >
-          <Box sx={{ ...h4, color: white }}>{t("query")}</Box>
-        </AccordionSummary>
-        <AccordionDetails sx={{ p: 2 }}>
-          <QueryText />
-        </AccordionDetails>
-      </Accordion>
-      <Accordion
-        sx={{ mt: 2 }}
-        expanded={resultsExpanded}
-        onClick={() => setResultsExpanded(!resultsExpanded)}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
-          sx={summaryStyles}
-        >
-          <Box sx={{ ...h4, color: white }}>{`${t(
-            "results",
-          )} (${foundCount})`}</Box>
-        </AccordionSummary>
-        <Tooltip
-          title={`${t("queryResultsCardTitle")}`}
-          description={t("queryResultsCardDescription")}
-          tooltipID="queryResults"
-          placement="top"
-          previousURL="/create?tooltip=advancedOptions"
-          nextURL="/create?tooltip=viewResults"
-        >
-          <AccordionDetails sx={{ p: 2, pb: 4 }}>
-            <LiveDataViewer />
-          </AccordionDetails>
-        </Tooltip>
-      </Accordion>
-      <Tooltip
-        title={t("viewResultsCardTitle")}
-        description={t("viewResultsCardDescription")}
-        tooltipID="viewResults"
-        placement="top"
-        previousURL="/create?tooltip=queryResults"
-      >
-        <Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectVisualization")}:</Box>
-      </Tooltip>
-      <Box display="grid" gridTemplateColumns="repeat(5, 1fr)" gap={2}>
-        {Object.keys(visualizations).map((key: string) => (
-          <VisualizationSelectCard
-            key={key}
-            visualizationType={key}
-            // @ts-ignore
-            title={visualizations[key].name}
-            enabled={
-              selectedVisualizationType === key ||
-              selectedVisualizationType === null
-            }
-            selected={selectedVisualizationType === key}
-            toggleSelected={toggleSelectedVisualizationType}
-          />
-        ))}
-      </Box>
-      <Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectFieldVisualize")}:</Box>
-      <Box
-        display="grid"
-        gridTemplateColumns="repeat(5, 1fr)"
-        gap={2}
-        sx={{ minHeight: 200 }}
-      >
-        {templates
-          .filter(
-            (template: any) => template.type === selectedVisualizationType,
-          )
-          .map((template: any) => {
-            const { id, type, title, description } = template;
-            const cleanTitle = title
-              .replace("Templated", "")
-              // @ts-ignore
-              .replace(visualizations[type].name, "");
-            const metricType = cleanTitle.replace(/\s/g, "").toLowerCase();
-            return (
-              <MetricSelectCard
-                key={id}
-                visualizationID={id}
-                metricType={metricType}
-                title={`By ${cleanTitle}`}
-                description={description}
-                enabled
-              />
-            );
-          })}
-      </Box>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/VisualizationCard.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import { Grid, Card, Box } from "@mui/material";
-import Iframe from "react-iframe";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { VisualizationDetailDialog } from "./VisualizationDetailDialog";
-
-interface VisualizationCardProps {
-  id: string;
-  title: string;
-  description: string;
-  url: string;
-}
-
-export const VisualizationCard: FC<VisualizationCardProps> = ({
-  id,
-  title,
-  description,
-  url,
-}) => {
-  const [open, setOpen] = useState(false);
-  const closeDialog = () => setOpen(false);
-  const {
-    typography: { h4, p },
-    colors: { leafcutterLightBlue, leafcutterElectricBlue },
-  } = useLeafcutterContext();
-  const finalURL = `${process.env.NEXT_PUBLIC_LEAFCUTTER_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
-
-  return (
-    <>
-      <Grid item xs={6}>
-        <Card
-          elevation={0}
-          sx={{
-            border: `1px solid ${leafcutterElectricBlue}`,
-            borderRadius: "10px",
-            backgroundColor: leafcutterLightBlue,
-            p: 2,
-            cursor: "pointer",
-          }}
-          onClick={() => setOpen(true)}
-        >
-          <Box
-            sx={{
-              backgroundColor: leafcutterLightBlue,
-              pointerEvents: "none",
-              borderRadius: "8px",
-              overflow: "hidden",
-              p: 1,
-            }}
-          >
-            <Iframe url={finalURL} height="300" width="100%" frameBorder={0} />
-          </Box>
-          <Box component="h4" sx={{ ...h4, mt: 2, mb: 2 }}>
-            {title}
-          </Box>
-          <Box component="p" sx={{ ...p, mt: 2, mb: 2 }}>
-            {description}
-          </Box>
-        </Card>
-      </Grid>
-      {open ? (
-        <VisualizationDetailDialog
-          id={id}
-          title={title}
-          description={description}
-          url={url}
-          closeDialog={closeDialog}
-          editing={false}
-        />
-      ) : null}
-    </>
-  );
-};

packages/leafcutter-ui/components/VisualizationDetail.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { Box } from "@mui/material";
-import Iframe from "react-iframe";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface VisualizationDetailProps {
-  id: string;
-  title: string;
-  description: string;
-  url: string;
-  editing: boolean;
-}
-
-export const VisualizationDetail: FC<VisualizationDetailProps> = ({
-  id,
-  title,
-  description,
-  url,
-  editing,
-}) => {
-  const {
-    colors: { mediumGray },
-    typography: { h4, p },
-  } = useLeafcutterContext();
-  const finalURL = `${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
-  console.log({ finalURL });
-  return (
-    <Box key={id}>
-      {!editing ? (
-        <Box sx={{ borderBottom: `1px solid ${mediumGray}`, mb: 2 }}>
-          <Box sx={{ ...h4, mt: 1, mb: 1 }}>{title}</Box>
-          <Box sx={{ ...p, mt: 0, mb: 2, fontStyle: "oblique" }}>
-            {description}
-          </Box>
-        </Box>
-      ) : null}
-      <Box sx={{ borderBottom: `1px solid ${mediumGray}`, pb: 3 }}>
-        <Iframe url={finalURL} height="500px" width="100%" frameBorder={0} />
-      </Box>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/VisualizationDetailDialog.tsx

@@ -1,157 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-// import Link from "next/link";
-import {
-  Grid,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  TextField,
-} from "@mui/material";
-import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-import { VisualizationDetail } from "./VisualizationDetail";
-
-interface VisualizationDetailDialogProps {
-  id: string;
-  title: string;
-  description: string;
-  url: string;
-  closeDialog: any;
-  editing: boolean;
-}
-
-export const VisualizationDetailDialog: FC<VisualizationDetailDialogProps> = ({
-  id,
-  title,
-  description,
-  url,
-  closeDialog,
-  editing,
-}) => {
-  const t = useTranslate();
-  const [editedTitle, setEditedTitle] = useState(title);
-  const [editedDescription, setEditedDescription] = useState(description);
-  const {
-    colors: { leafcutterElectricBlue, leafcutterLightBlue, white, almostBlack },
-    query,
-  } = useLeafcutterContext();
-
-  const deleteAndClose = async () => {
-    await fetch(`/api/visualizations/delete`, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ id }),
-    });
-
-    closeDialog();
-  };
-
-  const saveAndClose = async () => {
-    const updateParams = {
-      id,
-      title: editedTitle,
-      description: editedDescription,
-      query,
-    };
-    await fetch(`/api/visualizations/update`, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(updateParams),
-    });
-
-    closeDialog();
-  };
-
-  const buttonStyles = {
-    fontSize: 14,
-    borderRadius: 500,
-    color: white,
-    backgroundColor: leafcutterElectricBlue,
-    fontWeight: "bold",
-    textTransform: "uppercase",
-    pl: 3,
-    pr: 3,
-    ":hover": {
-      backgroundColor: leafcutterLightBlue,
-      color: almostBlack,
-      opacity: 0.8,
-    },
-  };
-
-  return (
-    <Dialog open maxWidth="xl">
-      <DialogContent sx={{ minWidth: 800 }}>
-        {editing && (
-          <Grid direction="column" container rowGap={2} sx={{ mb: 3 }}>
-            <Grid item>
-              <TextField
-                value={editedTitle}
-                onChange={(e) => setEditedTitle(e.target.value)}
-                label={t("title")}
-                size="small"
-                fullWidth
-              />
-            </Grid>
-            <Grid>
-              <TextField
-                value={editedDescription}
-                onChange={(e) => setEditedDescription(e.target.value)}
-                label={t("description")}
-                size="small"
-                fullWidth
-              />
-            </Grid>
-          </Grid>
-        )}
-        <VisualizationDetail
-          id={id}
-          title={title}
-          description={description}
-          url={url}
-          editing={editing}
-        />
-      </DialogContent>
-      <DialogActions sx={{ p: 2.5, pt: 0 }}>
-        <Grid container direction="row-reverse" justifyContent="space-between">
-          {!editing && (
-            <Grid item>
-              <Button sx={buttonStyles} onClick={closeDialog} size="small">
-                {t("done")}
-              </Button>
-            </Grid>
-          )}
-          {!editing && (
-            <Grid item>
-              <Button sx={buttonStyles} onClick={deleteAndClose} size="small">
-                {t("delete")}
-              </Button>
-            </Grid>
-          )}
-          {editing && (
-            <Grid item>
-              <Button sx={buttonStyles} onClick={saveAndClose} size="small">
-                {t("save")}
-              </Button>
-            </Grid>
-          )}
-          {editing && (
-            <Grid item>
-              <Button sx={buttonStyles} onClick={deleteAndClose} size="small">
-                {t("cancel")}
-              </Button>
-            </Grid>
-          )}
-        </Grid>
-      </DialogActions>
-    </Dialog>
-  );
-};

packages/leafcutter-ui/components/VisualizationSelectCard.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Image from "next/legacy/image";
-import { Card, Grid } from "@mui/material";
-import horizontalBar from "../images/horizontal-bar.svg";
-import horizontalBarStacked from "../images/horizontal-bar-stacked.svg";
-import verticalBar from "../images/vertical-bar.svg";
-import verticalBarStacked from "../images/vertical-bar-stacked.svg";
-import pieDonut from "../images/pie-donut.svg";
-import line from "../images/line.svg";
-import lineStacked from "../images/line-stacked.svg";
-import dataTable from "../images/data-table.svg";
-import metric from "../images/metric.svg";
-import tagCloud from "../images/tag-cloud.svg";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-interface VisualizationSelectCardProps {
-  visualizationType: string;
-  title: string;
-  enabled: boolean;
-  selected: boolean;
-  toggleSelected: any;
-}
-
-export const VisualizationSelectCard: FC<VisualizationSelectCardProps> = ({
-  visualizationType,
-  title,
-  enabled,
-  selected,
-  toggleSelected,
-}) => {
-  const {
-    typography: { small },
-    colors: {
-      white,
-      leafcutterElectricBlue,
-      leafcutterLightBlue,
-      cdrLinkOrange,
-    },
-  } = useLeafcutterContext();
-  const images: any = {
-    horizontalBar,
-    horizontalBarStacked,
-    verticalBar,
-    verticalBarStacked,
-    line,
-    lineStacked,
-    pieDonut,
-    dataTable,
-    metric,
-    tagCloud,
-    unknown: line,
-  };
-
-  let backgroundColor = leafcutterElectricBlue;
-  if (!enabled) {
-    backgroundColor = leafcutterLightBlue;
-  } else if (selected) {
-    backgroundColor = cdrLinkOrange;
-  }
-
-  return (
-    <Card
-      sx={{
-        height: "100px",
-        backgroundColor,
-        borderRadius: "10px",
-        padding: "10px",
-        opacity: enabled ? 1 : 0.5,
-        cursor: enabled ? "pointer" : "default",
-        "&:hover": {
-          backgroundColor: enabled ? cdrLinkOrange : white,
-        },
-      }}
-      elevation={enabled ? 2 : 0}
-      onClick={() => toggleSelected(visualizationType)}
-    >
-      <Grid
-        direction="column"
-        container
-        justifyContent="space-around"
-        alignContent="center"
-        alignItems="center"
-        wrap="nowrap"
-        sx={{ height: "100%" }}
-        spacing={0}
-      >
-        <Grid
-          item
-          sx={{
-            ...small,
-            textAlign: "center",
-            color: enabled ? white : leafcutterElectricBlue,
-          }}
-        >
-          {title}
-        </Grid>
-        <Grid item>
-          <Image
-            src={images[visualizationType]}
-            alt=""
-            width={35}
-            height={35}
-          />
-        </Grid>
-      </Grid>
-    </Card>
-  );
-};

packages/leafcutter-ui/components/Welcome.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { Box, Grid } from "@mui/material";
-import { useSession } from "next-auth/react";
-import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-export const Welcome = () => {
-  const t = useTranslate();
-  const { data: session } = useSession();
-  /*
-  const {
-    user: { name },
-  } = session as any;
-  */
-  const name = "Test User";
-  const {
-    colors: { white, leafcutterElectricBlue },
-    typography: { h1, h4, p },
-  } = useLeafcutterContext();
-
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        backgroundColor: leafcutterElectricBlue,
-        color: white,
-        p: 4,
-        borderRadius: "10px",
-        mb: "22px",
-      }}
-    >
-      <Grid container direction="row" spacing={3}>
-        {/*       <Grid
-          item
-          container
-          xs={3}
-          direction="column"
-          justifyContent="flex-start"
-          alignItems="center"
-        >
-          <img src={image} alt={name} width="150px" />
-        </Grid> */}
-        <Grid item xs={12}>
-          <Box component="h1" sx={{ ...h1, mb: 1 }}>
-            {t("dashboardTitle")}
-          </Box>
-          <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>{`${t(
-            "welcome",
-          )}, ${name?.split(" ")[0]}! 👋`}</Box>
-          <Box component="p" sx={{ ...p }}>
-            {t("dashboardDescription")}
-          </Box>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};

packages/leafcutter-ui/components/WelcomeDialog.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import { Box, Grid, Dialog, Button } from "@mui/material";
-import { useRouter, useSearchParams } from "next/navigation";
-// import { useSession } from "next-auth/react";
-// import { useTranslate } from "react-polyglot";
-import { useLeafcutterContext } from "./LeafcutterProvider";
-
-export const WelcomeDialog = () => {
-  // const t = useTranslate();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  // const { data: session } = useSession();
-  // const { user } = session;
-  const {
-    colors: { white, leafcutterElectricBlue },
-    typography: { h1, h6, p },
-  } = useLeafcutterContext();
-  const activeTooltip = searchParams?.get("tooltip")?.toString();
-  const open = activeTooltip === "welcome";
-
-  return (
-    <Dialog open={open} maxWidth="md" sx={{ zIndex: 2000 }}>
-      <Box sx={{ p: 6, pt: 6 }}>
-        <Grid container direction="column" spacing={3}>
-          <Grid item container direction="row" justifyContent="center">
-            <Grid
-              item
-              sx={{ width: 500, height: 300, backgroundColor: "black" }}
-            >
-              {/*      <iframe
-                width="500"
-                height="300"
-                src="https://www.youtube-nocookie.com/embed/-iKFBXAlmEM"
-                title="CDR Link intro"
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-              /> */}
-            </Grid>
-          </Grid>
-          <Grid item>
-            <Box
-              sx={{
-                ...h1,
-                color: leafcutterElectricBlue,
-                textAlign: "center",
-                fontSize: 32,
-              }}
-            >
-              Welcome to Leafcutter!
-            </Box>
-            <Box
-              sx={{ ...h6, color: leafcutterElectricBlue, pt: 1, fontSize: 16 }}
-            >
-              Let&apos;s get started.
-            </Box>
-          </Grid>
-          <Grid item container spacing={3}>
-            <Grid item>
-              <Box sx={{ ...p, textAlign: "center" }}>
-                Leafcutter is a secure platform for aggregating, displaying, and
-                sharing data on digital security threats and attacks facing
-                global civil society. When creating the app we had a couple of
-                people in mind; Incident responders, threat analysts, security
-                trainers, and security service providers.
-              </Box>
-            </Grid>
-            <Grid item>
-              <Box sx={{ ...p, textAlign: "center" }}>
-                Leafcutter onboarding is meant to help you navigate, build
-                queries and visualizations, and walk you through the best ways
-                to know and use the Leafcutter app. Ready?
-              </Box>
-            </Grid>
-          </Grid>
-          <Grid
-            item
-            container
-            direction="row"
-            justifyContent="space-around"
-            sx={{ mt: 3 }}
-          >
-            <Grid item>
-              <Button
-                sx={{
-                  fontSize: 14,
-                  minWidth: 300,
-                  borderRadius: 500,
-                  color: leafcutterElectricBlue,
-                  border: `2px solid ${leafcutterElectricBlue}`,
-                  fontWeight: "bold",
-                  textTransform: "uppercase",
-                  pl: 6,
-                  pr: 5,
-                  ":hover": {
-                    backgroundColor: leafcutterElectricBlue,
-                    color: white,
-                    opacity: 0.8,
-                  },
-                }}
-                onClick={() => {
-                  router.push(`/`);
-                }}
-              >
-                I&apos;ll explore on my own
-              </Button>
-            </Grid>
-            <Grid item>
-              <Button
-                sx={{
-                  fontSize: 14,
-                  minWidth: 300,
-                  borderRadius: 500,
-                  backgroundColor: leafcutterElectricBlue,
-                  color: white,
-                  border: `2px solid ${leafcutterElectricBlue}`,
-                  fontWeight: "bold",
-                  textTransform: "uppercase",
-                  pl: 6,
-                  pr: 5,
-                  ":hover": {
-                    backgroundColor: leafcutterElectricBlue,
-                    color: white,
-                    opacity: 0.8,
-                  },
-                }}
-                onClick={() => {
-                  router.push(`/?tooltip=navigation`);
-                }}
-              >
-                Start the guide
-              </Button>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Box>
-    </Dialog>
-  );
-};

packages/leafcutter-ui/config/visualizationMap.json

@@ -1,31 +0,0 @@
-{
-  "visualizations": {
-    "horizontalBar": {
-      "name": "Horizontal Bar"
-    },
-    "verticalBar": {
-      "name": "Vertical Bar"
-    },
-    "line": {
-      "name": "Line"
-    },
-    "pieDonut": {
-      "name": "Pie"
-    },
-    "dataTable": {
-      "name": "Data Table"
-    },
-    "metric": {
-      "name": "Metric"
-    },
-    "tagCloud": {
-      "name": "Tag Cloud"
-    }
-  },
-  "fields": {
-    "incidentType": ["horizontalBar"],
-    "targetedGroup": ["horizontalBar"],
-    "impactedTechnology": ["horizontalBar"],
-    "region": ["horizontalBar"]
-  }
-}

packages/leafcutter-ui/config/visualizations/dataTable.json

@@ -1,38 +0,0 @@
-{
-  "title": "DataTable",
-  "type": "table",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "incident.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 10,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "bucket"
-    }
-  ],
-  "params": {
-    "perPage": 10,
-    "showPartialRows": false,
-    "showMetricsAtAllLevels": false,
-    "sort": { "columnIndex": null, "direction": null },
-    "showTotal": false,
-    "totalFunc": "sum",
-    "percentageCol": ""
-  }
-}

packages/leafcutter-ui/config/visualizations/horizontalBar.json

@@ -1,93 +0,0 @@
-{
-  "title": "",
-  "type": "horizontal_bar",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "incident.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": true,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "histogram",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 200
-        },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 75,
-          "filter": true,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "histogram",
-        "mode": "normal",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-1",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": {},
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/horizontalBarStacked.json

@@ -1,94 +0,0 @@
-{
-  "title": "BarStacked",
-  "type": "horizontal_bar",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "actor.keyword",
-        "orderBy": "_key",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "split"
-    }
-  ],
-  "params": {
-    "type": "histogram",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 200
-        },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 75,
-          "filter": true,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "histogram",
-        "mode": "stacked",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-1",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": {},
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    },
-    "row": true
-  }
-}

packages/leafcutter-ui/config/visualizations/line.json

@@ -1,89 +0,0 @@
-{
-  "title": "Line",
-  "type": "line",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "technology.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "line",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": { "show": true, "filter": true, "truncate": 100 },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "line",
-        "mode": "normal",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-1",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "interpolate": "linear",
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": {},
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/lineStacked.json

@@ -1,105 +0,0 @@
-{
-  "title": "LineStacked",
-  "type": "line",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "technology.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "line",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": { "show": true, "filter": true, "truncate": 100 },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      },
-      {
-        "id": "ValueAxis-2",
-        "name": "RightAxis-1",
-        "type": "value",
-        "position": "right",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "line",
-        "mode": "stacked",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-2",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "interpolate": "step-after",
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": {},
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/metric.json

@@ -1,50 +0,0 @@
-{
-  "title": "Metric",
-  "type": "metric",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": { "customLabel": "#" },
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "technology.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "group"
-    }
-  ],
-  "params": {
-    "addTooltip": true,
-    "addLegend": false,
-    "type": "metric",
-    "metric": {
-      "percentageMode": false,
-      "useRanges": false,
-      "colorSchema": "Green to Red",
-      "metricColorMode": "None",
-      "colorsRange": [{ "from": 0, "to": 10000 }],
-      "labels": { "show": true },
-      "invertColors": false,
-      "style": {
-        "bgFill": "#000",
-        "bgColor": false,
-        "labelColor": false,
-        "subText": "",
-        "fontSize": 60
-      }
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/pieDonut.json

@@ -1,42 +0,0 @@
-{
-  "title": "Pie",
-  "type": "pie",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "technology.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": true,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "pie",
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "isDonut": true,
-    "labels": {
-      "show": false,
-      "values": true,
-      "last_level": true,
-      "truncate": 100
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/tagCloud.json

@@ -1,36 +0,0 @@
-{
-  "title": "Cloud",
-  "type": "tagcloud",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "incident.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "scale": "linear",
-    "orientation": "single",
-    "minFontSize": 18,
-    "maxFontSize": 72,
-    "showLabel": true
-  }
-}

packages/leafcutter-ui/config/visualizations/verticalBar.json

@@ -1,88 +0,0 @@
-{
-  "title": "VerticalBar",
-  "type": "histogram",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "actor.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 10,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "histogram",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": { "show": true, "filter": true, "truncate": 100 },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "histogram",
-        "mode": "normal",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-1",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": { "show": false },
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    }
-  }
-}

packages/leafcutter-ui/config/visualizations/verticalBarStacked.json

@@ -1,88 +0,0 @@
-{
-  "title": "VerticalBarStacked",
-  "type": "histogram",
-  "aggs": [
-    {
-      "id": "1",
-      "enabled": true,
-      "type": "count",
-      "params": {},
-      "schema": "metric"
-    },
-    {
-      "id": "2",
-      "enabled": true,
-      "type": "terms",
-      "params": {
-        "field": "incident.keyword",
-        "orderBy": "1",
-        "order": "desc",
-        "size": 5,
-        "otherBucket": false,
-        "otherBucketLabel": "Other",
-        "missingBucket": false,
-        "missingBucketLabel": "Missing"
-      },
-      "schema": "segment"
-    }
-  ],
-  "params": {
-    "type": "histogram",
-    "grid": { "categoryLines": false },
-    "categoryAxes": [
-      {
-        "id": "CategoryAxis-1",
-        "type": "category",
-        "position": "bottom",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear" },
-        "labels": { "show": true, "filter": true, "truncate": 100 },
-        "title": {}
-      }
-    ],
-    "valueAxes": [
-      {
-        "id": "ValueAxis-1",
-        "name": "LeftAxis-1",
-        "type": "value",
-        "position": "left",
-        "show": true,
-        "style": {},
-        "scale": { "type": "linear", "mode": "normal" },
-        "labels": {
-          "show": true,
-          "rotate": 0,
-          "filter": false,
-          "truncate": 100
-        },
-        "title": { "text": "Count" }
-      }
-    ],
-    "seriesParams": [
-      {
-        "show": true,
-        "type": "histogram",
-        "mode": "stacked",
-        "data": { "label": "Count", "id": "1" },
-        "valueAxis": "ValueAxis-1",
-        "drawLinesBetweenPoints": true,
-        "lineWidth": 2,
-        "showCircles": true
-      }
-    ],
-    "addTooltip": true,
-    "addLegend": true,
-    "legendPosition": "right",
-    "times": [],
-    "addTimeMarker": false,
-    "labels": { "show": false },
-    "thresholdLine": {
-      "show": false,
-      "value": 10,
-      "width": 1,
-      "style": "full",
-      "color": "#E7664C"
-    }
-  }
-}

packages/leafcutter-ui/images.d.ts

@@ -1,16 +0,0 @@
-declare module "*.jpg" {
-  const value: any;
-  export default value;
-}
-declare module "*.jpeg" {
-  const value: any;
-  export default value;
-}
-declare module "*.svg" {
-  const value: any;
-  export default value;
-}
-declare module "*.png" {
-  const value: any;
-  export default value;
-}

packages/leafcutter-ui/images/data-table.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
-    <path fill="white"
-        d="M16 3v11a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2h12a2 2 0 012 2v1zm-1 0V2a1 1 0 00-1-1H2a1 1 0 00-1 1v1h14zm0 1H1v10a1 1 0 001 1h12a1 1 0 001-1V4zM4.5 6a.5.5 0 010 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 010-1h6zm-9 3a.5.5 0 010 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 010-1h6zm-9 3a.5.5 0 110 1H2.496a.5.5 0 110-1H4.5zm9 0a.5.5 0 110 1h-6a.5.5 0 110-1h6z">
-    </path>
-</svg>

packages/leafcutter-ui/images/horizontal-bar-stacked.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-    class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true">
-    <path fill="white"
-        d="M.5 0a.5.5 0 01.5.5v14a.5.5 0 11-1 0V.5A.5.5 0 01.5 0zm13 1a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H9v3h2.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5h-9a.5.5 0 110-1H9v-3H2.5a.5.5 0 010-1H6V6H2.5a.5.5 0 010-1H10V2H2.5a.5.5 0 010-1h11z">
-    </path>
-</svg>

packages/leafcutter-ui/images/horizontal-bar.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
-    <path fill="white"
-        d="M8.5 10h-6a.5.5 0 010-1H8V6H2.5a.5.5 0 010-1H13V2H2.5a.5.5 0 010-1h11a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H9v3h2.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5h-9a.5.5 0 110-1H11v-3H8.5zM0 .5a.5.5 0 111 0v14a.5.5 0 11-1 0V.5z">
-    </path>
-</svg>

packages/leafcutter-ui/images/line-stacked.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
-    <path fill="white"
-        d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z">
-    </path>
-</svg>

packages/leafcutter-ui/images/line.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-    class="euiIcon euiIcon--large euiIcon--secondary" focusable="false" role="img" aria-hidden="true">
-    <path fill="white"
-        d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z">
-    </path>
-</svg>