slick-table 1.2.1 → 1.2.3

package/dist/types/shared/model/types/IRecentQuery.d.ts

@@ -0,0 +1,5 @@
+export interface IRecentQuery {
+    time: string;
+    query: string;
+}
+//# sourceMappingURL=IRecentQuery.d.ts.map

package/dist/types/shared/model/types/IRecentQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IRecentQuery.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/types/IRecentQuery.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACd"}

package/dist/types/shared/model/types/index.d.ts

@@ -12,6 +12,7 @@ export type { IHotKeysBehavior } from './IHotKeysBehavior';
 export type { IHtmlDocElements } from './IHtmlDocElements';
 export type { IObserver } from './IObserver';
 export type { IPrinter } from './IPrinter';
+export type { IRecentQuery } from './IRecentQuery';
 export type { ISlickTable } from './ISlickTable';
 export type { ISlickRow } from './ISlickRow';
 export type { ITotalCalculator } from './ITotalCalculator';

package/dist/types/shared/model/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",
@@ -48,6 +48,7 @@
     "@mui/material": "^6.1.6",
     "@mui/x-date-pickers": "^7.22.2",
     "moment": "^2.30.1",
+    "myworkql": "^0.1.0",
     "pikaday": "^1.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/app/styles/icons.scss

@@ -15,3 +15,7 @@ $red: #ff3737;
 @include svg("sgi-link-off", $gray, "M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.43 19.12,14.63 17.79,15L19.25,16.44C20.88,15.61 22,13.95 22,12A5,5 0 0,0 17,7M16,11H13.81L15.81,13H16V11M2,4.27L5.11,7.38C3.29,8.12 2,9.91 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12C3.9,10.41 5.11,9.1 6.66,8.93L8.73,11H8V13H10.73L13,15.27V17H14.73L18.74,21L20,19.74L3.27,3L2,4.27Z");
 @include svg("sgi-notification-clear-all", $gray, "M5,13H19V11H5M3,17H17V15H3M7,7V9H21V7");
 @include svg("sgi-printer", $gray, "M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z");
+@include svg("sgi-table-large", $gray, "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z");
+@include svg("sgi-minus", $gray, "M19,13H5V11H19V13Z");
+@include svg("sgi-close", $gray, "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z");
+@include svg("sgi-arrow-expand", $gray, "M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z");

package/src/entities/drawer-run-query/index.ts

@@ -0,0 +1 @@
+export { DrawerRunQuery } from "./ui";

package/src/entities/drawer-run-query/lib/grouping/getGroupLabel.spec.ts

@@ -0,0 +1,46 @@
+import moment from "moment";
+
+import { getGroupLabel } from "./getGroupLabel";
+
+const toDateString = (date: Date): string => moment(date).format("YYYY-MM-DD");
+
+const daysAgo = (days: number): Date => moment().subtract(days, "day").toDate();
+
+describe("pages | chat-with-ai | lib | getGroupLabel", () => {
+	it('returns "Today" for the current date', () => {
+		expect(getGroupLabel(new Date())).toBe("Today");
+	});
+
+	it('returns "Yesterday" for the previous calendar day', () => {
+		expect(getGroupLabel(daysAgo(1))).toBe("Yesterday");
+	});
+
+	it("returns a relative label for dates within the relative limit", () => {
+		expect(getGroupLabel(daysAgo(2))).toBe("2 days");
+		expect(getGroupLabel(daysAgo(15))).toBe("15 days");
+	});
+
+	it('returns "30 days" on the last day of the relative limit', () => {
+		expect(getGroupLabel(daysAgo(30))).toBe("30 days");
+	});
+
+	it("returns the formatted date for dates beyond the relative limit", () => {
+		const lastMonth = daysAgo(31);
+		const lastYear = daysAgo(365);
+
+		expect(getGroupLabel(lastMonth)).toBe(toDateString(lastMonth));
+		expect(getGroupLabel(lastYear)).toBe(toDateString(lastYear));
+		expect(getGroupLabel(lastMonth)).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+	});
+
+	it("uses calendar days and ignores the time of day", () => {
+		const yesterdayEvening = daysAgo(1);
+		yesterdayEvening.setHours(23, 59, 59, 999);
+
+		const thirtyDaysAgoEvening = daysAgo(30);
+		thirtyDaysAgoEvening.setHours(23, 59, 59, 999);
+
+		expect(getGroupLabel(yesterdayEvening)).toBe("Yesterday");
+		expect(getGroupLabel(thirtyDaysAgoEvening)).toBe("30 days");
+	});
+});

