feat: got instagraph working properly

src/components/App/Helper/TeachMe/index.tsx

@@ -8,7 +8,7 @@ import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { ToastMessage } from '~/components/common/Toast/toastMessage'
 import useSocket from '~/hooks/useSockets'
-import { postTeachMe } from '~/network/fetchGraphData'
+import { postTeachMe, postInstagraph } from '~/network/fetchGraphData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useTeachStore } from '~/stores/useTeachStore'
@@ -29,10 +29,9 @@ export const TeachMe = () => {
   const isSocketSet: { current: boolean } = useRef<boolean>(false)
   const socket: Socket | null = useSocket()
 
-  const [setTeachMeAnswer, setHasTeachingInProgress] = useTeachStore((s) => [
-    s.setTeachMeAnswer,
-    s.setHasTeachingInProgress,
-  ])
+  const [setTeachMeAnswer, setHasTeachingInProgress, setInstagraphAnswer, setHasInstagraphInProgress] = useTeachStore(
+    (s) => [s.setTeachMeAnswer, s.setHasTeachingInProgress, s.setInstagraphAnswer, s.setHasInstagraphInProgress],
+  )
 
   const handleTeachMe = useCallback(
     (response: ResponseType) => {
@@ -46,6 +45,21 @@ export const TeachMe = () => {
     [setTeachMeAnswer],
   )
 
+  const handleInstagraph = useCallback(
+    (response: ResponseType) => {
+      console.info('instgraph response', response.edges)
+      console.info('instgraph response', response.nodes)
+
+      setInstagraphAnswer(response)
+
+      toast(<ToastMessage message="Instagraph is ready" />, {
+        position: toast.POSITION.BOTTOM_CENTER,
+        type: 'success',
+      })
+    },
+    [setInstagraphAnswer],
+  )
+
   useEffect(() => {
     if (isSocketSet.current) {
       return
@@ -58,11 +72,20 @@ export const TeachMe = () => {
         isSocketSet.current = true
       }
     }
-  }, [socket, handleTeachMe])
+
+    if (handleInstagraph) {
+      if (socket) {
+        socket.on('instagraphhook', handleInstagraph)
+
+        isSocketSet.current = true
+      }
+    }
+  }, [socket, handleTeachMe, handleInstagraph])
 
   const handleTutorialStart = async () => {
     if (searchTerm) {
       setHasTeachingInProgress(true)
+      setHasInstagraphInProgress(true)
       setSideBarOpen(true)
       setTeachMe(true)
 
@@ -86,8 +109,18 @@ export const TeachMe = () => {
         toast(<ToastMessage message="We started preparing tutorial for you" />, {
           type: 'success',
         })
+
+        await postInstagraph({
+          term: searchTerm,
+          transcripts,
+        })
+
+        toast(<ToastMessage message="We started preparing an instagraph for you" />, {
+          type: 'success',
+        })
       } catch (error: unknown) {
         setHasTeachingInProgress(false)
+        setHasInstagraphInProgress(false)
       }
     }
   }
@@ -100,117 +133,32 @@ export const TeachMe = () => {
 }
 
 export const TeachMeText = () => {
-  const initialNodes = [
-    {
-      color: '#FF8C00',
-      data: {
-        label: 'Sphinx Relay',
-      },
-      id: 'sphinx_relay',
-      position: {
-        x: 0,
-        y: 0,
-      },
-      properties: {},
-      type: 'technology',
-    },
-    {
-      color: '#FFD700',
-      data: {
-        label: 'Layer 2 Scaling Solution',
-      },
-      id: 'layer_2_scaling_solution',
-      position: {
-        x: 0,
-        y: 100,
-      },
-      properties: {},
-      type: 'concept',
-    },
-    {
-      color: '#FFD700',
-      data: {
-        label: 'Payment Channels',
-      },
-      id: 'payment_channels',
-      position: {
-        x: -200,
-        y: 200,
-      },
-      properties: {},
-      type: 'concept',
-    },
-    {
-      color: '#FF8C00',
-      data: {
-        label: 'Lightning Network',
-      },
-      id: 'lightning_network',
-      position: {
-        x: -200,
-        y: 300,
-      },
-      properties: {},
-      type: 'technology',
-    },
-    {
-      color: '#FF8C00',
-      data: {
-        label: 'Bitcoin',
-      },
-      id: 'bitcoin',
-      position: {
-        x: -400,
-        y: 400,
-      },
-      properties: {},
-      type: 'technology',
-    },
-  ]
-
-  const initialEdges = [
-    {
-      color: '#008000',
-      direction: 'forward',
-      label: 'is a',
-      properties: {},
-      source: 'sphinx_relay',
-      target: 'layer_2_scaling_solution',
-    },
-    {
-      color: '#008000',
-      direction: 'forward',
-      label: 'uses',
-      properties: {},
-      source: 'layer_2_scaling_solution',
-      target: 'payment_channels',
-    },
-    {
-      color: '#008000',
-      direction: 'forward',
-      label: 'utilizes',
-      properties: {},
-      source: 'payment_channels',
-      target: 'lightning_network',
-    },
-    {
-      color: '#008000',
-      direction: 'forward',
-      label: 'built on',
-      properties: {},
-      source: 'lightning_network',
-      target: 'bitcoin',
-    },
-  ]
+  const [teachMeAnswer, hasTeachingInProgress, instgraphAnswser, hasInstagraphInProgress] = useTeachStore((s) => [
+    s.teachMeAnswer,
+    s.hasTeachingInProgress,
+    s.instgraphAnswser,
+    s.hasInstagraphInProgress,
+  ])
 
-  const [teachMeAnswer, hasTeachingInProgress] = useTeachStore((s) => [s.teachMeAnswer, s.hasTeachingInProgress])
+  console.info('instagraph anwser', instgraphAnswser)
 
   return (
     <>
+      {!hasInstagraphInProgress ? (
+        <ReactFlow edges={instgraphAnswser.edges} nodes={instgraphAnswser.nodes} />
+      ) : (
+        <Flex align="center" justify="center" py={12}>
+          <Flex align="center" py={12}>
+            <PropagateLoader color={colors.white} />
+          </Flex>
+          <Flex align="center" py={12}>
+            <Text>Generating instagraph</Text>
+          </Flex>
+        </Flex>
+      )}
       {!hasTeachingInProgress ? (
         <>
-          <ReactFlow edges={initialEdges} nodes={initialNodes} />
-          <Flex>
+          <Flex style={{ paddingLeft: '10px', paddingRight: '10px' }}>
             <Text>{teachMeAnswer}</Text>
           </Flex>
           <AskQuestion />

src/components/App/SecondarySidebar/index.tsx

@@ -39,7 +39,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({
   background: colors.BG1,
   height: '100vh',
   padding: '16px 20px',
-  width: '100%',
+  width: '110%',
   zIndex: 30,
   display: 'flex',
   [theme.breakpoints.up('sm')]: {

src/components/App/SideBar/SidebarSubView/index.tsx

@@ -10,12 +10,12 @@ import { SelectedNodeView } from '../SelectedNodeView'
 type Props = { open: boolean }
 
 export const SideBarSubView = ({ open }: Props) => {
-  const [setSelectedNode, setTeachMe] = useDataStore((s) => [s.setSelectedNode, s.setTeachMe])
+  const [setSelectedNode, setTeachMe, showTeachMe] = useDataStore((s) => [s.setSelectedNode, s.setTeachMe, s.showTeachMe])
 
   console.log('IS OPEN', open)
 
   return (
-    <Slide direction="right" in={open} mountOnEnter unmountOnExit>
+    <Slide direction="right" in={open} mountOnEnter style={{ width: showTeachMe ? '700px' : '' }} unmountOnExit>
       <Wrapper>
         <ScrollWrapper>
           <SelectedNodeView />

src/components/App/SideBar/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Slide } from '@mui/material'
+import { Slide } from '@mui/material'
 import { forwardRef, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
@@ -96,14 +96,6 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
             </div>
             <div className="right">
               <TeachMe />
-              <Button
-                onClick={() => {
-                  setSidebarOpen(true)
-                  setTeachMe(true)
-                }}
-              >
-                Teach Me
-              </Button>
             </div>
           </SearchDetails>
         )}

src/constants/index.ts

@@ -4,6 +4,7 @@ const { origin, host } = window.location
 export const isDevelopment = !!(
   origin === 'http://localhost:3000' ||
   origin === 'http://localhost:3001' ||
+  origin === 'http://localhost:3004' ||
   origin === 'https://sphinx-jarvis-david.sphinx1.repl.co'
 )
 

src/network/fetchGraphData/index.ts

@@ -149,6 +149,18 @@ export const postTeachMe = async (data: TeachData) => {
   return api.post(`/teachme`, JSON.stringify(data), { Authorization: lsatToken })
 }
 
+export const postInstagraph = async (data: TeachData) => {
+  console.log(data)
+
+  const lsatToken = await getLSat('instagraph')
+
+  if (!lsatToken) {
+    throw new Error('An error occured calling getLSat')
+  }
+
+  return api.post(`/instagraph`, JSON.stringify(data), { Authorization: lsatToken })
+}
+
 export const postAskQuestion = async (data: QuestionData) => {
   const lsatToken = await getLSat('ask_question')
 

src/stores/useTeachStore/index.ts

@@ -1,31 +1,51 @@
 import create from 'zustand'
 
+type InstagraphResponse = {
+  edges: Array[{ direction: string; label: string; properties: object; source: string; target: string; color: string }]
+  nodes: Array[{
+    color: string
+    id: string
+    data: { label: string }
+    position: { x: number; y: number }
+    properties: object
+    type: string
+  }]
+}
+
 type TeachStore = {
   askedQuestions: string[] | null
   askedQuestionsAnswers: string[] | null
   teachMeAnswer: string | null
+  instgraphAnswser: InstagraphResponse
   hasQuestionInProgress: boolean
   hasTeachingInProgress: boolean
+  hasInstagraphInProgress: boolean
   setAskedQuestion: (question: string) => void
   setAskedQuestionAnswer: (answer: string) => void
   setHasQuestionInProgress: (hasQuestionInProgress: boolean) => void
   setHasTeachingInProgress: (hasTeachingInProgress: boolean) => void
+  setHasInstagraphInProgress: (hasInstagraphInProgress: boolean) => void
   setTeachMeAnswer: (answer: string) => void
+  setInstagraphAnswer: (answer: InstagraphResponse) => void
 }
 
 const defaultData: Omit<
   TeachStore,
   | 'setTeachMeAnswer'
+  | 'setInstagraphAnswer'
   | 'setAskedQuestionAnswer'
   | 'setAskedQuestion'
   | 'setHasQuestionInProgress'
+  | 'setHasInstagraphInProgress'
   | 'setHasTeachingInProgress'
 > = {
   askedQuestions: null,
   askedQuestionsAnswers: null,
   hasQuestionInProgress: false,
   hasTeachingInProgress: false,
+  hasInstagraphInProgress: false,
   teachMeAnswer: null,
+  instgraphAnswser: null,
 }
 
 export const useTeachStore = create<TeachStore>((set) => ({
@@ -48,5 +68,17 @@ export const useTeachStore = create<TeachStore>((set) => ({
     set({
       hasTeachingInProgress,
     }),
+  setHasInstagraphInProgress: (hasInstagraphInProgress: boolean) =>
+    set({
+      hasInstagraphInProgress,
+    }),
   setTeachMeAnswer: (answer: string) => set({ hasTeachingInProgress: false, teachMeAnswer: answer }),
+  setInstagraphAnswer: (answer: InstagraphResponse) => {
+    console.info(answer.instagraph)
+
+    set({
+      hasInstagraphInProgress: false,
+      instgraphAnswser: { edges: answer.instagraph.edges, nodes: answer.instagraph.nodes },
+    })
+  },
 }))

src/utils/getLSat/index.ts

@@ -3,12 +3,13 @@ import * as sphinx from 'sphinx-bridge-kevkevinpal'
 import { API_URL } from '~/constants'
 import { requestProvider } from 'webln'
 
-type Action = 'searching' | 'adding_node' | 'teachme' | 'ask_question' | 'sentiments'
+type Action = 'searching' | 'adding_node' | 'teachme' | 'instagraph' | 'ask_question' | 'sentiments'
 
 const ActionsMapper: Record<Action, string> = {
   searching: 'GET',
   adding_node: 'POST',
   teachme: 'POST',
+  instagraph: 'POST',
   ask_question: 'POST',
   sentiments: 'GET',
 }
@@ -84,7 +85,7 @@ export const getUnpaidLsat = async (action: Action, search?: string) => {
 
   const data = await resp.json()
 
-  const lsat = ['teachme', 'ask_question', 'sentiments'].includes(action)
+  const lsat = ['instagraph', 'teachme', 'ask_question', 'sentiments'].includes(action)
     ? Lsat.fromHeader(resp.headers.get('www-authenticate') || '')
     : Lsat.fromHeader(data.headers)