wip: take 2 of adding selectable status

Author: thomaswhyyou

packages/client/src/clients/guide/client.ts

@@ -46,6 +46,7 @@ import {
   SelectFilterParams,
   SelectGuideOpts,
   SelectGuidesOpts,
+  SelectQueryParams,
   StepMessageState,
   StoreState,
   TargetParams,
@@ -175,7 +176,7 @@ const select = (state: StoreState, filters: SelectFilterParams = {}) => {
     result.set(index, guide);
   }
 
-  result.metadata = { guideGroup: defaultGroup };
+  result.metadata = { guideGroup: defaultGroup, filters };
   return result;
 };
 
@@ -617,7 +618,22 @@ export class KnockGuideClient {
       `[Guide] .selectGuides (filters: ${formatFilters(filters)}; state: ${formatState(state)})`,
     );
 
-    const selectedGuide = this.selectGuide(state, filters, opts);
+    const selectedGuide = this.selectGuide(state, filters, {
+      ...opts,
+      // Do not record this selectGuide() query, since this is a short to check
+      // throttling, and we should be recording the actual selectGuides query
+      // (as needed).
+      recordSelectQuery: false,
+    });
+
+    // Record AFTER the selectGuide() query to ensure we have a group stage open
+    // to be able to record.
+    const { recordSelectQuery = !!state.debug?.debugging } = opts;
+    this.maybeRecordSelectQuery(
+      { ...filters, limit: "one" },
+      { ...opts, recordSelectQuery },
+    );
+
     if (!selectedGuide) {
       return [];
     }
@@ -657,32 +673,6 @@ export class KnockGuideClient {
       return undefined;
     }
 
-    const result = select(state, filters);
-
-    if (result.size === 0) {
-      this.knock.log("[Guide] Selection found zero result");
-      return undefined;
-    }
-
-    const [index, guide] = [...result][0]!;
-    this.knock.log(
-      `[Guide] Selection found: \`${guide.key}\` (total: ${result.size})`,
-    );
-
-    // If a guide ignores the group limit, then return immediately to render
-    // always.
-    if (guide.bypass_global_group_limit) {
-      this.knock.log(`[Guide] Returning the unthrottled guide: ${guide.key}`);
-      return guide;
-    }
-
-    // Check if inside the throttle window (i.e. throttled) and if so stop and
-    // return undefined unless explicitly given the option to include throttled.
-    if (!opts.includeThrottled && checkStateIfThrottled(state)) {
-      this.knock.log(`[Guide] Throttling the selected guide: ${guide.key}`);
-      return undefined;
-    }
-
     // Starting here to the end of this method represents the core logic of how
     // "group stage" works. It provides a mechanism for 1) figuring out which
     // guide components are about to render on a page, 2) determining which
@@ -716,6 +706,40 @@ export class KnockGuideClient {
       this.stage = this.openGroupStage(); // Assign here to make tsc happy
     }
 
