akanjs 3.0.0-alpha.60 → 3.0.0-alpha.62

package/constant/labelOf.ts

@@ -1,11 +1,20 @@
 /**
- * The one line a human scans for, derived from what the model already declared: the `text: "title"` search role
- * names exactly that field, so an agent-facing label costs no new declaration. Falls back to the conventional
- * `title`/`name` keys; the id is the caller's floor.
+ * The one line a human scans for. A model that writes its own `Light<Model>.label()` owns the answer, since
+ * display logic is the Light class's job; otherwise it is derived from what the model already declared — the
+ * `text: "title"` search role names exactly that field, so an agent-facing label costs no new declaration.
+ * Falls back to the conventional `title`/`name` keys; the id is the caller's floor.
  */
 export const labelOf = (model: unknown, value: unknown): string | undefined => {
   if (!value || typeof value !== "object") return undefined;
   const source = value as Record<string, unknown>;
+  const written = source.label;
+  if (typeof written === "function") {
+    try {
+      const label = (written as () => unknown).call(source);
+      if (typeof label === "string" && label) return label;
+    } catch {
+    }
+  }
   const paths = (model as { text?: { title?: Iterable<string> } } | null)?.text?.title;
   const titlePath = [...(paths ?? [])].find((path) => !path.includes(".") && !path.includes("["));
   for (const key of [titlePath, "title", "name"]) {

package/document/filterMeta.ts

@@ -275,7 +275,6 @@ interface ArgProps<Value = unknown> {
   nullable?: boolean;
   ref?: string;
   default?: Value;
-  renderOption?: (arg: never) => string;
 }
 export class FilterInfo<ArgNames extends string[] = any, Args extends any[] = any, Model = any> {
   readonly argNames: ArgNames = [] as unknown as ArgNames;

package/document/types.ts

@@ -21,7 +21,6 @@ export interface FilterArgProps {
   nullable?: boolean;
   ref?: string;
   default?: string | number | boolean | object | null | (() => string | number | boolean | object | null);
-  renderOption?: (value: never) => string;
   enum?: EnumInstance;
 }
 

package/fetch/client/httpClient.ts

@@ -115,8 +115,11 @@ export class HttpClient {
       const argValue = argMap.get(arg.name);
       if (argValue === null || argValue === undefined) return;
 
-      if (arg.refName === "Any") searchParams.set(arg.name, JSON.stringify(argValue));
-      else if (arg.arrDepth && Array.isArray(argValue))
+      if (arg.refName === "Any") {
+
+        const encoded = JSON.stringify(argValue);
+        if (encoded !== undefined) searchParams.set(arg.name, encoded);
+      } else if (arg.arrDepth && Array.isArray(argValue))
         argValue.forEach((value) => {
           searchParams.append(arg.name, String(value));
         });

package/fetch/fetchType/appliedReturn.type.ts

@@ -11,7 +11,11 @@ export type SliceMeta = {
 /** What the root slice takes: one of the model's declared filter queries, and the args that filter asks for. */
 export interface QuerySetting {
   queryKey: string;
-  args?: unknown[];
+  /**
+   * Read when the query is applied rather than when the setting is written, so a thunk keeps an arg relative to
+   * now — `() => [dayjs().subtract(1, "hour")]` — current at the moment the user asks for it.
+   */
+  args?: unknown[] | (() => unknown[]);
 }
 
 export type ServerInit<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.60",
+  "version": "3.0.0-alpha.62",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -216,7 +216,6 @@
     "postgres": "^3.4.9",
     "protobufjs": "^8.4.0",
     "react": "19.2.7",
-    "react-datepicker": "^9.1.0",
     "react-dom": "19.2.7",
     "react-icons": "^5.6.0",
     "react-refresh": "^0.18.0",
@@ -324,9 +323,6 @@
     "react": {
       "optional": true
     },
-    "react-datepicker": {
-      "optional": true
-    },
     "react-dom": {
       "optional": true
     },

package/types/constant/labelOf.d.ts

@@ -1,6 +1,7 @@
 /**
- * The one line a human scans for, derived from what the model already declared: the `text: "title"` search role
- * names exactly that field, so an agent-facing label costs no new declaration. Falls back to the conventional
- * `title`/`name` keys; the id is the caller's floor.
+ * The one line a human scans for. A model that writes its own `Light<Model>.label()` owns the answer, since
+ * display logic is the Light class's job; otherwise it is derived from what the model already declared — the
+ * `text: "title"` search role names exactly that field, so an agent-facing label costs no new declaration.
+ * Falls back to the conventional `title`/`name` keys; the id is the caller's floor.
  */
 export declare const labelOf: (model: unknown, value: unknown) => string | undefined;

package/types/document/filterMeta.d.ts

@@ -117,7 +117,6 @@ interface ArgProps<Value = unknown> {
     nullable?: boolean;
     ref?: string;
     default?: Value;
-    renderOption?: (arg: never) => string;
 }
 export declare class FilterInfo<ArgNames extends string[] = any, Args extends any[] = any, Model = any> {
     readonly argNames: ArgNames;

package/types/document/types.d.ts

@@ -17,7 +17,6 @@ export interface FilterArgProps {
     nullable?: boolean;
     ref?: string;
     default?: string | number | boolean | object | null | (() => string | number | boolean | object | null);
-    renderOption?: (value: never) => string;
     enum?: EnumInstance;
 }
 export type DocumentProjection<T> = Partial<Record<keyof T, boolean>>;

package/types/fetch/fetchType/appliedReturn.type.d.ts

@@ -9,7 +9,11 @@ export type SliceMeta = {
 /** What the root slice takes: one of the model's declared filter queries, and the args that filter asks for. */
 export interface QuerySetting {
     queryKey: string;
-    args?: unknown[];
+    /**
+     * Read when the query is applied rather than when the setting is written, so a thunk keeps an arg relative to
+     * now — `() => [dayjs().subtract(1, "hour")]` — current at the moment the user asks for it.
+     */
+    args?: unknown[] | (() => unknown[]);
 }
 export type ServerInit<RefName extends string, Light, Insight = any, QueryArgs = any, Filter extends FilterInstance = any, _CapitalizedRefName extends string = Capitalize<RefName>, _LightObj = GetStateObject<Light>, _InsightObj = GetStateObject<Insight>, _Sort = ExtractSort<Filter>> = SliceMeta & {
     [K in `${RefName}ObjList`]: _LightObj[];

package/types/ui/Data/Dashboard.d.ts

@@ -2,13 +2,18 @@ import type { QuerySetting, SliceMeta } from "akanjs/fetch";
 export interface DashboardProps<T extends string, State> {
     className?: string;
     summary: Record<string, unknown>;
+    /** The listing these tiles belong to. Kept so a caller names its target; the labels are app-level keys. */
     slice: SliceMeta;
     /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
     queryMap?: {
         [column: string]: QuerySetting;
     };
+    /** Applies one column's filter. Without it a mapped column still renders, but as a plain tile. */
+    onSelect?: (setting: QuerySetting, column: string) => void;
+    /** The filter key the listing is showing, so a tile stops looking active once the toolbar moves off it. */
+    queryKey?: string;
     columns?: string[];
     presents?: string[];
     hidePresents?: boolean;
 }
-export default function Dashboard<T extends string, State>({ className, summary, slice, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element | null;
+export default function Dashboard<T extends string, State>({ className, summary, queryMap, onSelect, queryKey, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element | null;

package/types/ui/Data/ListContainer.d.ts

@@ -34,9 +34,13 @@ export interface ListContainerProps<T extends string, State, Input, Full extends
     tools?: DataTool[] | ((modelList: Light[]) => DataTool[]);
     /** Per-row actions or action factory. */
     actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
-    renderDashboard?: ({ summary, hidePresents, }: {
+    renderDashboard?: ({ summary, hidePresents, onSelect, queryKey, }: {
         summary: Record<string, unknown>;
         hidePresents?: boolean;
+        /** Applies one summary column's filter to this listing, in place. */
+        onSelect: (setting: QuerySetting) => void;
+        /** The filter key the listing is showing right now. */
+        queryKey: string;
     }) => ReactNode;
     renderItem?: (props: ModelProps<any, any>) => ReactNode;
     renderTemplate?: (props: any) => ReactNode | null;

package/types/ui/Data/QueryMaker.d.ts

@@ -1,8 +1,50 @@
 import type { QuerySetting, SliceMeta } from "akanjs/fetch";
+import type { SerializedArg } from "akanjs/signal";
 interface QueryMakerProps {
     className?: string;
     slice: SliceMeta;
     query?: QuerySetting;
+    /** Where a completed filter goes. Defaults to the slice's own store, which is where a listing reads it. */
+    onApply?: (setting: ResolvedQuerySetting) => void;
 }
-export default function QueryMaker({ className, slice, query }: QueryMakerProps): import("react/jsx-runtime").JSX.Element | null;
+export interface QueryMakerState {
+    queryKeys: string[];
+    args: SerializedArg[];
+    setting: ResolvedQuerySetting;
+    selectKey: (queryKey: string) => void;
+    setArg: (idx: number, value: unknown) => void;
+    /** Applies a whole filter at once, for a control that stands for one — a dashboard tile, a saved view. */
+    applySetting: (setting: QuerySetting) => void;
+}
+/** A setting whose thunk has been read, which is the only form the store and the wire accept. */
+export interface ResolvedQuerySetting {
+    queryKey: string;
+    args: unknown[];
+}
+interface QueryMakerKeyProps {
+    className?: string;
+    selectClassName?: string;
+    slice: SliceMeta;
+    state: QueryMakerState;
+}
+interface QueryMakerArgsProps {
+    className?: string;
+    slice: SliceMeta;
+    state: QueryMakerState;
+}
+/** A filter's args may be written as a thunk, so that an arg relative to now is read when the filter is applied. */
+export declare const resolveQuerySetting: (setting: QuerySetting) => ResolvedQuerySetting;
+/** A filter the server will accept: every arg it declared as required has been given a value. */
+export declare const isReadyQuery: (args: SerializedArg[], values: unknown[]) => boolean;
+/**
+ * The filter a listing is showing, and the one write that applies it. Held in a hook rather than a component
+ * because the key select rides the toolbar while the args that key takes render under it — two places in the
+ * tree, one selection.
+ */
+export declare const useQueryMaker: ({ slice, query, onApply }: QueryMakerProps) => QueryMakerState;
+/** The filter picker. Sized for a toolbar, beside the sort and page-size selects. */
+export declare const QueryMakerKey: ({ className, selectClassName, slice, state }: QueryMakerKeyProps) => import("react/jsx-runtime").JSX.Element | null;
+/** What the picked filter asks for. Renders nothing for a filter that takes no arguments. */
+export declare const QueryMakerArgs: ({ className, slice, state }: QueryMakerArgsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default function QueryMaker({ className, slice, query, onApply }: QueryMakerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ui/Data/RefPicker.d.ts

@@ -0,0 +1,16 @@
+interface RefPickerProps {
+    className?: string;
+    /** The model this id points at, named by the filter arg's `ref`. */
+    refName: string;
+    value: string | null;
+    onChange: (id: string | null) => void;
+}
+/**
+ * Picks one row of a referenced model instead of asking for its hex id. Rows are held here rather than in the
+ * ref model's store: that store is a singleton, so a picker loading into it would overwrite whatever listing of
+ * the same model is already on the screen — and a picker opened from inside a picker would overwrite itself.
+ *
+ * The search is the ref model's own root slice, which is Admin-guarded, so this belongs to admin surfaces.
+ */
+export default function RefPicker({ className, refName, value, onChange }: RefPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/types/ui/Data/index.d.ts

@@ -6,5 +6,6 @@ export declare const Data: {
     ListContainer: typeof import("./ListContainer.d.ts").default;
     Pagination: typeof import("./Pagination.d.ts").default;
     QueryMaker: typeof import("./QueryMaker.d.ts").default;
+    RefPicker: typeof import("./RefPicker.d.ts").default;
     TableList: typeof import("./TableList.d.ts").default;
 };

package/types/ui/Data/index_.d.ts

@@ -6,3 +6,4 @@ export declare const ListContainer: typeof import("./ListContainer.d.ts").defaul
 export declare const Pagination: typeof import("./Pagination.d.ts").default;
 export declare const TableList: typeof import("./TableList.d.ts").default;
 export declare const QueryMaker: typeof import("./QueryMaker.d.ts").default;
+export declare const RefPicker: typeof import("./RefPicker.d.ts").default;

package/types/ui/DatePicker.d.ts

@@ -1,37 +1,41 @@
 import { type Dayjs } from "akanjs/base";
 export interface DatePickerProps {
+    className?: string;
     value?: Dayjs | null;
     onChange: (value: Dayjs | null) => void;
     showTime?: boolean;
-    format?: string;
-    timeIntervals?: number;
+    /** Earliest selectable value. The browser enforces it. */
+    min?: Dayjs | null;
+    /** Latest selectable value. The browser enforces it. */
+    max?: Dayjs | null;
+    /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
     disabledDate?: (date: Dayjs) => boolean | null | undefined;
-    className?: string;
-    placement?: "top" | "bottom" | "left" | "right";
     defaultValue?: Dayjs;
 }
 export interface RangePickerProps {
+    className?: string;
     value: [Dayjs | null, Dayjs | null];
     onChange: (value: [Dayjs | null, Dayjs | null]) => void;
-    format?: string;
     showTime?: boolean;
-    timeIntervals?: number;
+    /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
     disabledDate?: (date: Dayjs) => boolean | null | undefined;
-    className?: string;
 }
 export interface TimePickerProps {
+    className?: string;
     value: Dayjs | null;
     onChange: (value: Dayjs) => void;
-    format?: string;
-    timeIntervals?: number;
-    disabledDate?: (date: Dayjs) => boolean | null | undefined;
-    className?: string;
     disabled?: boolean;
+    /** Rejected on selection rather than greyed out — a native field constrains only through `min` / `max`. */
+    disabledDate?: (date: Dayjs) => boolean | null | undefined;
 }
 /**
  * Date picker. `DatePicker`, `DatePicker.RangePicker`, and `DatePicker.TimePicker` each resolve to a
  * route-scoped override when a `page/**\/_overrides.tsx` in the route's ancestry declares one (slots
  * `DatePicker`, `DatePickerRangePicker`, `DatePickerTimePicker`).
+ *
+ * Each renders one native `<input type="date" | "datetime-local" | "time">`, so the calendar is the browser's
+ * own: an OS wheel on mobile, keyboard entry everywhere, nothing shipped in the bundle. What that costs is a
+ * themed popup, a chosen display format, and per-day disabling — an app needing any of those overrides the slot.
  */
 export declare const DatePicker: import("react").ComponentType<DatePickerProps> & {
     RangePicker: import("react").ComponentType<RangePickerProps>;

package/types/ui/Signal/Arg.d.ts

@@ -1,5 +1,6 @@
 import { type Dayjs, type DefaultPrimitiveName } from "akanjs/base";
 import type { SerializedArg } from "akanjs/signal";
+import type { ReactNode } from "react";
 interface ArgProps {
     argType: DefaultPrimitiveName;
     value: any;
@@ -9,7 +10,7 @@ declare function Arg({ argType, value, onChange }: ArgProps): import("react/jsx-
 declare namespace Arg {
     var Table: ({ refName, endpointKey, args }: ArgTableProps) => import("react/jsx-runtime").JSX.Element;
     var Param: ({ endpointKey, arg, value, onChange }: ArgParamProps) => import("react/jsx-runtime").JSX.Element;
-    var Query: ({ endpointKey, arg, label, value, onChange }: ArgQueryProps) => import("react/jsx-runtime").JSX.Element;
+    var Query: ({ endpointKey, arg, label, value, onChange, renderScalar }: ArgQueryProps) => import("react/jsx-runtime").JSX.Element;
     var FormData: ({ endpointKey, arg, value, onChange }: ArgFormDataProps) => import("react/jsx-runtime").JSX.Element;
     var ID: ({ value, onChange }: ArgIDProps) => import("react/jsx-runtime").JSX.Element;
     var Int: ({ value, onChange }: ArgIntProps) => import("react/jsx-runtime").JSX.Element;
@@ -38,6 +39,8 @@ interface ArgQueryProps {
     label?: string;
     value: any;
     onChange: (value: any) => void;
+    /** Replaces the scalar input this arg would otherwise get, once per element for an array arg. */
+    renderScalar?: (value: any, onChange: (value: any) => void) => ReactNode;
 }
 interface ArgFormDataProps {
     endpointKey: string;

package/ui/Data/Dashboard.tsx

@@ -2,16 +2,21 @@
 import { cn, usePage } from "akanjs/client";
 import type { QuerySetting, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
+import { useState } from "react";
 
-import { Link } from "../Link";
 import { dictLabel, formatStat } from "./dataText";
 
 export interface DashboardProps<T extends string, State> {
   className?: string;
   summary: Record<string, unknown>;
+  /** The listing these tiles belong to. Kept so a caller names its target; the labels are app-level keys. */
   slice: SliceMeta;
   /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
   queryMap?: { [column: string]: QuerySetting };
+  /** Applies one column's filter. Without it a mapped column still renders, but as a plain tile. */
+  onSelect?: (setting: QuerySetting, column: string) => void;
+  /** The filter key the listing is showing, so a tile stops looking active once the toolbar moves off it. */
+  queryKey?: string;
   columns?: string[];
   presents?: string[];
   hidePresents?: boolean;
@@ -22,42 +27,55 @@ const tileClassName = "flex min-w-40 flex-1 flex-col gap-1 rounded-box border px
 export default function Dashboard<T extends string, State>({
   className,
   summary,
-  slice,
   queryMap,
+  onSelect,
+  queryKey,
   columns,
   presents,
   hidePresents,
 }: DashboardProps<T, State>) {
-  const { refName } = slice;
   const { l } = usePage();
   const searchParams = st.use.searchParams({ agent: false });
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
+
+  const [selected, setSelected] = useState(typeof filter === "string" ? filter : undefined);
   const shownColumns = (columns ?? []).filter((column) => summary[column] !== undefined);
   const shownPresents = hidePresents ? [] : (presents ?? []).filter((column) => summary[column] !== undefined);
   if (!shownColumns.length && !shownPresents.length) return null;
+  const activeColumn = selected && queryMap?.[selected]?.queryKey === queryKey ? selected : undefined;
   return (
     <div className={cn("mb-4 flex flex-wrap gap-2", className)}>
       {[...shownColumns, ...shownPresents].map((column) => {
-        const linkable = queryMap?.[column] !== undefined;
-        return (
-          <Link
-            key={column}
-            disabled={!linkable}
-            href={`/admin?topMenu=data&subMenu=${refName}&filter=${column}`}
+        const setting = queryMap?.[column];
+        const label = dictLabel(l._, `summary.${column}`, column);
+        const body = (
+          <>
+            <span className="truncate text-muted-foreground text-xs">{label}</span>
+            <span className="truncate font-semibold text-2xl text-primary tabular-nums">
+              {formatStat(summary[column])}
+            </span>
+          </>
+        );
+        return setting && onSelect ? (
+          <button
             className={cn(
               tileClassName,
-              "bg-card",
-              linkable && "transition hover:border-primary/50",
-              filter === column && linkable ? "border-primary" : "border-border",
+              "bg-card transition hover:border-primary/50",
+              activeColumn === column ? "border-primary" : "border-border",
             )}
+            key={column}
+            onClick={() => {
+              setSelected(column);
+              onSelect(setting, column);
+            }}
+            type="button"
           >
-            <span className="truncate text-muted-foreground text-xs">
-              {dictLabel(l._, `summary.${column}`, column)}
-            </span>
-            <span className="truncate font-semibold text-2xl text-primary tabular-nums">
-              {formatStat(summary[column])}
-            </span>
-          </Link>
+            {body}
+          </button>
+        ) : (
+          <div className={cn(tileClassName, "border-border bg-card")} key={column}>
+            {body}
+          </div>
         );
       })}
     </div>

package/ui/Data/ListContainer.tsx

@@ -36,7 +36,7 @@ import { Select } from "../Select";
 import DataCardList from "./CardList";
 import { columnKey, downloadBlob, toCsvBlob, toJsonBlob } from "./dataExport";
 import { dictLabel } from "./dataText";
-import DataQueryMaker from "./QueryMaker";
+import { QueryMakerArgs, QueryMakerKey, resolveQuerySetting, useQueryMaker } from "./QueryMaker";
 import DataTableList from "./TableList";
 
 const controlClassName = "h-9";
@@ -79,9 +79,15 @@ export interface ListContainerProps<
   renderDashboard?: ({
     summary,
     hidePresents,
+    onSelect,
+    queryKey,
   }: {
     summary: Record<string, unknown>;
     hidePresents?: boolean;
+    /** Applies one summary column's filter to this listing, in place. */
+    onSelect: (setting: QuerySetting) => void;
+    /** The filter key the listing is showing right now. */
+    queryKey: string;
   }) => ReactNode;
   renderItem?: (props: ModelProps<any, any>) => ReactNode;
   renderTemplate?: (props: any) => ReactNode | null;
@@ -174,10 +180,14 @@ export default function ListContainer<
   const searchParams = st.use.searchParams({ agent: false });
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
   const initQuery = query ?? (filter ? queryMap?.[filter] : undefined);
+  const queryState = useQueryMaker({ slice, query: initQuery });
   useEffect(() => {
     
     const queryArgs = new Array(slice.argLength).fill(null) as unknown[];
-    if (initQuery) [queryArgs[0], queryArgs[1]] = [initQuery.queryKey, initQuery.args ?? []];
+    if (initQuery) {
+      const { queryKey, args } = resolveQuerySetting(initQuery);
+      [queryArgs[0], queryArgs[1]] = [queryKey, args];
+    }
     void storeDo[namesOfSlice.initModel](...queryArgs, { sort, ...init });
   }, []);
 
@@ -251,19 +261,28 @@ export default function ListContainer<
 
   const modelLabel = dictLabel(l._, `${sliceName}.modelName`, refName);
   const RenderTitle = renderTitle ?? ((model: Full) => `${modelLabel} - ${model.id ? model.id : "New"}`);
-  const ModelDashboard = (): ReactNode => {
-    const Stat = renderDashboard;
 
-    const summary = storeSel<Record<string, unknown> | undefined>(
-      (state) => (state as { summary?: Record<string, unknown> }).summary,
+  const summary = storeSel<Record<string, unknown> | undefined>(
+    (state) => (state as { summary?: Record<string, unknown> }).summary,
+  );
+  const summaryLoading = storeSel<boolean>((state) => !!(state as { summaryLoading?: boolean }).summaryLoading);
+  const modelDashboard =
+    !renderDashboard || !summary ? null : summaryLoading ? (
+      <Loading.Skeleton className="mb-4" active />
+    ) : (
+      renderDashboard({
+        summary,
+        hidePresents: true,
+        onSelect: queryState.applySetting,
+        queryKey: queryState.setting.queryKey,
+      })
     );
-    const summaryLoading = storeSel<boolean>((state) => !!(state as { summaryLoading?: boolean }).summaryLoading);
-    if (!Stat || !summary) return null;
-    return summaryLoading ? <Loading.Skeleton className="mb-4" active /> : <Stat summary={summary} hidePresents />;
-  };
-  
-  const RenderQueryMaker =
-    renderQueryMaker ?? (query ? undefined : () => <DataQueryMaker slice={slice} query={initQuery} />);
+
+  const queryMakerArgs = renderQueryMaker ? (
+    renderQueryMaker()
+  ) : query ? null : (
+    <QueryMakerArgs slice={slice} state={queryState} />
+  );
   const RenderInsight = (): ReactNode => (renderInsight ? renderInsight({ insight: modelInsight }) : null);
   const RenderTemplate = renderTemplate;
   const RenderTools = (): ReactNode => {
@@ -356,6 +375,14 @@ export default function ListContainer<
               </button>
             ))}
           </div>
+          {query ? null : (
+            <QueryMakerKey
+              className="w-44 min-w-0"
+              selectClassName={cn("min-h-0", controlClassName)}
+              slice={slice}
+              state={queryState}
+            />
+          )}
           <RenderSort />
           <Select<number>
             className="w-36 min-w-0"
@@ -389,8 +416,8 @@ export default function ListContainer<
           ) : null}
         </div>
       </div>
-      {query ? null : <ModelDashboard />}
-      {RenderQueryMaker ? <RenderQueryMaker /> : null}
+      {query ? null : modelDashboard}
+      {queryMakerArgs}
       <RenderInsight />
       {view === "card" ? (
         <DataCardList