package/src/entities/drawer-run-query/lib/grouping/getGroupLabel.ts

@@ -0,0 +1,26 @@
+import moment from "moment";
+
+import { EDateFormat } from "shared/model/enums";
+
+const RELATIVE_DAY_LIMIT = 30;
+
+/**
+ * Builds a human readable label for the day a query was run on.
+ * The label is relative ("Today", "Yesterday", "N days") within the limit
+ * and an absolute date after it. Days are calendar days, the time of day
+ * is ignored.
+ * */
+export const getGroupLabel = (date: Date): string => {
+	const value = moment(date);
+
+	if (value.isSame(moment(), "day")) return "Today";
+	if (value.isSame(moment().subtract(1, "day"), "day")) return "Yesterday";
+
+	const daysAgo = moment()
+		.startOf("day")
+		.diff(value.clone().startOf("day"), "days");
+
+	if (daysAgo <= RELATIVE_DAY_LIMIT) return `${daysAgo} days`;
+
+	return value.format(EDateFormat.db);
+};

package/src/entities/drawer-run-query/lib/grouping/groupQueriesByDate.spec.ts

@@ -0,0 +1,54 @@
+import moment from "moment";
+
+import { IRecentQuery } from "shared/model/types";
+
+import { groupQueriesByDate } from "./groupQueriesByDate";
+
+const toTime = (daysAgo: number, time = "12:00:00"): string =>
+	moment().subtract(daysAgo, "day").format(`YYYY-MM-DD ${time}`);
+
+const makeQuery = (query: string, time: string): IRecentQuery => ({
+	query,
+	time,
+});
+
+describe("pages | chat-with-ai | lib | groupConversationsByDate", () => {
+	it("groups conversations into today, yesterday, N days and dated buckets", () => {
+		const conversations = [
+			makeQuery("older", toTime(31)),
+			makeQuery("30d", toTime(30)),
+			makeQuery("2d", toTime(2)),
+			makeQuery("yesterday", toTime(1)),
+			makeQuery("today-late", toTime(0, "15:00:00")),
+			makeQuery("today-early", toTime(0, "09:00:00")),
+		];
+
+		const groups = groupQueriesByDate(conversations);
+
+		expect(groups.map((group) => group.label)).toEqual([
+			"Today",
+			"Yesterday",
+			"2 days",
+			"30 days",
+			toTime(31).slice(0, 10),
+		]);
+	});
+
+	it("sorts conversations within a group by time descending", () => {
+		const conversations = [
+			makeQuery("early", toTime(0, "09:00:00")),
+			makeQuery("late", toTime(0, "15:00:00")),
+		];
+
+		const groups = groupQueriesByDate(conversations);
+
+		expect(groups[0].queries.map(({ query }) => query)).toEqual([
+			"late",
+			"early",
+		]);
+	});
+
+	it("returns an empty array for empty input", () => {
+		expect(groupQueriesByDate([])).toEqual([]);
+	});
+});

package/src/entities/drawer-run-query/lib/grouping/groupQueriesByDate.ts

@@ -0,0 +1,37 @@
+import moment from "moment";
+
+import { dateFormats } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { IRecentQuery } from "shared/model/types";
+
+import { IQueryGroup } from "../../model";
+import { getGroupLabel } from "./getGroupLabel";
+
+export const groupQueriesByDate = (
+	recentQueries: IRecentQuery[],
+): IQueryGroup[] => {
+	const sorted = [...recentQueries].sort(
+		(a, b) =>
+			moment(b.time, dateFormats).valueOf() -
+			moment(a.time, dateFormats).valueOf(),
+	);
+
+	const groups = new Map<string, IQueryGroup>();
+
+	for (const query of sorted) {
+		const date = moment(query.time, dateFormats).startOf("day");
+		const key = date.format(EDateFormat.db);
+
+		const group = groups.get(key);
+		if (group) {
+			group.queries.push(query);
+		} else {
+			groups.set(key, {
+				label: getGroupLabel(date.toDate()),
+				queries: [query],
+			});
+		}
+	}
+
+	return Array.from(groups.values());
+};

package/src/entities/drawer-run-query/lib/grouping/index.ts

@@ -0,0 +1 @@
+export { groupQueriesByDate } from "./groupQueriesByDate";

package/src/entities/drawer-run-query/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useResizeCanvas } from "./useResizeCanvas";
+export { useSubscribeToEvent } from "./useSubscribeToEvent";