+    // Must come AFTER we ensure a group stage exists, so we can record select
+    // queries.
+    const { recordSelectQuery = !!state.debug?.debugging } = opts;
+    this.maybeRecordSelectQuery(
+      { ...filters, limit: "one" },
+      { ...opts, recordSelectQuery },
+    );
+
+    const result = select(state, filters);
+
+    if (result.size === 0) {
+      this.knock.log("[Guide] Selection found zero result");
+      return undefined;
+    }
+
+    const [index, guide] = [...result][0]!;
+    this.knock.log(
+      `[Guide] Selection found: \`${guide.key}\` (total: ${result.size})`,
+    );
+
+    // If a guide ignores the group limit, then return immediately to render
+    // always.
+    if (guide.bypass_global_group_limit) {
+      this.knock.log(`[Guide] Returning the unthrottled guide: ${guide.key}`);
+      return guide;
+    }
+
+    // Check if inside the throttle window (i.e. throttled) and if so stop and
+    // return undefined unless explicitly given the option to include throttled.
+    if (!opts.includeThrottled && checkStateIfThrottled(state)) {
+      this.knock.log(`[Guide] Throttling the selected guide: ${guide.key}`);
+      return undefined;
+    }
+
     switch (this.stage.status) {
       case "open": {
         this.knock.log(`[Guide] Adding to the group stage: ${guide.key}`);
@@ -744,6 +768,40 @@ export class KnockGuideClient {
     }
   }
 
+  private maybeRecordSelectQuery(
+    params: SelectQueryParams,
+    opts: SelectGuideOpts,
+  ) {
+    if (!opts.recordSelectQuery) return;
+    if (!this.stage || this.stage.status === "closed") return;
+    if (!params.key && !params.type) return;
+
+    // Deep merge into the query logs:
+    const queriesByKey = this.stage.queries.key || {};
+    if (params.key) {
+      queriesByKey[params.key] = {
+        ...(queriesByKey[params.key] || {}),
+        ...{ [params.limit]: opts },
+      };
+    }
+    const queriesByType = this.stage.queries.type || {};
+    if (params.type) {
+      queriesByType[params.type] = {
+        ...(queriesByType[params.type] || {}),
+        ...{ [params.limit]: opts },
+      };
+    }
+
+    this.stage = {
+      ...this.stage,
+      queries: { key: queriesByKey, type: queriesByType },
+    };
+  }
+
+  getStage() {
+    return this.stage;
+  }
+
   private openGroupStage() {
     this.knock.log("[Guide] Opening a new group stage");
 
@@ -759,6 +817,7 @@ export class KnockGuideClient {
     this.stage = {
       status: "open",
       ordered: [],
+      queries: {},
       timeoutId,
     };
 

packages/client/src/clients/guide/helpers.ts

@@ -9,11 +9,16 @@ import {
   StoreState,
 } from "./types";
 
+type SelectionResultMetadata = {
+  guideGroup: GuideGroupData;
+  filters: SelectFilterParams;
+};
+
 // Extends the map class to allow having metadata on it, which is used to record
 // the guide group context for the selection result (though currently only a
 // default global group is supported).
 export class SelectionResult<K = number, V = KnockGuide> extends Map<K, V> {
-  metadata: { guideGroup: GuideGroupData } | undefined;
+  metadata: SelectionResultMetadata | undefined;
 
   constructor() {
     super();
@@ -233,3 +238,18 @@ export const predicateUrlPatterns = (
     }
   }, predicateDefault);
 };
+
+// export type SelectorIdParams = {
+//   filters: SelectFilterParams;
+//   limit: "one" | "all";
+// };
+//
+// export const formatSelectorId = ({ filters, limit }: SelectorIdParams) => {
+//
+//   // change to query params format
+//   // key="asdf"&type
+//
+//
+//   // Keep this ordering: limit, key, and type.
+//   return JSON.stringify({ limit, key: filters.key, type: filters.type });
+// };

packages/client/src/clients/guide/index.ts

@@ -3,6 +3,7 @@ export {
   DEBUG_QUERY_PARAMS,
   checkActivatable,
 } from "./client";
+export { checkStateIfThrottled } from "./helpers";
 export type {
   KnockGuide,
   KnockGuideStep,
@@ -12,4 +13,5 @@ export type {
   SelectGuideOpts as KnockSelectGuideOpts,
   SelectGuidesOpts as KnockSelectGuidesOpts,
   StoreState as KnockGuideClientStoreState,
+  GroupStage as KnockGuideClientGroupStage,
 } from "./types";

packages/client/src/clients/guide/types.ts

@@ -231,6 +231,7 @@ export type SelectFilterParams = {
 
 export type SelectGuideOpts = {
   includeThrottled?: boolean;
+  recordSelectQuery?: boolean;
 };
 
 export type SelectGuidesOpts = SelectGuideOpts;
@@ -247,9 +248,24 @@ export type ConstructorOpts = {
   throttleCheckInterval?: number;
 };
 
+export type SelectQueryParams = SelectFilterParams & {
+  limit: "one" | "all";
+};
+
+type SelectGuideOptsByLimit = {
+  one?: SelectGuideOpts;
+  all?: SelectGuideOpts;
+};
+
+type RecordedSelectQueries = {
+  key?: Record<KnockGuide["key"], SelectGuideOptsByLimit>;
+  type?: Record<KnockGuide["key"], SelectGuideOptsByLimit>;
+};
+
 export type GroupStage = {
   status: "open" | "closed" | "patch";
   ordered: Array<KnockGuide["key"]>;
   resolved?: KnockGuide["key"];
+  queries: RecordedSelectQueries;
   timeoutId: ReturnType<typeof setTimeout> | null;
 };

packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx

@@ -26,6 +26,12 @@ const GuidesList = ({
   guides: InspectionResult["guides"];
   displayOption: DisplayOption;
 }) => {
+  console.log(
+    guides.map(
+      (g) => g.__typename !== "MissingGuide" && g.inspection.selectable,
+    ),
+  );
+
   return guides.map((guide, idx) => {
     if (
       displayOption === "current-page" &&