@lobb-js/lobb-ext-reports 0.11.1 → 0.12.0

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import type { Extension, ExtensionUtils } from "@lobb-js/studio";
+export { default as ReportBody } from "./lib/components/reportBody.svelte";
 export default function extension(utils: ExtensionUtils): Extension;

package/dist/index.js

@@ -1,12 +1,13 @@
 import Reports from "./lib/components/pages/reports/index.svelte";
 import SharedReport from "./lib/components/pages/shared_report/index.svelte";
 import QueryAiButton from "./lib/components/dv_fields_buttons/query_ai_button/index.svelte";
+export { default as ReportBody } from "./lib/components/reportBody.svelte";
 export default function extension(utils) {
     return {
         name: "reports",
         components: {
             "dvFields.topRight.reports_charts.query": QueryAiButton,
-            "pages.analytics": Reports,
+            "pages.dashboards": Reports,
             // Lives at /studio/public/reports/shared_report — no auth required, the
             // page itself swaps the LobbClient bearer to the share_token in the URL.
             "publicPages.shared_report": SharedReport,
@@ -14,9 +15,9 @@ export default function extension(utils) {
         dashboardNavs: {
             middle: [
                 {
-                    href: "/studio/extensions/reports/analytics",
+                    href: "/studio/extensions/reports/dashboards",
                     icon: utils.components.Icons.ChartNoAxesCombined,
-                    label: "Analytics",
+                    label: "Dashboards",
                     represents: "reports_dashboards",
                 },
             ],

package/dist/lib/components/gridStack.svelte

@@ -9,6 +9,7 @@
 		column?: number;
 		cellHeight?: string;
 		editable?: boolean;
+		allowEdit?: boolean;
 		onLayoutChange?: (layout: LayoutItem[]) => void;
 		children: Snippet;
 	}
@@ -17,6 +18,7 @@
 		column = 12,
 		cellHeight = "150px",
 		editable = $bindable(false),
+		allowEdit = false,
 		onLayoutChange,
 		children,
 	}: Props = $props();
@@ -29,7 +31,10 @@
 	let containerWidth = $state(0);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	let editMode = $derived(containerWidth >= 1200);
+	// Edit mode only ever turns on when the parent explicitly opts in.
+	// Without allowEdit, container width is irrelevant — the grid stays
+	// disabled forever.
+	let editMode = $derived(allowEdit && containerWidth >= 1200);
 
 	// Keep editable in sync so parent can read it
 	$effect(() => { editable = editMode; });
@@ -112,8 +117,10 @@
 	});
 </script>
 
-<div class="grid-stack" bind:this={gridEl}>
-	{@render children()}
+<div class="grid-stack-wrap">
+	<div class="grid-stack" bind:this={gridEl}>
+		{@render children()}
+	</div>
 </div>
 
 <style>
@@ -122,9 +129,14 @@
 		position: absolute;
 	}
 
