feat: screenshot button for query builder

libs/shared/lib/querybuilder/panel/QueryBuilder.tsx

@@ -45,6 +45,7 @@ import { ConnectingNodeDataI } from './utils/connectorDrop';
 import { resultSetFocus } from '../../data-access/store/interactionSlice';
 import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
 import { QueryBuilderNav, QueryBuilderToggleSettings } from './QueryBuilderNav';
+import html2canvas from 'html2canvas';
 import { ContextMenu } from './ContextMenu';
 
 export type QueryBuilderProps = {
@@ -57,6 +58,7 @@ export type QueryBuilderProps = {
 export const QueryBuilderInner = (props: QueryBuilderProps) => {
   const [toggleSettings, setToggleSettings] = useState<QueryBuilderToggleSettings>();
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const reactFlowRef = useRef<HTMLDivElement>(null);
   const queryBuilderSettings = useQuerybuilderSettings();
   const saveStateAuthorization = useActiveSaveStateAuthorization();
 
@@ -504,6 +506,21 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
     }
   }, [queryBuilderSettings]);
 
+  const handleScreenshot = async () => {
+    if (reactFlowRef.current) {
+      try {
+        const canvas = await html2canvas(reactFlowRef.current);
+        const screenshotUrl = canvas.toDataURL('image/jpeg');
+        const link = document.createElement('a');
+        link.href = screenshotUrl;
+        link.download = 'querybuilder.png';
+        link.click();
+      } catch (error) {
+        dispatch(addError('Screenshot failed.'));
+      }
+    }
+  };
+
   return (
     <QueryBuilderDispatcherContext.Provider
       value={{
@@ -543,7 +560,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
           onRunQuery={() => {
             if (props.onRunQuery) props.onRunQuery();
           }}
-          onScreenshot={() => {}}
+          onScreenshot={handleScreenshot}
           onLogic={() => {
             if (toggleSettings === 'logic') setToggleSettings(undefined);
             else setToggleSettings('logic');
@@ -602,6 +619,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
           </defs>
         </svg>
         <ReactFlow
+          ref={reactFlowRef}
           edges={elements.edges}
           nodes={elements.nodes}
           snapGrid={[10, 10]}