package/src/entities/drawer-run-query/lib/hooks/useResizeCanvas.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+import { TRANSITION_MS } from "../../model";
+import { tableQuery } from "../table";
+
+export function useResizeCanvas(isExpanded: boolean) {
+	useEffect(() => {
+		if (!isExpanded) return;
+		setTimeout(() => {
+			tableQuery.grid?.resizeCanvas();
+		}, TRANSITION_MS);
+	}, [isExpanded]);
+}

package/src/entities/drawer-run-query/lib/hooks/useSubscribeToEvent.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+import { eventRunQuery } from "shared/lib/slickgrid";
+
+export function useSubscribeToEvent(
+	setIsOpened: Dispatch<SetStateAction<boolean>>,
+	tableId: string,
+) {
+	useEffect(() => {
+		function callback() {
+			const { open, table } = eventRunQuery;
+			if (table?.id !== tableId) return;
+			setIsOpened(open);
+		}
+		eventRunQuery.subscribe(callback);
+		return () => {
+			eventRunQuery.unsubscribe(callback);
+		};
+	}, [tableId]);
+}

package/src/entities/drawer-run-query/lib/index.ts

@@ -0,0 +1,3 @@
+export { groupQueriesByDate } from "./grouping";
+export { useResizeCanvas, useSubscribeToEvent } from "./hooks";
+export { tableQuery, getColumsHash } from "./table";

package/src/entities/drawer-run-query/lib/table/getColumsHash.ts

@@ -0,0 +1,18 @@
+import { eventRunQuery } from "shared/lib/slickgrid";
+import { IS_EDITED } from "shared/model/consts";
+import { IColumn } from "shared/model/types";
+
+export function getColumsHash(): Record<string, IColumn> {
+	const table = eventRunQuery.table;
+	if (!table) return {};
+	const grid = table.grid;
+	if (!grid) return {};
+	const columns: IColumn[] = grid.getColumns();
+	const result: Record<string, IColumn> = {};
+	for (const column of columns) {
+		if (column.id !== "_checkbox_selector" && column.id !== IS_EDITED) {
+			result[column.id] = column;
+		}
+	}
+	return result;
+}

package/src/entities/drawer-run-query/lib/table/index.ts

@@ -0,0 +1,2 @@
+export { tableQuery } from "./tableQuery";
+export { getColumsHash } from "./getColumsHash";

package/src/entities/drawer-run-query/lib/table/tableQuery.ts

@@ -0,0 +1,3 @@
+import { SlickTable } from "shared/lib/slickgrid/model/SlickTable/table/SlickTable";
+
+export const tableQuery = new SlickTable({ id: "table-query" });

package/src/entities/drawer-run-query/model/consts/consts.ts

@@ -0,0 +1,2 @@
+export const TRANSITION_MS = 300;
+export const QUERY_LANGUAGE = "QUERY_LANGUAGE";

package/src/entities/drawer-run-query/model/consts/index.ts

@@ -0,0 +1 @@
+export { QUERY_LANGUAGE, TRANSITION_MS } from "./consts";

package/src/entities/drawer-run-query/model/index.ts

@@ -0,0 +1,2 @@
+export { QUERY_LANGUAGE, TRANSITION_MS } from "./consts";
+export type { IQueryGroup } from "./types";

package/src/entities/drawer-run-query/model/types/IQueryGroup.ts

@@ -0,0 +1,6 @@
+import { IRecentQuery } from "shared/model/types";
+
+export interface IQueryGroup {
+	label: string;
+	queries: IRecentQuery[];
+}

package/src/entities/drawer-run-query/model/types/index.ts

@@ -0,0 +1 @@
+export type { IQueryGroup } from "./IQueryGroup";

package/src/entities/drawer-run-query/ui/DrawerRunQuery.style.ts