+	.grid-stack-wrap {
+		overflow-x: hidden;
+		width: 100%;
+	}
+
 	:global(.grid-stack) {
 		background: transparent;
-		padding: 0.5rem;
+		margin: 0 -0.5rem;
 	}
 
 	:global(.grid-stack-placeholder > .placeholder-content) {

package/dist/lib/components/pages/reports/components/chart.svelte

@@ -14,6 +14,7 @@
 
 	interface Props extends ExtensionProps {
 		chartRecord: any;
+		showHeader?: boolean;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
 		onChartClick?: (event: ChartClickEvent) => void;
@@ -21,6 +22,7 @@
 
 	const {
 		chartRecord,
+		showHeader = true,
 		onChartDeleted,
 		onChartEdited,
 		onChartClick,
@@ -95,43 +97,47 @@
 	}
 </script>
 
-<div class="gridContainer h-full rounded-md border bg-background">
-	<div class="flex items-center justify-between border-b p-2 text-sm">
-		<div class="flex items-center gap-1.5">
-			<span>{chartRecord.title}</span>
-			{#if chartRecord.description}
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<icons.CircleHelp class="text-muted-foreground" size={14} />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-64 text-xs">
-						{chartRecord.description}
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
-		</div>
-		<div class="flex">
-			{#if canUpdate}
-				<UpdateDetailViewButton
-					collectionName="reports_charts"
-					recordId={chartRecord.id}
-					variant="ghost"
-					class="h-7 w-7 text-muted-foreground hover:bg-transparent"
-					Icon={icons.Pencil}
-					onSuccessfullSave={handleEditOnSuccessfull}
-				></UpdateDetailViewButton>
-			{/if}
-			{#if canDelete}
-				<Button
-					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-					variant="ghost"
-					size="icon"
-					Icon={icons.Trash}
-					onclick={handleChartDelete}
-				></Button>
-			{/if}
+<div
+	class="grid h-full rounded-md border bg-background {showHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]'}"
+>
+	{#if showHeader}
+		<div class="flex items-center justify-between border-b p-2 text-sm">
+			<div class="flex items-center gap-1.5">
+				<span>{chartRecord.title}</span>
+				{#if chartRecord.description}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<icons.CircleHelp class="text-muted-foreground" size={14} />
+						</Tooltip.Trigger>
+						<Tooltip.Content class="max-w-64 text-xs">
+							{chartRecord.description}
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</div>
+			<div class="flex">
+				{#if canUpdate}
+					<UpdateDetailViewButton
+						collectionName="reports_charts"
+						recordId={chartRecord.id}
+						variant="ghost"
+						class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+						Icon={icons.Pencil}
+						onSuccessfullSave={handleEditOnSuccessfull}
+					></UpdateDetailViewButton>
+				{/if}
+				{#if canDelete}
+					<Button
+						class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+						variant="ghost"
+						size="icon"
+						Icon={icons.Trash}
+						onclick={handleChartDelete}
+					></Button>
+				{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="flex min-h-0 items-center justify-center overflow-hidden">
 		<svelte:boundary>
 			{#snippet failed(error, reset)}
@@ -183,10 +189,3 @@
 		</svelte:boundary>
 	</div>
 </div>
-
-<style>
-	.gridContainer {
-		display: grid;
-		grid-template-rows: auto 1fr;
-	}
-</style>

package/dist/lib/components/pages/reports/components/report.svelte

@@ -62,16 +62,24 @@
 	async function handleShare() {
 		sharing = true;
 		try {
-			// Snapshot grants exactly the read access a recipient needs to view
-			// this one report — the dashboard row and the charts that belong to it.
-			const permissions = {
+			const event = {
+				reportId: String(reportId),
+				report,
+				handled: false,
+			};
+			await utils.emitEvent("reports.share", event);
+			if (event.handled) return;
+
+			const basePermissions: Record<string, any> = {
 				reports_dashboards: { read: { filter: { id: Number(reportId) } } },
 				reports_charts: { read: { filter: { report_id: Number(reportId) } } },
-				// TODO: the above ones are ok. the below ones are specific to only this risk project
-				// can you please add them using a different way
-				risk_config: true,
-				risks: true,
 			};
+			const shareReadAccess = (utils.ctx.meta?.extensions?.reports?.shareReadAccess ?? {}) as Record<string, any>;
+			const extraPermissions: Record<string, any> = {};
+			for (const [collectionName, readGrant] of Object.entries(shareReadAccess)) {
+				extraPermissions[collectionName] = { read: readGrant };
+			}
+			const permissions = { ...basePermissions, ...extraPermissions };
 			const response = await utils.lobb.createOne("auth_shares", {
 				label: `Share for: ${report?.name ?? "report"}`,
 				permissions: JSON.stringify(permissions),
@@ -154,7 +162,7 @@
 		<ReportBody
 			{reportId}
 			{utils}
-			editable
+			allowEdit
 			onLayoutChange={handleLayoutChange}
 			onChartClick={handleChartClick}
 			onReportLoaded={handleReportLoaded}

package/dist/lib/components/pages/reports/index.svelte

@@ -4,7 +4,7 @@
 
 	const { utils, ...props }: ExtensionProps = $props();
 
-	let extensionPagePath = "/studio/extensions/reports/analytics";
+	let extensionPagePath = "/studio/extensions/reports/dashboards";
 	let reportId: string | null = $derived(utils.page.url.pathname.split("/")[5] ?? null);
 	let sideBarData: any = $state(null);
 	const {
@@ -56,7 +56,7 @@
 
 </script>
 
-<Sidebar title="Reports" data={sideBarData}>
+<Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
 		<div class="p-2">
 			<CreateDetailViewButton

package/dist/lib/components/reportBody.svelte

@@ -7,6 +7,8 @@
 	interface Props extends ExtensionProps {
 		reportId: string | number;
 		editable?: boolean;
+		allowEdit?: boolean;
+		showChartHeaders?: boolean;
 		onLayoutChange?: (changes: any[]) => void;
 		onChartClick?: (event: any, elements: any[], chart: any) => void;
 		onReportLoaded?: (report: any) => void;
@@ -16,6 +18,8 @@
 	const {
 		reportId,
 		editable = false,
+		allowEdit = false,
+		showChartHeaders = true,
 		onLayoutChange,
 		onChartClick,
 		onReportLoaded,
@@ -91,7 +95,7 @@
 	</div>
 {:else}
 	{#key charts}
-		<GridStackComponent {editable} {onLayoutChange}>
+		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
 			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
 				<div
 					class="grid-stack-item"
@@ -101,6 +105,7 @@
 					<div class="grid-stack-item-content">
 						<Chart
 							chartRecord={chart}
+							showHeader={showChartHeaders}
 							onChartDeleted={async () => await loadCharts()}
 							onChartEdited={async () => await loadCharts()}
 							{onChartClick}

package/extensions/reports/index.ts

@@ -3,12 +3,35 @@ import type { Extension } from "@lobb-js/core";
 import packageJson from "../../package.json" with { type: "json" };
 import { collections } from "./collections/index.ts";
 import { migrations } from "./migrations.ts";
-import { meta } from "./meta.ts";
+import { meta as buildMeta } from "./meta.ts";
 import { workflows } from "./workflows.ts";
 import { openapi } from "./openapi.ts";
 import { relations } from "./relations.ts";
 
-export default function extension(): Extension {
+type ShareReadPermission =
+  | true
+  | { filter?: Record<string, unknown>; fields?: Record<string, true> };
+
+export interface ReportsExtensionConfig {
+  /**
+   * Domain-specific collections a share recipient needs read access to in
+   * addition to `reports_dashboards` + `reports_charts`. Reports often
+   * drill down into other collections (e.g. risk charts opening the
+   * `risks` table on click) — those collections have to be readable by
+   * the share token or the drill-down requests will 403.
+   *
+   * @example
+   * reports({
+   *   shareReadAccess: {
+   *     risks: true,
+   *     risk_config: true,
+   *   },
+   * })
+   */
+  shareReadAccess?: Record<string, ShareReadPermission>;
+}
+
+export default function extension(config: ReportsExtensionConfig = {}): Extension {
   return {
     version: packageJson.version,
     name: "reports",
@@ -17,7 +40,12 @@ export default function extension(): Extension {
     collections: collections,
     relations: relations,
     migrations: migrations,
-    meta: meta,
+    // Surface the config to the studio via meta so the Share button can
+    // include it in the per-report share permissions snapshot.
+    meta: async (lobb) => ({
+      ...(await buildMeta(lobb)),
+      shareReadAccess: config.shareReadAccess ?? {},
+    }),
     openapi: openapi,
   };
 }

package/extensions/reports/studio/index.ts

@@ -3,12 +3,14 @@ import Reports from "./lib/components/pages/reports/index.svelte";
 import SharedReport from "./lib/components/pages/shared_report/index.svelte";
 import QueryAiButton from "./lib/components/dv_fields_buttons/query_ai_button/index.svelte";
 
+export { default as ReportBody } from "./lib/components/reportBody.svelte";
+
 export default function extension(utils: ExtensionUtils): Extension {
   return {
     name: "reports",
     components: {
       "dvFields.topRight.reports_charts.query": QueryAiButton,
-      "pages.analytics": Reports,
+      "pages.dashboards": Reports,
       // Lives at /studio/public/reports/shared_report — no auth required, the
       // page itself swaps the LobbClient bearer to the share_token in the URL.
       "publicPages.shared_report": SharedReport,
@@ -16,9 +18,9 @@ export default function extension(utils: ExtensionUtils): Extension {
     dashboardNavs: {
       middle: [
         {
-          href: "/studio/extensions/reports/analytics",
+          href: "/studio/extensions/reports/dashboards",
           icon: utils.components.Icons.ChartNoAxesCombined,
-          label: "Analytics",
+          label: "Dashboards",
           represents: "reports_dashboards",
         },
       ],

package/extensions/reports/studio/lib/components/gridStack.svelte

@@ -9,6 +9,7 @@
 		column?: number;
 		cellHeight?: string;
 		editable?: boolean;
+		allowEdit?: boolean;
 		onLayoutChange?: (layout: LayoutItem[]) => void;
 		children: Snippet;
 	}
@@ -17,6 +18,7 @@
 		column = 12,
 		cellHeight = "150px",
 		editable = $bindable(false),
+		allowEdit = false,
 		onLayoutChange,
 		children,
 	}: Props = $props();
@@ -29,7 +31,10 @@
 	let containerWidth = $state(0);
 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	let editMode = $derived(containerWidth >= 1200);
+	// Edit mode only ever turns on when the parent explicitly opts in.
+	// Without allowEdit, container width is irrelevant — the grid stays
+	// disabled forever.
+	let editMode = $derived(allowEdit && containerWidth >= 1200);
 
 	// Keep editable in sync so parent can read it
 	$effect(() => { editable = editMode; });
@@ -112,8 +117,10 @@
 	});
 </script>
 
-<div class="grid-stack" bind:this={gridEl}>
-	{@render children()}
+<div class="grid-stack-wrap">
+	<div class="grid-stack" bind:this={gridEl}>
+		{@render children()}
+	</div>
 </div>
 
 <style>
@@ -122,9 +129,14 @@
 		position: absolute;
 	}
 
+	.grid-stack-wrap {
+		overflow-x: hidden;
+		width: 100%;
+	}
+
 	:global(.grid-stack) {
 		background: transparent;
-		padding: 0.5rem;
+		margin: 0 -0.5rem;
 	}
 
 	:global(.grid-stack-placeholder > .placeholder-content) {

package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte

@@ -14,6 +14,7 @@
 
 	interface Props extends ExtensionProps {
 		chartRecord: any;
+		showHeader?: boolean;
 		onChartDeleted?: () => Promise<void>;
 		onChartEdited?: () => Promise<void>;
 		onChartClick?: (event: ChartClickEvent) => void;
@@ -21,6 +22,7 @@
 
 	const {
 		chartRecord,
+		showHeader = true,
 		onChartDeleted,
 		onChartEdited,
 		onChartClick,
@@ -95,43 +97,47 @@
 	}
 </script>
 
-<div class="gridContainer h-full rounded-md border bg-background">
-	<div class="flex items-center justify-between border-b p-2 text-sm">
-		<div class="flex items-center gap-1.5">
-			<span>{chartRecord.title}</span>
-			{#if chartRecord.description}
-				<Tooltip.Root>
-					<Tooltip.Trigger>
-						<icons.CircleHelp class="text-muted-foreground" size={14} />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-64 text-xs">
-						{chartRecord.description}
-					</Tooltip.Content>
-				</Tooltip.Root>
-			{/if}
-		</div>
-		<div class="flex">
-			{#if canUpdate}
-				<UpdateDetailViewButton
-					collectionName="reports_charts"
-					recordId={chartRecord.id}
-					variant="ghost"
-					class="h-7 w-7 text-muted-foreground hover:bg-transparent"
-					Icon={icons.Pencil}
-					onSuccessfullSave={handleEditOnSuccessfull}
-				></UpdateDetailViewButton>
-			{/if}
-			{#if canDelete}
-				<Button
-					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-					variant="ghost"
-					size="icon"
-					Icon={icons.Trash}
-					onclick={handleChartDelete}
-				></Button>
-			{/if}
+<div
+	class="grid h-full rounded-md border bg-background {showHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]'}"
+>
+	{#if showHeader}
+		<div class="flex items-center justify-between border-b p-2 text-sm">
+			<div class="flex items-center gap-1.5">
+				<span>{chartRecord.title}</span>
+				{#if chartRecord.description}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<icons.CircleHelp class="text-muted-foreground" size={14} />
+						</Tooltip.Trigger>
+						<Tooltip.Content class="max-w-64 text-xs">
+							{chartRecord.description}
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</div>
+			<div class="flex">
+				{#if canUpdate}
+					<UpdateDetailViewButton
+						collectionName="reports_charts"
+						recordId={chartRecord.id}
+						variant="ghost"
+						class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+						Icon={icons.Pencil}
+						onSuccessfullSave={handleEditOnSuccessfull}
+					></UpdateDetailViewButton>
+				{/if}
+				{#if canDelete}
+					<Button
+						class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+						variant="ghost"
+						size="icon"
+						Icon={icons.Trash}
+						onclick={handleChartDelete}
+					></Button>
+				{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="flex min-h-0 items-center justify-center overflow-hidden">
 		<svelte:boundary>
 			{#snippet failed(error, reset)}
@@ -183,10 +189,3 @@
 		</svelte:boundary>
 	</div>
 </div>
-
-<style>
-	.gridContainer {
-		display: grid;
-		grid-template-rows: auto 1fr;
-	}
-</style>

package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte

@@ -62,16 +62,24 @@
 	async function handleShare() {
 		sharing = true;
 		try {
-			// Snapshot grants exactly the read access a recipient needs to view
-			// this one report — the dashboard row and the charts that belong to it.
-			const permissions = {
+			const event = {
+				reportId: String(reportId),
+				report,
+				handled: false,
+			};
+			await utils.emitEvent("reports.share", event);
+			if (event.handled) return;
+
+			const basePermissions: Record<string, any> = {
 				reports_dashboards: { read: { filter: { id: Number(reportId) } } },
 				reports_charts: { read: { filter: { report_id: Number(reportId) } } },
-				// TODO: the above ones are ok. the below ones are specific to only this risk project
-				// can you please add them using a different way
-				risk_config: true,
-				risks: true,
 			};
+			const shareReadAccess = (utils.ctx.meta?.extensions?.reports?.shareReadAccess ?? {}) as Record<string, any>;
+			const extraPermissions: Record<string, any> = {};
+			for (const [collectionName, readGrant] of Object.entries(shareReadAccess)) {
+				extraPermissions[collectionName] = { read: readGrant };
+			}
+			const permissions = { ...basePermissions, ...extraPermissions };
 			const response = await utils.lobb.createOne("auth_shares", {
 				label: `Share for: ${report?.name ?? "report"}`,
 				permissions: JSON.stringify(permissions),
@@ -154,7 +162,7 @@
 		<ReportBody
 			{reportId}
 			{utils}
-			editable
+			allowEdit
 			onLayoutChange={handleLayoutChange}
 			onChartClick={handleChartClick}
 			onReportLoaded={handleReportLoaded}

package/extensions/reports/studio/lib/components/pages/reports/index.svelte

@@ -4,7 +4,7 @@
 
 	const { utils, ...props }: ExtensionProps = $props();
 
-	let extensionPagePath = "/studio/extensions/reports/analytics";
+	let extensionPagePath = "/studio/extensions/reports/dashboards";
 	let reportId: string | null = $derived(utils.page.url.pathname.split("/")[5] ?? null);
 	let sideBarData: any = $state(null);
 	const {
@@ -56,7 +56,7 @@
 
 </script>
 
-<Sidebar title="Reports" data={sideBarData}>
+<Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
 		<div class="p-2">
 			<CreateDetailViewButton

package/extensions/reports/studio/lib/components/reportBody.svelte

@@ -7,6 +7,8 @@
 	interface Props extends ExtensionProps {
 		reportId: string | number;
 		editable?: boolean;
+		allowEdit?: boolean;
+		showChartHeaders?: boolean;
 		onLayoutChange?: (changes: any[]) => void;
 		onChartClick?: (event: any, elements: any[], chart: any) => void;
 		onReportLoaded?: (report: any) => void;
@@ -16,6 +18,8 @@
 	const {
 		reportId,
 		editable = false,
+		allowEdit = false,
+		showChartHeaders = true,
 		onLayoutChange,
 		onChartClick,
 		onReportLoaded,
@@ -91,7 +95,7 @@
 	</div>
 {:else}
 	{#key charts}
-		<GridStackComponent {editable} {onLayoutChange}>
+		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
 			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
 				<div
 					class="grid-stack-item"
@@ -101,6 +105,7 @@
 					<div class="grid-stack-item-content">
 						<Chart
 							chartRecord={chart}
+							showHeader={showChartHeaders}
 							onChartDeleted={async () => await loadCharts()}
 							onChartEdited={async () => await loadCharts()}
 							{onChartClick}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "package": "svelte-package --input extensions/reports/studio"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.32.1",
+    "@lobb-js/core": "^0.33.0",
     "chart.js": "^4.4.8",
     "gridstack": "^12.6.0",
     "hono": "^4.7.0",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
-    "@lobb-js/studio": "^0.29.1",
+    "@lobb-js/studio": "^0.31.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.60.1",