Skip to content

Commit

Permalink
Merge pull request #253 from us3r-network/scan-dev
Browse files Browse the repository at this point in the history
Scan dev
sin-bufan authored Sep 27, 2023
2 parents e20caa2 + f93d00c commit f3ebb7f
Showing 12 changed files with 1,772 additions and 113 deletions.
2 changes: 1 addition & 1 deletion packages/client/dashboard/package.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
"dependencies": {
"@ceramicnetwork/common": "^2.26.0",
"@ceramicnetwork/http-client": "^2.22.0",
"@composedb/devtools": "0.4",
"@composedb/devtools": "0.5.0",
"@graphiql/plugin-explorer": "^0.1.20",
"@monaco-editor/react": "^4.5.1",
"@rjsf/core": "^5.8.2",
Original file line number Diff line number Diff line change
@@ -49,4 +49,12 @@ directive @createModel(
) on OBJECT
directive @loadModel(id: StreamID!) on OBJECT
input IndexField {
path: [String!]!
}
directive @createIndex(
fields: [IndexField!]!
) repeatable on OBJECT
`
4 changes: 2 additions & 2 deletions packages/client/scan/package.json
Original file line number Diff line number Diff line change
@@ -53,8 +53,8 @@
"web-vitals": "^2.1.0"
},
"devDependencies": {
"@composedb/devtools": "^0.4.3",
"@composedb/types": "^0.4.3",
"@composedb/devtools": "^0.5.0",
"@composedb/types": "^0.5.0",
"@craco/craco": "^7.0.0",
"@types/file-saver": "^2.0.5",
"assert": "^2.0.0",
119 changes: 105 additions & 14 deletions packages/client/scan/src/components/DappModels.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,131 @@
import styled from 'styled-components'
import { Dapp, ModelStream } from '../types'
import { Dapp, ModelStream, SchemaDetail } from '../types'
import { useCallback, useEffect, useState } from 'react'
import { getModelStreams } from '../api'
import { useCeramicCtx } from '../context/CeramicCtx'
import DappModelInstance from './DappModelInstance'
import { Link } from 'react-router-dom'
import DappSchemaInfo from './DappSchemaInfo'

export default function DappModels({
models,
modelsDetail,
schemas,
schemasDetail,
}: {
models: Dapp['models']
modelsDetail: Dapp['modelDetals']
modelsDetail: Dapp['modelDetails']
schemas: Dapp['schemas']
schemasDetail: Dapp['schemaDetails']
}) {
const [selected, setSelected] = useState<ModelStream>()
const [selectedSchema, setSelectedSchema] = useState<SchemaDetail>()
const [modelStreams, setModelStreams] = useState<ModelStream[]>([])
const { network } = useCeramicCtx()
const loadModelStreams = useCallback(async () => {
try {
const resp = await getModelStreams({ ids: models, network })
const modelStreams = resp.data.data
setModelStreams(modelStreams)
if (modelStreams.length > 0) setSelected(resp.data.data[0])
} catch (error) {}
}, [models, network])
if (modelStreams.length > 0 && models.length > schemas.length)
setSelected(resp.data.data[0])
} catch (error) {
console.error(error)
}
}, [models, network, schemas])

useEffect(() => {
if (schemasDetail.length > 0 && schemasDetail.length > models.length)
setSelectedSchema(schemasDetail[0])
}, [schemasDetail, models])

useEffect(() => {
loadModelStreams()
}, [loadModelStreams])

return (
<DappInfoContainer>
<ListBox>
<div className="title">
<h3>Models List ({models.length})</h3>
</div>
<DappModelList
modelStreams={modelStreams || []}
{...{ selected, setSelected }}
/>
{[
<>
<div className="title">
<h3>Models List ({models.length})</h3>
</div>
<DappModelList
modelStreams={modelStreams || []}
selected={selected}
setSelected={(data) => {
setSelectedSchema(undefined)
setSelected(data)
}}
/>
</>,
<>
<div className="title">
<h3>Schemas List ({schemas.length})</h3>
</div>
<DappSchemaList
schemasDetail={schemasDetail || []}
selected={selectedSchema}
setSelected={(data) => {
setSelected(undefined)
setSelectedSchema(data)
}}
/>
</>,
].sort(() => models.length - schemas.length)}
</ListBox>
<DappModelInstance modelId={selected?.stream_id || ''} />
{[
selected?.stream_id && (
<DappModelInstance modelId={selected?.stream_id || ''} />
),
selectedSchema && <DappSchemaInfo schema={selectedSchema.streamId} />,
]
.sort(() => models.length - schemas.length)
.shift()}
{!selected?.stream_id && !selectedSchema && (
<div>There is no data to view</div>
)}
</DappInfoContainer>
)
}

function DappSchemaList({
schemasDetail,
setSelected,
selected,
}: {
schemasDetail: SchemaDetail[]
selected?: SchemaDetail
setSelected: (ms: SchemaDetail) => void
}) {
if (schemasDetail.length === 0) {
return (
<DappModelsListBox>
<p>There is no schema in this dapp.</p>
</DappModelsListBox>
)
}
return (
<DappModelsListBox>
{schemasDetail?.map((item) => {
const active = selected === item
return (
<div key={item.streamId} className={active ? 'active' : ''}>
<div
className="title"
onClick={() => {
setSelected(item)
}}
>
<div>{item.content.title}</div>
</div>
</div>
)
})}
</DappModelsListBox>
)
}

function DappModelList({
selected,
setSelected,
@@ -52,6 +135,7 @@ function DappModelList({
selected?: ModelStream
setSelected: (ms: ModelStream) => void
}) {
const { network } = useCeramicCtx()
if (modelStreams.length === 0) {
return (
<DappModelsListBox>
@@ -72,6 +156,13 @@ function DappModelList({
}}
>
<div>{item.stream_content.name}</div>
{active && (
<Link
to={`/models/modelview/${item.stream_id}?network=${network}`}
>
details
</Link>
)}
</div>
{active && (
<>
48 changes: 48 additions & 0 deletions packages/client/scan/src/components/DappSchemaInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { useCallback, useEffect, useState } from 'react'
import { Network, Stream } from '../types'
import { useCeramicCtx } from '../context/CeramicCtx'
import { getStreamInfo } from '../api'
import StreamTable from './StreamTable'
import styled from 'styled-components'

export default function DappSchemaInfo({ schema }: { schema: string }) {
const [stream, setStream] = useState<Stream>()
const { network } = useCeramicCtx()
const [loading, setLoading] = useState(true)
const loadSchemaInfo = useCallback(async () => {
try {
setLoading(true)
const resp = await getStreamInfo(network, schema)
setStream(resp.data.data)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}, [schema, network])
useEffect(() => {
loadSchemaInfo()
}, [loadSchemaInfo])

if (loading) return <LoadingBox>Loading...</LoadingBox>

return (
<SchemaInfoContainer>
{stream && <StreamTable data={stream} network={network as Network} />}
</SchemaInfoContainer>
)
}

const LoadingBox = styled.div`
padding: 20px;
text-align: center;
color: gray;
`

const SchemaInfoContainer = styled.div`
.name {
font-size: initial !important;
font-weight: initial !important;
font-style: normal !important;
}
`
15 changes: 9 additions & 6 deletions packages/client/scan/src/components/ModelView/Definition.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Link, useParams } from 'react-router-dom'
import styled from 'styled-components'

import FileSaver from 'file-saver'
@@ -180,15 +180,18 @@ function Info({ modelStream }: { modelStream: ModelStream | undefined }) {
function Dapps({
dapps,
}: {
dapps: Array<{ name: string; description: string; icon: string }>
dapps: Array<{ name: string; description: string; icon: string; id: number }>
}) {
const { network } = useCeramicCtx()
return (
<>
{[...dapps].map((item, idx) => {
return (
<div key={item.name} className="dapp">
<ImgOrName name={item.name} imgUrl={item.icon} />
{item.name}
<Link to={`/dapps/${item.id}?network=${network}`}>
<ImgOrName name={item.name} imgUrl={item.icon} />
{item.name}
</Link>
</div>
)
})}
@@ -242,12 +245,12 @@ const InfoBox = styled.div`
}
}
.dapp {
.dapp a {
margin-top: 10px;
display: flex;
gap: 10px;
align-items: center;
> span {
span {
color: #fff;
width: 36px;
height: 36px;
4 changes: 3 additions & 1 deletion packages/client/scan/src/container/DappsInfo.tsx
Original file line number Diff line number Diff line change
@@ -54,7 +54,9 @@ export default function DappsInfo() {

<DappModels
models={dapp?.models || []}
modelsDetail={dapp?.modelDetals || []}
modelsDetail={dapp?.modelDetails || []}
schemas={dapp?.schemas || []}
schemasDetail={dapp?.schemaDetails || []}
/>
</DappInfoContainer>
)
23 changes: 19 additions & 4 deletions packages/client/scan/src/container/DappsList.tsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
import { useCeramicCtx } from '../context/CeramicCtx'
import { ImgOrName } from '../components/ImgOrName'
import { Dapp } from '../types'
import { shortPubKey } from '../utils/shortPubKey'

export default function DappsList() {
const { dapps, loadMoreDapps, hasMore, searchText, setSearchText } =
@@ -47,7 +48,7 @@ export default function DappsList() {
<tr>
<th>Dapp Name</th>
<th>Description</th>
<th>Model</th>
<th>Model/Schema</th>
</tr>
</thead>
<tbody>
@@ -67,8 +68,8 @@ export default function DappsList() {
</td>
<td>
<div className="model">
{(item.modelDetals.length > 0 &&
item.modelDetals.map((item, idx) => {
{item.modelDetails.length > 0 &&
item.modelDetails.map((item, idx) => {
return (
<span key={idx}>
<Link
@@ -78,7 +79,21 @@ export default function DappsList() {
</Link>
</span>
)
})) ||
})}
{item.schemaDetails.length > 0 &&
item.schemaDetails.map((item, idx) => {
return (
<span>
<Link
to={`/streams/stream/${item.streamId}?network=${network}`}
>
{item.content.title}
</Link>
</span>
)
})}
{item.modelDetails.length === 0 &&
item.schemas.length === 0 &&
'-'}
</div>
</td>
9 changes: 3 additions & 6 deletions packages/client/scan/src/container/Models.tsx
Original file line number Diff line number Diff line change
@@ -281,12 +281,8 @@ function Dapps({
{apps.data.length > 0
? apps.data.map((item, idx) => {
return (
<Link to={`/dapps/${item.id}?network=${network}`}>
<ImgOrName
key={item.name}
name={item.name}
imgUrl={item.icon}
/>
<Link to={`/dapps/${item.id}?network=${network}`} key={item.name}>
<ImgOrName name={item.name} imgUrl={item.icon} />
</Link>
)
})
@@ -581,6 +577,7 @@ const TableContainer = styled.table<{ isMobile: boolean }>`
font-size: 16px;
line-height: 19px;
color: #718096;
white-space: nowrap;
}
.did-container {
82 changes: 80 additions & 2 deletions packages/client/scan/src/types/index.ts
Original file line number Diff line number Diff line change
@@ -128,7 +128,9 @@ export interface Dapp {
socialLinks: SocialLink[]
tags: any[]
models: string[]
modelDetals: ModelDetal[]
modelDetails: ModelDetail[]
schemas: string[]
schemaDetails: SchemaDetail[]
stage: string
type: string
network: string
@@ -141,7 +143,7 @@ export interface SocialLink {
platform: string
}

export interface ModelDetal {
export interface ModelDetail {
stream_id: string
controller_did: string
tip: string
@@ -160,3 +162,79 @@ export interface StreamContent {
type: string
url: string
}

export interface SchemaDetail {
streamId: string
network: string
indexingTime: number
familyOrApp: string
type: string
did: string
tags: string[]
anchorStatus: string
anchorHash: string
anchorDate: number
schema: any
commitIds: string[]
content: Content
model: string
metadata: Metadata
domain: any
}

export interface Content {
type: string
title: string
$schema: string
required: string[]
properties: Properties
}

export interface Properties {
master: Master
reply_to: ReplyTo
conversation_id: ConversationId
encryptedMessage: EncryptedMessage
}

export interface Master {
type: string[]
}

export interface ReplyTo {
type: string[]
}

export interface ConversationId {
type: string
}

export interface EncryptedMessage {
type: string
properties: Properties2
}

export interface Properties2 {
encryptedString: EncryptedString
encryptedSymmetricKey: EncryptedSymmetricKey
accessControlConditions: AccessControlConditions
}

export interface EncryptedString {
type: string
}

export interface EncryptedSymmetricKey {
type: string
}

export interface AccessControlConditions {
type: string
}

export interface Metadata {
tags: string[]
family: string
unique: string
controllers: string[]
}
Original file line number Diff line number Diff line change
@@ -49,4 +49,12 @@ directive @createModel(
) on OBJECT
directive @loadModel(id: StreamID!) on OBJECT
input IndexField {
path: [String!]!
}
directive @createIndex(
fields: [IndexField!]!
) repeatable on OBJECT
`
1,563 changes: 1,486 additions & 77 deletions packages/client/scan/yarn.lock

Large diffs are not rendered by default.

0 comments on commit f3ebb7f

Please sign in to comment.