Merge pull request #158 from us3r-network/F-indexModel-ttang

feat: index model
us3r-network · Jul 7, 2023 · 40ea43f · 40ea43f
2 parents 4bdf033 + faf1bf7
commit 40ea43f
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 67 deletions.
diff --git a/packages/client/scan/package.json b/packages/client/scan/package.json
@@ -35,7 +35,7 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.36.1",
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-alpha.3",
+    "react-aria-components": "^1.0.0-alpha.5",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.0.0",

diff --git a/packages/client/scan/src/api/index.ts b/packages/client/scan/src/api/index.ts
@@ -211,3 +211,21 @@ export function uploadImage({ file }: { file: File }) {
     data: form,
   })
 }
+
+export function startIndexModel({
+  network,
+  modelId,
+  didSession,
+}: {
+  network: Network
+  modelId: string
+  didSession?: string
+}): AxiosPromise<ApiResp<null>> {
+  return axios({
+    url: `${API_BASE_URL}/models/indexing?network=${network.toUpperCase()}&model=${modelId}`,
+    method: 'post',
+    headers: {
+      'did-session': didSession || '',
+    },
+  })
+}
diff --git a/packages/client/scan/src/components/Dapp/Tabs.tsx b/packages/client/scan/src/components/Dapp/Tabs.tsx
@@ -1,4 +1,4 @@
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
+import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
 import Instance from './Instance'
 import PlaygroundGraphiQL from './Playground'
@@ -20,17 +20,16 @@ export default function ModelTabs({
           <Tab id="Playground">Model Playground</Tab>
         </TabList>
       </div>
-      <TabPanels>
-        <TabPanel id="Definition">
-          <Definition streamId={modelId} />
-        </TabPanel>
-        <TabPanel id="Instance">
-          <Instance streamId={modelId}/>
-        </TabPanel>
-        <TabPanel id="Playground">
-          <PlaygroundGraphiQL streamId={modelId}/>
-        </TabPanel>
-      </TabPanels>
+
+      <TabPanel id="Definition">
+        <Definition streamId={modelId} />
+      </TabPanel>
+      <TabPanel id="Instance">
+        <Instance streamId={modelId} />
+      </TabPanel>
+      <TabPanel id="Playground">
+        <PlaygroundGraphiQL streamId={modelId} />
+      </TabPanel>
     </Tabs>
   )
 }
diff --git a/packages/client/scan/src/container/ModelView.tsx b/packages/client/scan/src/container/ModelView.tsx
@@ -1,24 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
-import { getModelInfo } from '../api'
+import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components'
+import { getModelInfo, startIndexModel } from '../api'
 import { ModelStream } from '../types'
 import { useCeramicCtx } from '../context/CeramicCtx'
 import Definition from '../components/ModelView/Definition'
 import Instance from '../components/ModelView/Instance'
 import PlaygroundGraphiQL from '../components/ModelView/Playground'
 import styled from 'styled-components'
-import {
-  Button,
-  Item,
-  Label,
-  ListBox,
-  Popover,
-  Select,
-} from 'react-aria-components'
-import AddIcon from '../components/icons/Add'
+
 import { useSession } from '@us3r-network/auth-with-rainbowkit'
 import { Dapp } from '@us3r-network/data-model'
