feat(tips_for_users): added tip to navigate schema panel and querybuilder if...

feat(tips_for_users): added tip to navigate schema panel and querybuilder if it is the user's first time using the tool

New users may not know that the schema panel can be panned by using space as a key. We show them that this functionality exists.
Solves #29

apps/web/src/app/app.tsx

@@ -53,6 +53,7 @@ export function App(props: App) {
   const query = useQuerybuilderGraph();
   const queryHash = useQuerybuilderHash();
   const ws = useRef(new WebSocketHandler(domain));
+  const [authCheck, setAuthCheck] = useState(false);
 
   useEffect(() => {
     // Default
@@ -88,6 +89,7 @@ export function App(props: App) {
     console.log(auth.authorized);
     if (auth.authorized) {
       api.GetAllDatabases({ updateSessionCache: true });
+      setAuthCheck(true);
     }
   }, [auth.authorized]);
 
@@ -117,7 +119,7 @@ export function App(props: App) {
           <main className={styles.mainContainer}>
             <div className={styles.schema}>
               <Panel content="Schema">
-                <Schema />
+                <Schema auth={authCheck} />
               </Panel>
             </div>
             <div className={styles.panel}>

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

@@ -18,7 +18,12 @@ import ReactFlow, {
 } from 'reactflow';
 import styles from './querybuilder.module.scss';
 
-import React, { ReactComponentElement, useMemo, useRef } from 'react';
+import React, {
+  ReactComponentElement,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
 import {
   AttributePill,
   ConnectionDragLine,
@@ -49,6 +54,7 @@ import {
 } from '@graphpolaris/shared/lib/querybuilder/graph/graphology/utils';
 import { Handles } from '@graphpolaris/shared/lib/querybuilder/graph/reactflow/handles';
 import { useDispatch } from 'react-redux';
+import { Card, CardContent, Typography } from '@mui/material';
 
 const nodeTypes = {
   entity: EntityFlowElement,
@@ -287,6 +293,21 @@ export const QueryBuilder: React.FC = () => {
           attributionPosition="top-right"
         >
           <Background gap={10} size={0.7} />
+          {elements &&
+            elements.edges.length == 0 &&
+            elements.nodes.length == 0 && (
+              <Card
+                variant="outlined"
+                sx={{ minWidth: 275, marginTop: 3, marginRight: 10 }}
+              >
+                <CardContent>
+                  <Typography sx={{ fontSize: 20 }} color="text.secondary">
+                    Drag some node from the Schema panel
+                  </Typography>
+                </CardContent>
+              </Card>
+            )}
+
           <Controls
             showZoom={false}
             showInteractive={false}

libs/shared/lib/schema/panel/schema.tsx

@@ -45,9 +45,11 @@ import { NodeQualityRelationPopupNode } from '../pills/nodes/popup/node-quality-
 import { AttributeAnalyticsPopupMenu } from '../pills/nodes/popup/attribute-analytics-popup-menu';
 import NodeEdge from '../pills/edges/node-edge';
 import SelfEdge from '../pills/edges/self-edge';
+import { Card, CardContent, LinearProgress, Typography } from '@mui/material';
 
 interface Props {
   content?: string;
+  auth?: boolean;
 }
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => {
@@ -75,6 +77,13 @@ const edgeTypes = {
 export const Schema = (props: Props) => {
   const [nodes, setNodes, onNodeChanged] = useNodesState([] as Node[]);
   const [edges, setEdges, onEdgeChanged] = useEdgesState([] as Edge[]);
+  const [firstUserConnection, setFirstUserConnection] = useState<boolean>(true);
+  const [firstUserConnectionCheck, setFirstUserConnectionCheck] = useState<
+    string | null
+  >(sessionStorage.getItem('firstUserConnection'));
+  const [auth, setAuth] = useState(props.auth);
+  const [authCheck, setAuthCheck] = useState<boolean | null | undefined>(false);
+
   // In case the schema is updated
   const schemaGraphology = useSchemaGraphology();
   const schemaGraph = useSchemaGraph();
@@ -87,8 +96,8 @@ export const Schema = (props: Props) => {
   //   console.log('dbSchema', schemaGraphology, schemaGraphology.order);
   // }, [schemaGraphology]);
 
-  const toggleNodeQualityPopup = (id: string) => { };
-  const toggleAttributeAnalyticsPopupMenu = (id: string) => { };
+  const toggleNodeQualityPopup = (id: string) => {};
+  const toggleAttributeAnalyticsPopupMenu = (id: string) => {};
 
   function updateLayout() {
     const layoutFactory = new LayoutFactory();
@@ -99,8 +108,42 @@ export const Schema = (props: Props) => {
 
   useEffect(() => {
     updateLayout();
+    sessionStorage.setItem(
+      'firstUserConnection',
+      firstUserConnection.toString()
+    );
   }, []);
 
+  useEffect(() => {
+    setAuth(props.auth);
+  }, [props.auth]);
+
+  useEffect(() => {
+    setAuthCheck(auth);
+  }, [auth]);
+
+  useEffect(() => {
+    if (authCheck) {
+      if (!firstUserConnectionCheck || firstUserConnectionCheck === 'true') {
+        setFirstUserConnection(true);
+      } else {
+        setFirstUserConnection(false);
+      }
+      setTimeout(() => {
+        let sessionStorageUserConnection = sessionStorage.getItem(
+          'firstUserConnection'
+        );
+        if (
+          sessionStorageUserConnection &&
+          sessionStorageUserConnection === 'true'
+        ) {
+          sessionStorage.setItem('firstUserConnection', 'false');
+          setFirstUserConnection(false);
+        }
+      }, 5000);
+    }
+  }, [authCheck]);
+
   useEffect(() => {
     if (schemaGraphology == undefined || schemaGraphology.order == 0) {
       return;
@@ -168,6 +211,34 @@ export const Schema = (props: Props) => {
           panOnDrag={false}
           attributionPosition="top-right"
         >
+          {firstUserConnection && (
+            <Card
+              variant="outlined"
+              sx={{
+                minWidth: 275,
+                marginTop: 3,
+                marginRight: 10,
+                zIndex: 9,
+                backgroundColor: '#ffffff',
+                position: 'inherit',
+              }}
+            >
+              <CardContent>
+                <Typography sx={{ fontSize: 20 }} color="text.secondary">
+                  Press "space" while you move the schema
+                </Typography>
+                <LinearProgress
+                  sx={{
+                    color: (theme) =>
+                      theme.palette.grey[
+                        theme.palette.mode === 'light' ? 200 : 800
+                      ],
+                  }}
+                />
+              </CardContent>
+            </Card>
+          )}
+
           <Controls
             showInteractive={false}
             showZoom={false}