windmill-components 1.75.0 → 1.77.0

package/components/apps/editor/GridEditor.svelte

@@ -1,5 +1,4 @@
-<script>import { getContext, afterUpdate, setContext } from 'svelte';
-import Grid from '@windmill-labs/svelte-grid';
+<script>import { getContext, afterUpdate } from 'svelte';
 import { classNames } from '../../../utils';
 import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
@@ -9,6 +8,8 @@ import Component from './component/Component.svelte';
 import { deepEqual } from 'fast-equals';
 import { push } from '../../../history';
 import { expandGriditem, findGridItem } from './appUtils';
+import Grid from '../svelte-grid/Grid.svelte';
+import { settableOutput } from '../rx';
 export let policy;
 const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
@@ -129,61 +130,61 @@ afterUpdate(() => {
 			<Grid
 				onTopId={$selectedComponent}
 				fillSpace={false}
-				bind:items={$app.grid}
+				items={$app.grid}
+				on:redraw={(e) => {
+					$app.grid = e.detail
+				}}
 				let:dataItem
 				rowHeight={36}
 				cols={columnConfiguration}
 				fastStart={true}
 				gap={[4, 2]}
 			>
-				{#each $app.grid as gridComponent (gridComponent.id)}
-					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						{#if $connectingInput.opened}
-							<div
-								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-							/>
-							<div
-								style="transform: translate(-50%, -50%);"
-								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
-							>
-								{dataItem.data.id}
-							</div>
-						{/if}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							on:click|stopPropagation
-							on:pointerdown={() => selectComponent(dataItem.data.id)}
-							class={classNames(
-								'h-full w-full center-center',
-								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
-								gridComponent.data.card ? 'border border-gray-100' : ''
-							)}
-						>
-							<Component
-								render={true}
-								{pointerdown}
-								component={gridComponent.data}
-								selected={$selectedComponent === dataItem.data.id}
-								locked={isFixed(gridComponent)}
-								on:delete={() => removeGridElement(gridComponent.data)}
-								on:lock={() => {
-									const gridItem = findGridItem($app, gridComponent.data.id)
-									if (gridItem) {
-										toggleFixed(gridItem)
-									}
-								}}
-								on:expand={() => {
-									push(history, $app)
-									expandGriditem($app.grid, gridComponent, $breakpoint)
-									$app = { ...$app }
-								}}
-							/>
-						</div>
-					{/if}
-				{/each}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{#if $connectingInput.opened}
+					<div
+						on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.id)}
+						on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+						class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+					/>
+					<div
+						style="transform: translate(-50%, -50%);"
+						class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
+					>
+						{dataItem.data.id}
+					</div>
+				{/if}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:click|stopPropagation
+					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					class={classNames(
+						'h-full w-full center-center',
+						$selectedComponent === dataItem.data.id ? 'active-grid-item' : ''
+					)}
+				>
+					<Component
+						render={true}
+						{pointerdown}
+						component={dataItem.data}
+						selected={$selectedComponent === dataItem.data.id}
+						locked={isFixed(dataItem)}
+						on:delete={() => removeGridElement(dataItem.data)}
+						on:lock={() => {
+							const gridItem = findGridItem($app, dataItem.data.id)
+							if (gridItem) {
+								toggleFixed(gridItem)
+							}
+							$app = $app
+						}}
+						on:expand={() => {
+							push(history, $app)
+							$selectedComponent = dataItem.data.id
+							expandGriditem($app.grid, dataItem, $breakpoint)
+							$app = $app
+						}}
+					/>
+				</div>
 			</Grid>
 		</div>
 	</div>
@@ -197,6 +198,7 @@ afterUpdate(() => {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
+				autoRefresh={script.autoRefresh ?? false}
 				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
 			/>
 		{/if}

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -2,7 +2,7 @@
 import { ChevronDown, RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
-const { runnableComponents } = getContext('AppViewerContext');
+const { runnableComponents, app } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
@@ -29,6 +29,12 @@ function setInter(inter) {
 function refresh() {
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
+        if (id.startsWith('bg_')) {
+            let index = parseInt(id.split('_')[1]);
+            if (!$app.hiddenInlineScripts[index]?.autoRefresh) {
+                return;
+            }
+        }
         return $runnableComponents?.[id]?.();
     })).finally(() => {
         loading = false;

package/components/apps/editor/SettingsPanel.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
 import GridPanel from './GridPanel.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
@@ -17,15 +18,27 @@ const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
-		<PanelSection title={`Background script inputs`}>
-			{#key $stateId}
-				<InputsSpecsEditor
-					id={`bg_${index}`}
-					shouldCapitalize={false}
-					bind:inputSpecs={script.fields}
-					userInputEnabled={false}
+		<div class="min-h-full flex flex-col divide-y">
+			<PanelSection title={`Configuration`}>
+				<Toggle
+					bind:checked={script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
 				/>
-			{/key}
-		</PanelSection>
+			</PanelSection>
+
+			{#if Object.keys(script.fields).length > 0}
+				<PanelSection title={`Inputs`}>
+					{#key $stateId}
+						<InputsSpecsEditor
+							id={`bg_${index}`}
+							shouldCapitalize={false}
+							bind:inputSpecs={script.fields}
+							userInputEnabled={false}
+						/>
+					{/key}
+				</PanelSection>
+			{/if}
+			<div class="grow shrink" />
+		</div>
 	{/if}
 {/each}

package/components/apps/editor/SubGridEditor.svelte

@@ -1,12 +1,13 @@
 <script>import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
-import Grid from '@windmill-labs/svelte-grid';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Component from './component/Component.svelte';
 import { expandGriditem, findGridItem } from './appUtils';
 import { push } from '../../../history';
+import Grid from '../svelte-grid/Grid.svelte';
 export let containerHeight;
+export let containerWidth = undefined;
 let classes = '';
 export { classes as class };
 export let style = '';
@@ -46,18 +47,21 @@ function selectComponent(id) {
         */
     }
 }
-function lock(gridComponent) {
-    let fComponent = findGridItem($app, gridComponent.data.id);
+function lock(dataItem) {
+    let fComponent = findGridItem($app, dataItem.data.id);
     if (fComponent) {
         fComponent = toggleFixed(fComponent);
     }
+    $app = $app;
 }
 // @ts-ignore
 let container;
 </script>
 
 <div
-	class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 overflow-hidden'} 	"
+	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
+		? 'visible'
+		: 'invisible h-0 overflow-hidden'} 	"
 	bind:this={container}
 >
 	<div
@@ -74,7 +78,10 @@ let container;
 	>
 		<div class={highlight && $mode !== 'preview' ? 'border-gray-400  border border-dashed' : ''}>
 			<Grid
-				bind:items={subGrid}
+				items={subGrid}
+				on:redraw={(e) => {
+					subGrid = e.detail
+				}}
 				let:dataItem
 				rowHeight={36}
 				cols={columnConfiguration}
@@ -82,57 +89,54 @@ let container;
 				gap={[4, 2]}
 				scroller={container}
 				parentWidth={$parentWidth - 17}
+				{containerWidth}
 			>
-				{#each subGrid as gridComponent (gridComponent.id)}
-					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						{#if $connectingInput.opened}
-							<div
-								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-							/>
-							<div
-								style="transform: translate(-50%, -50%);"
-								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
-							>
-								{dataItem.data.id}
-							</div>
-						{/if}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{#if $connectingInput.opened}
+					<div
+						on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.data.id)}
+						on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+						class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+					/>
+					<div
+						style="transform: translate(-50%, -50%);"
+						class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
+					>
+						{dataItem.data.id}
+					</div>
+				{/if}
 
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							on:pointerdown={() => selectComponent(dataItem.data.id)}
-							class={classNames(
-								'h-full w-full center-center',
-								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
-								gridComponent.data.card ? 'border border-gray-100' : '',
-								'top-0'
-							)}
-						>
-							<Component
-								render={visible}
-								{pointerdown}
-								component={gridComponent.data}
-								selected={$selectedComponent === dataItem.data.id}
-								locked={isFixed(gridComponent)}
-								on:lock={() => lock(gridComponent)}
-								on:expand={() => {
-									const parentGridItem = findGridItem($app, id)
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					class={classNames(
+						'h-full w-full center-center',
+						$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+						dataItem.data.card ? 'border border-gray-100' : '',
+						'top-0'
+					)}
+				>
+					<Component
+						render={visible}
+						{pointerdown}
+						component={dataItem.data}
+						selected={$selectedComponent === dataItem.data.id}
+						locked={isFixed(dataItem)}
+						on:lock={() => lock(dataItem)}
+						on:expand={() => {
+							const parentGridItem = findGridItem($app, id)
 
-									if (!parentGridItem) {
-										return
-									}
+							if (!parentGridItem) {
+								return
+							}
+							$selectedComponent = dataItem.data.id
+							push(history, $app)
 
-									push(history, $app)
-
-									expandGriditem(subGrid, gridComponent, $breakpoint, parentGridItem)
-									$app = { ...$app }
-								}}
-							/>
-						</div>
-					{/if}
-				{/each}
+							expandGriditem(subGrid, dataItem, $breakpoint, parentGridItem)
+							$app = $app
+						}}
+					/>
+				</div>
 			</Grid>
 		</div>
 	</div>

package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -1,15 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
 declare const __propDef: {
     props: {
         containerHeight: number;
+        containerWidth?: number | undefined;
         class?: string | undefined;
         style?: string | undefined;
         noPadding?: boolean | undefined;
         noYPadding?: boolean | undefined;
-        subGrid?: FilledItem<{
-            data: import("./component").AppComponent;
-            id: string;
-        }>[] | undefined;
+        subGrid?: GridItem[] | undefined;
         visible?: boolean | undefined;
         id: string;
         shouldHighlight?: boolean | undefined;

package/components/apps/editor/appUtils.d.ts

@@ -1,13 +1,15 @@
-import type { App, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
+import type { App, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
 import { type AppComponent } from './component';
-export declare function findGridItemParentId(app: App, id: string): string | undefined;
+import type { Output, World } from '../rx';
+export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
+export declare function isIdInsideGriditem(app: App, gridItem: GridItem, id: string | undefined): boolean;
 export declare function findGridItem(app: App, id: string): GridItem | undefined;
 export declare function getNextGridItemId(app: App): string;
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem;
+export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
 export declare function insertNewGridItem(app: App, data: AppComponent, focusedGrid: FocusedGrid | undefined, keepId?: boolean): string;
 export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
 export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];
-export declare function duplicateGridItem(app: App, parent: string | undefined, id: string): string | undefined;
 type AvailableSpace = {
     left: number;
     right: number;
@@ -15,5 +17,12 @@ type AvailableSpace = {
     bottom: number;
 };
 export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
+type Outputtable<Type> = {
+    -readonly [Property in keyof Type]: Output<Type[Property]>;
+};
+export declare function initOutput<I extends Record<string, any>>(world: World | undefined, id: string, init: I): Outputtable<I>;
 export declare function expandGriditem(grid: GridItem[], gridComponent: GridItem, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export declare function sortGridItemsPosition(gridItems: GridItem[], breakpoint: EditorBreakpoint): GridItem[];
+export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
+export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
 export {};

package/components/apps/editor/appUtils.js

@@ -1,8 +1,8 @@
 import { getNextId } from '../../flows/flowStateUtils';
 import { getRecommendedDimensionsByComponent } from './component';
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
+import gridHelp from '../svelte-grid/utils/helper';
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {
@@ -11,7 +11,7 @@ function findGridItemById(root, subGrids, id) {
     }
     return undefined;
 }
-export function findGridItemParentId(app, id) {
+export function findGridItemParentGrid(app, id) {
     const gridItem = app.grid.find((x) => x.id === id);
     if (gridItem) {
         return undefined;
@@ -21,11 +21,20 @@ export function findGridItemParentId(app, id) {
             const subGrid = app.subgrids[key];
             const gridItem = subGrid.find((x) => x.id === id);
             if (gridItem) {
-                return key.split('-')[0];
+                return key;
             }
         }
     }
 }
+export function isIdInsideGriditem(app, gridItem, id) {
+    const path = [];
+    let currentId = id;
+    while (currentId) {
+        path.push(currentId);
+        currentId = findGridItemParentGrid(app, currentId)?.split('-')[0];
+    }
+    return path.includes(gridItem.id);
+}
 export function findGridItem(app, id) {
     return findGridItemById(app.grid, app.subgrids, id);
 }
@@ -36,21 +45,20 @@ export function getNextGridItemId(app) {
     return id;
 }
 export function createNewGridItem(grid, id, data) {
-    const appComponent = data;
-    appComponent.id = id;
     const newComponent = {
         resizable: true,
         draggable: true,
         x: 0,
         y: 0
     };
-    let newData = JSON.parse(JSON.stringify(appComponent));
+    let newData = JSON.parse(JSON.stringify(data));
+    newData.id = id;
     const newItem = {
         data: newData,
         id: id
     };
     gridColumns.forEach((column) => {
-        const rec = getRecommendedDimensionsByComponent(appComponent.type, column);
+        const rec = getRecommendedDimensionsByComponent(newData.type, column);
         newItem[column] = {
             ...newComponent,
             min: { w: 1, h: 1 },
@@ -66,21 +74,20 @@ export function createNewGridItem(grid, id, data) {
     });
     return newItem;
 }
-export function insertNewGridItem(app, data, focusedGrid, keepId) {
-    const id = keepId ? data.id : getNextGridItemId(app);
-    if (!app.subgrids) {
-        app.subgrids = {};
-    }
+export function getGridItems(app, focusedGrid) {
     if (!focusedGrid) {
-        const newItem = createNewGridItem(app.grid, id, data);
-        app.grid.push(newItem);
+        return app.grid;
     }
     else {
         const { parentComponentId, subGridIndex } = focusedGrid;
         const key = `${parentComponentId}-${subGridIndex ?? 0}`;
-        const subGrid = app.subgrids[key] ?? [];
-        subGrid.push(createNewGridItem(subGrid, id, data));
-        app.subgrids[key] = subGrid;
+        return app?.subgrids?.[key] ?? [];
+    }
+}
+export function insertNewGridItem(app, data, focusedGrid, keepId) {
+    const id = keepId ? data.id : getNextGridItemId(app);
+    if (!app.subgrids) {
+        app.subgrids = {};
     }
     // We only want to set subgrids when we are not moving
     if (!keepId) {
@@ -88,6 +95,15 @@ export function insertNewGridItem(app, data, focusedGrid, keepId) {
             app.subgrids[`${id}-${i}`] = [];
         }
     }
+    const key = focusedGrid
+        ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}`
+        : undefined;
+    let grid = focusedGrid ? app.subgrids[key] : app.grid;
+    const newItem = createNewGridItem(grid, id, data);
+    grid.push(newItem);
+    if (focusedGrid) {
+        app.subgrids[key] = grid;
+    }
     return id;
 }
 export function getAllSubgridsAndComponentIds(app, component) {
@@ -131,24 +147,10 @@ export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
     }
     return components;
 }
-export function duplicateGridItem(app, parent, id) {
-    const gridItem = findGridItem(app, id);
-    if (gridItem) {
-        const newId = getNextGridItemId(app);
-        const newItem = JSON.parse(JSON.stringify(gridItem));
-        newItem.id = newId;
-        newItem.data.id = newId;
-        let focusedGrid = parent
-            ? { parentComponentId: parent.split('-')[0], subGridIndex: Number(parent.split('-')[1]) }
-            : undefined;
-        return insertNewGridItem(app, newItem.data, focusedGrid);
-    }
-    return undefined;
-}
 export function findAvailableSpace(grid, gridItem, editorBreakpoint, parentGridItem = undefined) {
     if (gridItem) {
         const breakpoint = editorBreakpoint === 'sm' ? 3 : 12;
-        const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 12;
+        const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 16;
         const maxWidth = 12;
         const availableSpace = {
             left: 0,
@@ -226,6 +228,20 @@ function isOverlapping(item1, item2) {
         item1.y < item2.y + item2.h &&
         item1.y + item1.h > item2.y);
 }
+export function initOutput(world, id, init) {
+    if (!world) {
+        return {};
+    }
+    const output = world.outputsById[id];
+    if (init) {
+        for (const key in init) {
+            if (output && output[key] && output[key].peak() == undefined) {
+                output[key].set(init[key]);
+            }
+        }
+    }
+    return output;
+}
 export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem = undefined) {
     const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem);
     if (!availableSpace) {
@@ -233,9 +249,67 @@ export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem
     }
     const { left, right, top, bottom } = availableSpace;
     const width = $breakpoint === 'sm' ? 3 : 12;
-    const previousGridItem = JSON.parse(JSON.stringify(gridComponent[width]));
-    gridComponent[width].x = previousGridItem.x - left;
-    gridComponent[width].y = previousGridItem.y - top;
-    gridComponent[width].w = previousGridItem.w + left + right;
-    gridComponent[width].h = previousGridItem.h + top + bottom;
+    const item = gridComponent[width];
+    item.x = item.x - left;
+    item.y = item.y - top;
+    item.w = item.w + left + right;
+    item.h = item.h + top + bottom;
+}
+export function sortGridItemsPosition(gridItems, breakpoint) {
+    return gridItems.sort((a, b) => {
+        const width = breakpoint === 'lg' ? 12 : 3;
+        const aX = a[width].x;
+        const aY = a[width].y;
+        const bX = b[width].x;
+        const bY = b[width].y;
+        if (aY < bY) {
+            return -1;
+        }
+        else if (aY > bY) {
+            return 1;
+        }
+        else {
+            if (aX < bX) {
+                return -1;
+            }
+            else if (aX > bX) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        }
+    });
+}
+export function connectInput(connectingInput, componentId, path) {
+    if (connectingInput) {
+        connectingInput = {
+            opened: false,
+            input: {
+                connection: {
+                    componentId,
+                    path
+                },
+                type: 'connected'
+            },
+            hoveredComponent: undefined
+        };
+    }
+    return connectingInput;
+}
+export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
+    let filteredJSON = {};
+    Object.keys(json).forEach((key) => {
+        if (key.toLowerCase().includes(search.toLowerCase()) ||
+            extraSearch?.toLowerCase().includes(search.toLowerCase())) {
+            filteredJSON[key] = json[key];
+        }
+        else if (typeof json[key] === 'object') {
+            const res = recursivelyFilterKeyInJSON(json[key], search, extraSearch);
+            if (Object.keys(res).length !== 0) {
+                filteredJSON[key] = res;
+            }
+        }
+    });
+    return filteredJSON;
 }