+import { set } from 'lodash'
 
 export default function ModelView() {
   const { streamId } = useParams()
@@ -34,6 +27,7 @@ export default function ModelView() {
   const session = useSession()
 
   const [modelStream, setModelStream] = useState<ModelStream>()
+  const [indexing, setIndexing] = useState(false)
 
   const fetchModelInfo = useCallback(
     async (streamId: string) => {
@@ -111,6 +105,26 @@ export default function ModelView() {
     [streamId, dapps, addModelToDapp, addModelToCollection]
   )
 
+  const startIndex = useCallback(async () => {
+    if (!streamId) return
+    try {
+      const resp = await startIndexModel({
+        network,
+        modelId: streamId,
+        didSession: session?.serialize(),
+      })
+      console.log('startIndex', resp.data)
+      if (resp.data.code !== 0) {
+        throw new Error(resp.data.msg)
+      }
+      await fetchModelInfo(streamId)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIndexing(false)
+    }
+  }, [streamId, network, session, fetchModelInfo])
+
   useEffect(() => {
     if (!streamId) return
     fetchModelInfo(streamId)
@@ -127,45 +141,38 @@ export default function ModelView() {
       })
   }, [dapps])
 
+  const isIndexed = useMemo(() => {
+    return !!modelStream?.isIndexed
+  }, [modelStream])
+
+  const disabledKeys = useMemo(() => {
+    if (isIndexed) return []
+    return ['Instance', 'Playground']
+  }, [isIndexed])
+
   return (
-    <Tabs>
+    <Tabs disabledKeys={disabledKeys}>
       <div className="title-bar">
         <ToolsBox>
           <span>{modelStream?.streamContent?.name}</span>
-          {/* <Select
-            onSelectionChange={(k) => {
-              addToDappAction(k as string)
-            }}
-          >
-            <Label></Label>
-            <Button className="add-to-dapp">
-              <AddIcon stroke="#000" /> Add To Dapp
-            </Button> 
-            <Popover className={'modelview-popover'}>
-              <ListBox items={options}>
-                {(item) => <Item id={item.id}>{item.name}</Item>}
-              </ListBox>
-            </Popover>
-          </Select>
-          */}
+          {!isIndexed && <button onClick={startIndex}>Strat index</button>}
         </ToolsBox>
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>
           <Tab id="Instance">Model Instance Documents</Tab>
           <Tab id="Playground">Model Playground</Tab>
         </TabList>
       </div>
-      <TabPanels>
-        <TabPanel id="Definition">
-          <Definition />
-        </TabPanel>
-        <TabPanel id="Instance">
-          <Instance />
-        </TabPanel>
-        <TabPanel id="Playground">
-          <PlaygroundGraphiQL />
-        </TabPanel>
-      </TabPanels>
+
+      <TabPanel id="Definition">
+        <Definition />
+      </TabPanel>
+      <TabPanel id="Instance">
+        <Instance />
+      </TabPanel>
+      <TabPanel id="Playground">
+        <PlaygroundGraphiQL />
+      </TabPanel>
     </Tabs>
   )
 }
@@ -175,7 +182,7 @@ const ToolsBox = styled.div`
   padding-right: 20px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 20px;
 
   > span {
     font-style: italic;
@@ -185,6 +192,28 @@ const ToolsBox = styled.div`
     color: #ffffff;
   }
 
+  > button {
+    cursor: pointer;
+    border: none;
+    outline: none;
+    padding: 0 15px;
+    height: 36px;
+    border-radius: 100px;
+    background: #14171a;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #a0aec0;
+    text-transform: capitalize;
+    background: #718096;
+    color: #14171a;
+    background: #ffffff;
+    font-family: Rubik;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
   .add-to-dapp {
     border: none;
     border-radius: 100px;

diff --git a/packages/client/scan/src/container/Models.tsx b/packages/client/scan/src/container/Models.tsx
@@ -167,19 +167,11 @@ export default function ModelsPage() {
                   <tr key={item.stream_id + idx}>
                     <td>
                       {!isMobile ? (
-                        <>
-                          {(item.isIndexed && (
-                            <Link
-                              to={`/models/modelview/${item.stream_id}?network=${network}`}
-                            >
-                              {item.stream_content.name}
-                            </Link>
-                          )) || (
-                            <div className="usage-count">
-                              {item.stream_content.name}
-                            </div>
-                          )}
-                        </>
+                        <Link
+                          to={`/models/modelview/${item.stream_id}?network=${network}`}
+                        >
+                          {item.stream_content.name}
+                        </Link>
                       ) : (
                         item.stream_content.name
                       )}

diff --git a/packages/client/scan/src/styles/tab.css b/packages/client/scan/src/styles/tab.css
@@ -61,6 +61,7 @@
       border-right: 3px solid var(--border-color, transparent);
     }
   }
+
 }
 
 .dapp-title-bar .react-aria-TabList {
@@ -93,13 +94,16 @@
     color: var(--text-color-hover);
   }
 
+
+
   &[aria-selected='true'] {
     --border-color: var(--highlight-color);
     color: var(--text-color-selected);
   }
 
   &[aria-disabled] {
-    color: var(--text-color-disabled);
+    cursor: not-allowed;
+    color: #718096;
     &[aria-selected='true'] {
       --border-color: var(--text-color-disabled);
     }