@@ -0,0 +1,129 @@
+import {
+	Box,
+	Button,
+	Drawer,
+	IconButton,
+	InputAdornment,
+	TextField,
+	Typography,
+	styled,
+} from "@mui/material";
+
+import { doNotForwardProps } from "shared/lib/dom";
+
+import { TRANSITION_MS } from "../model";
+
+const HEIGHT_EXPANDED = "90vh";
+const HEIGHT_COLLAPSED_EM = 11;
+
+const StyledDrawer = styled(Drawer, {
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
+})<{ isExpanded: boolean }>(({ isExpanded }) => ({
+	zIndex: 1300,
+	"& .MuiDrawer-paper": {
+		borderTopLeftRadius: "10px",
+		borderTopRightRadius: "10px",
+		columnGap: "1em",
+		display: "grid",
+		gridTemplateColumns: "25% 1fr",
+		transition: `${TRANSITION_MS / 1000}s`,
+		height: isExpanded ? HEIGHT_EXPANDED : `${HEIGHT_COLLAPSED_EM}em`,
+		padding: "1em",
+	},
+	"& div.MuiBackdrop-root": {
+		opacity: "0 !important",
+	},
+}));
+
+const Header = styled(Box)({
+	display: "flex",
+	justifyContent: "space-between",
+});
+
+const Title = styled(Typography)({
+	color: "#235B95",
+	marginBottom: "0.5em",
+	fontWeight: "600",
+	fontSize: "16px",
+	letterSpacing: "-2%",
+	minWidth: "14em",
+});
+
+const RowsNumber = styled(Box)({
+	color: "#1E456F",
+});
+
+const StyledTextField = styled(TextField)({
+	width: "100%",
+	"& .MuiInputBase-root": {
+		borderRadius: "10px",
+		padding: "11px 14px",
+		color: "#235B95",
+	},
+});
+
+const EndAdornment = styled(InputAdornment)({
+	alignSelf: "flex-start",
+	marginTop: "-2px",
+});
+
+const ClearButton = styled(IconButton)({
+	color: "#808080",
+	padding: "4px",
+	"& .sgi": {
+		display: "block",
+	},
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
+const ContainerInput = styled(Box)({
+	display: "flex",
+	columnGap: "0.5em",
+	marginTop: "1em",
+	width: "100%",
+	marginBottom: "1em",
+});
+
+const ColumnName = styled("span")({
+	fontSize: "0.875rem",
+	cursor: "pointer",
+	backgroundColor: "aliceblue",
+	borderRadius: "10px",
+	padding: "5px",
+});
+
+const ContainerTable = styled(Box, {
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
+})<{ isExpanded: boolean }>(({ isExpanded }) => ({
+	overflowY: "auto",
+	transition: `${TRANSITION_MS / 1000}s`,
+	height: isExpanded
+		? `calc(${HEIGHT_EXPANDED} - ${HEIGHT_COLLAPSED_EM + 2}em)`
+		: "0vh",
+}));
+
+const StyledButton = styled(Button)({
+	backgroundColor: "#2FAF7D",
+	color: "#FBFBFB",
+	textTransform: "none",
+	width: "229px",
+	height: "45px",
+	borderRadius: "10px",
+});
+
+export default {
+	Button: StyledButton,
+	ClearButton,
+	ColumnName,
+	ContainerInput,
+	ContainerTable,
+	Drawer: StyledDrawer,
+	EndAdornment,
+	Header,
+	RowsNumber,
+	TextField: StyledTextField,
+	Title,
+};

package/src/entities/drawer-run-query/ui/DrawerRunQuery.tsx

@@ -0,0 +1,195 @@
+import { Box, IconButton, Tooltip } from "@mui/material";
+import { GvizTable } from "myworkql";
+import { ChangeEvent, FC, MouseEvent, useRef, useState } from "react";
+import { SlickDataView } from "slickgrid";
+
+import { localStore } from "shared/lib/localStrore";
+import { SlickgridTable, eventRunQuery } from "shared/lib/slickgrid";
+import { IColumn } from "shared/model/types";
+
+import {
+	getColumsHash,
+	tableQuery,
+	useResizeCanvas,
+	useSubscribeToEvent,
+} from "../lib";
+import { QueryHistory } from "./QueryHistory";
+
+import Styled from "./DrawerRunQuery.style";
+
+export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
+	const [query, setQuery] = useState("");
+	const [isOpened, setIsOpened] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [items, setItems] = useState<Record<string, any>[]>([]);
+	const [columns, setColumns] = useState<IColumn[]>([]);
+	const queryInputRef = useRef<HTMLTextAreaElement>(null);
+	const columnsHash = getColumsHash();
+
+	function closeDrawer() {
+		eventRunQuery.open = false;
+	}
+
+	function updateQuery(event: ChangeEvent<HTMLTextAreaElement>) {
+		setQuery(event.target.value);
+	}
+
+	function clearQuery() {
+		const input = queryInputRef.current;
+		setQuery("");
+		requestAnimationFrame(() => input?.focus());
+	}
+
+	function pasteColumnId(event: MouseEvent<HTMLSpanElement>) {
+		const columnId = event.currentTarget.id;
+		if (!columnId) return;
+		const input = queryInputRef.current;
+		if (!input) return;
+		const start = input.selectionStart ?? query.length;
+		const end = input.selectionEnd ?? query.length;
+		setQuery(query.slice(0, start) + columnId + query.slice(end));
+		const caret = start + columnId.length;
+		requestAnimationFrame(() => {
+			input.focus();
+			input.setSelectionRange(caret, caret);
+		});
+	}
+
+	function executeQuery(query: string) {
+		const table = eventRunQuery.table;
+		if (!table) return;
+		const grid = table.grid;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		const items = dataView.getItems();
+		const itemsCopy = [];
+		const fields = Object.keys(columnsHash);
+		for (const item of items) {
+			const newItem: Record<string, string | number | boolean> = {};
+			for (const field of fields) {
+				newItem[field] = item[field];
+			}
+			itemsCopy.push(newItem);
+		}
+		const gvizTable = new GvizTable(itemsCopy);
+		const run = gvizTable.query(query);
+		const newItems = run.toObjects();
+		setItems(newItems);
+		setColumns(
+			Object.keys(newItems[0] || {}).map(
+				(key): IColumn => ({
+					id: columnsHash[key].id,
+					field: columnsHash[key].field,
+					name: columnsHash[key].name,
+					formatter: columnsHash[key].formatter,
+					cssClass: columnsHash[key].cssClass,
+				}),
+			),
+		);
+		setIsExpanded(true);
+		localStore.queries.set(tableId, query);
+	}
+
+	useSubscribeToEvent(setIsOpened, tableId);
+	useResizeCanvas(isExpanded);
+
+	if (!isOpened) return null;
+
+	return (
+		<Styled.Drawer
+			anchor={"bottom"}
+			open={isOpened}
+			onClose={closeDrawer}
+			disablePortal
+			isExpanded={isExpanded}
+		>
+			<QueryHistory
+				executeQuery={executeQuery}
+				query={query}
+				setQuery={setQuery}
+			/>
+			<Box>
+				<Styled.Header>
+					<Styled.Title variant={"h6"}>
+						Run query across table data
+					</Styled.Title>
+					<Box>
+						{isExpanded && (
+							<IconButton onClick={() => setIsExpanded(false)}>
+								<span className={"sgi sgi-minus"}></span>
+							</IconButton>
+						)}
+						{!isExpanded && (
+							<IconButton onClick={() => setIsExpanded(true)}>
+								<span className={"sgi sgi-arrow-expand"}></span>
+							</IconButton>
+						)}
+						<IconButton onClick={closeDrawer}>
+							<span className={"sgi sgi-close"}></span>
+						</IconButton>
+					</Box>
+				</Styled.Header>
+				<Styled.ContainerInput>
+					<Styled.TextField
+						id="query-input"
+						label="Query"
+						maxRows={10}
+						multiline
+						onChange={updateQuery}
+						inputRef={queryInputRef}
+						slotProps={{
+							input: {
+								endAdornment: !!query && (
+									<Styled.EndAdornment position={"end"}>
+										<Tooltip title={"Clear query"}>
+											<Styled.ClearButton
+												aria-label={"Clear query"}
+												onClick={clearQuery}
+												size={"small"}
+											>
+												<span className={"sgi sgi-close"}></span>
+											</Styled.ClearButton>
+										</Tooltip>
+									</Styled.EndAdornment>
+								),
+							},
+						}}
+						value={query}
+					/>
+					<Styled.Button
+						disabled={!query.trim()}
+						onClick={() => executeQuery(query)}
+						variant={"contained"}
+					>
+						Execute
+					</Styled.Button>
+				</Styled.ContainerInput>
+				<Box sx={{ display: "flex", columnGap: "1em", marginBottom: "1em" }}>
+					{Object.values(columnsHash).map(({ id, name }) => (
+						<Styled.ColumnName
+							key={id}
+							id={id as string}
+							onClick={pasteColumnId}
+						>
+							{`#${name}`}
+						</Styled.ColumnName>
+					))}
+				</Box>
+				<Styled.ContainerTable isExpanded={isExpanded}>
+					{!!columns.length && (
+						<SlickgridTable
+							assignIds={true}
+							columns={columns}
+							items={items}
+							table={tableQuery}
+						/>
+					)}
+				</Styled.ContainerTable>
+			</Box>
+		</Styled.Drawer>
+	);
+};
+
+interface Props {
+	tableId: string;
+}