Skip to content

Commit

Permalink
Merge pull request #298 from us3r-network/F-composites-bufan
Browse files Browse the repository at this point in the history 
F-composites-bufan
  • Loading branch information
@sin-bufan
sin-bufan authored Jan 31, 2024
2 parents 4673b55 + 222de5c commit 81ea284
Show file tree
Hide file tree
Showing 34 changed files with 757 additions and 901 deletions.
250 changes: 133 additions & 117 deletions packages/client/dashboard/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
import { ProfileStateProvider } from '@us3r-network/profile'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useEffect, useState } from 'react'
import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
import {
NavLink,
Outlet,
Expand All @@ -7,37 +12,29 @@ import {
useLocation,
useParams
} from 'react-router-dom'
import styled from 'styled-components'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
import { ProfileStateProvider } from '@us3r-network/profile'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.min.css'

import { DappCompositeDto, ModelStream } from './types.d'
import styled from 'styled-components'
import DappModelAndComposites from './components/model/DappModelAndComposites'
import Header from './components/nav/Header'
import Nav from './components/nav/Nav'
import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'

import AppProvider, { useAppCtx } from './context/AppCtx'
import CeramicNodeProvider from './context/CeramicNodeCtx'

import MyDapps from './container/MyDapps'
import CeramicNodes from './container/CeramicNodes'
import Components from './container/Components'
import DappCreate from './container/DappCreate'
import DappEditor from './container/DappEditor'
import DappHome from './container/DappHome'
import DappInfo from './container/DappInfo'
import DappModelEditor from './container/DappModelEditor'
import DappModelPlayground from './container/DappModelPlayground'
import DappModelSdk from './container/DappModelSdk'
import DappDataStatistic from './container/DappDataStatistic'
import Components from './container/Components'
import CeramicNodes from './container/CeramicNodes'
import DappMetrics from './container/DappMetrics'
import DappPlayground from './container/DappPlayground'
import DappSdk from './container/DappSdk'
import ExploreComposite from './container/ExploreComposite'
import ExploreModel from './container/ExploreModel'
import MyDapps from './container/MyDapps'
import NoMatch from './container/NoMatch'

import Header from './components/nav/Header'
import Nav from './components/nav/Nav'
import DappModelAndComposites from './components/model/DappModelAndComposites'
import ExploreComposite from './container/ExploreComposite'
import AppProvider, { useAppCtx } from './context/AppCtx'
import CeramicNodeProvider from './context/CeramicNodeCtx'
import { DappCompositeDto, ModelStream } from './types.d'

dayjs.extend(relativeTime)

Expand All @@ -49,23 +46,19 @@ function Routers () {
<Route path='dapp/create' element={<DappCreate />} />
<Route path='dapp/:appId' element={<DappLayout />}>
<Route path='index' element={<DappHome />} />
<Route path='node' element={<CeramicNodes />} />
<Route element={<ModelEditorLayout />}>
<Route path='model-editor' element={<DappModelEditor />} />
<Route path='model-playground' element={<DappModelPlayground />} />
<Route path='model-sdk' element={<DappModelSdk />} />
<Route path='statistic' element={<DappDataStatistic />} />
</Route>
<Route path='info' element={<DappInfo />} />
<Route path='explore' element={<ExploreLayout />}>
<Route path='model' element={<ExploreModel />} />
<Route path='composite' element={<ExploreComposite />} />
<Route path='components' element={<Components />} />
</Route>
<Route path='favorite' element={<ExploreLayout />}>
<Route path='model' element={<ExploreModel />} />
<Route path='composite' element={<ExploreComposite />} />
<Route path='build' element={<BuildLayout />}>
<Route path='editor' element={<DappEditor />} />
<Route path='playground' element={<DappPlayground />} />
<Route path='sdk' element={<DappSdk />} />
<Route path='metrics' element={<DappMetrics />} />
</Route>
<Route path='components' element={<Components />} />
<Route path='info' element={<DappInfo />} />
<Route path='node' element={<CeramicNodes />} />
</Route>
</Route>
<Route path='*' element={<NoMatch />} />
Expand Down Expand Up @@ -174,14 +167,31 @@ const AppContainer = styled.div`
}
`

function ModelEditorLayout () {
function BuildLayout () {
const [selectModel, setSelectModel] = useState<ModelStream>()
const [selectComposite, setSelectComposite] = useState<DappCompositeDto>()

const { pathname } = useLocation()

const defaultKey = pathname.split('/build/')[1]
const PAGES = [
{
id: 'editor',
label: 'Editor'
},
{
id: 'playground',
label: 'Playground'
},
{
id: 'sdk',
label: 'SDK'
},
{
id: 'metrics',
label: 'Metrics'
}
]
return (
<EditorLayoutContainer>
<LayoutContainer>
<DappModelAndComposites
selectModel={selectModel}
setSelectModel={data => {
Expand All @@ -195,93 +205,99 @@ function ModelEditorLayout () {
selectComposite={selectComposite}
editable={pathname.includes('model-editor')}
/>
<Outlet
context={{
selectModel,
selectComposite
}}
/>
</EditorLayoutContainer>
<div className='build-content'>
<Tabs selectedKey={defaultKey}>
{PAGES.map(page => (
<div className='tab-panel'>
<TabPanel id={page.id}>
<Outlet
context={{
selectModel,
selectComposite
}}
/>
</TabPanel>
</div>
))}
<div className='tab-list'>
<TabList aria-label='Explore'>
{PAGES.map(page => (
<Tab id={page.id}>
<NavLink to={page.id} key={page.id}>
{page.label}
</NavLink>
</Tab>
))}
</TabList>
</div>
</Tabs>
</div>
</LayoutContainer>
)
}

const EditorLayoutContainer = styled.div`
margin-top: 25px;
margin-bottom: 25px;
display: flex;
gap: 20px;
> .list {
flex-grow: 1;
}
.ops {
flex-grow: 1;
overflow: hidden;
}
.playground-ops {
flex-grow: 1;
overflow: hidden;
> div {
height: calc(100vh - 100px);
}
.graphiql-container {
height: 100%;
}
}
`

function ExploreLayout () {
const { pathname } = useLocation()
const defaultExploreKey = pathname.split('/explore/')[1]
const EXPLORE_PAGES = [
{
id: 'model',
label: 'Models'
},
{
id: 'composite',
label: 'Composites'
},
{
id: 'components',
label: 'Components'
}
]
return (
<ExploreLayoutContainer>
<div className='explore-catalog'>
<NavLink to='model' key='model'>
{({ isActive }) => (
<div className={`item ${isActive ? 'active' : ''}`}>
<span>Models</span>
</div>
)}
</NavLink>

{!pathname.includes('favorite') && (
<NavLink to='composite' key='model'>
{({ isActive }) => (
<div className={`item ${isActive ? 'active' : ''}`}>
<span>Composites</span>
</div>
)}
</NavLink>
)}
</div>
<div>
<Outlet />
</div>
</ExploreLayoutContainer>
<LayoutContainer>
<Tabs selectedKey={defaultExploreKey}>
{EXPLORE_PAGES.map(page => (
<div className='tab-panel'>
<TabPanel id={page.id}>
<Outlet />
</TabPanel>
</div>
))}
<div className='tab-list'>
<TabList aria-label='Explore'>
{EXPLORE_PAGES.map(page => (
<Tab id={page.id}>
<NavLink to={page.id} key={page.id}>
{page.label}
</NavLink>
</Tab>
))}
</TabList>
</div>
</Tabs>
</LayoutContainer>
)
}

const ExploreLayoutContainer = styled.div`
margin-top: 25px;
margin-bottom: 25px;
.explore-catalog {
const LayoutContainer = styled.div`
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
gap: 20px;
.tab-list {
position: absolute;
display: flex;
gap: 20px;
.item {
font-size: 24px;
font-weight: 700;
color: #718096;
> span {
transition: opacity 0.09s ease-in-out;
}
&.active {
background: #14171a;
color: #fff;
}
}
top: 0px;
right: 0px;
}
.tab-panel {
position: absolute;
width: 100%;
top: 0;
margin: 0;
padding: 0;
}
.build-content{
flex-grow: 1;
}
`
16 changes: 16 additions & 0 deletions packages/client/dashboard/src/components/icons/CompositeIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function CompositeIcon ({ isActive }: { isActive?: boolean }) {
return (
<svg
width='14'
height='14'
viewBox='0 0 14 14'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M6.59902 12.8522C6.85421 12.7673 7.02431 12.8341 7.10931 13.0527C7.15792 13.1498 7.16098 13.25 7.11847 13.3532C7.07597 13.4565 7.00611 13.5263 6.90889 13.5628L6.05206 13.9453C6.00345 13.9818 5.9366 14 5.85151 14C5.77863 14 5.70576 13.9818 5.63289 13.9453L5.61456 13.9271L0.237086 11.5589C0.0790288 11.4738 0 11.3524 0 11.1945V2.81463C0 2.75383 0.024306 2.67486 0.0729181 2.5777C0.133752 2.49275 0.20667 2.44417 0.291672 2.43195L5.68747 0.0455273C5.79683 -0.0151758 5.90012 -0.0151758 5.99734 0.0455273L11.4661 2.45027C11.6241 2.53522 11.7031 2.65667 11.7031 2.81463V4.5634C11.7031 4.66056 11.6637 4.74861 11.5847 4.82754C11.5057 4.90647 11.4115 4.94594 11.3022 4.94594C11.2049 4.94594 11.1168 4.90647 11.0379 4.82754C10.9589 4.74861 10.9194 4.66056 10.9194 4.5634V3.39746L6.23457 5.45604V13.0163L6.59916 12.8522H6.59902ZM5.85151 0.828926L1.34905 2.79631L5.85151 4.8002L10.3541 2.79631L5.85151 0.828926ZM0.783904 3.39746V10.9396L5.46872 13.0163V5.47436L0.783904 3.39746ZM13.7629 6.89527C13.921 6.98031 14 7.10176 14 7.25963V11.9596C14 12.1297 13.921 12.2451 13.7629 12.3058L10.7187 13.6721C10.6823 13.6843 10.6276 13.6903 10.5547 13.6903C10.4817 13.6903 10.427 13.6843 10.3905 13.6721L7.36445 12.324C7.35232 12.324 7.33408 12.3118 7.30973 12.2876C7.12741 12.2026 7.06056 12.0629 7.10917 11.8686V7.3325C7.08491 7.24746 7.09102 7.16853 7.1275 7.0957C7.18825 6.98633 7.26116 6.91346 7.34626 6.87709L10.3905 5.54723C10.4634 5.52289 10.518 5.51072 10.5545 5.51072C10.591 5.51072 10.6457 5.52289 10.7185 5.54723L13.7628 6.89527H13.7629ZM10.5547 8.18863L12.6328 7.25963L10.5547 6.33049L8.45836 7.25963L10.5547 8.18863ZM7.87502 7.8426V11.7046L10.1719 12.7248V8.86266L7.87502 7.8426ZM10.9374 12.7065L13.2161 11.7046V7.8426L10.9374 8.86266V12.7065Z'
fill={isActive ? '#ffffff' : '#718096'}
/>
</svg>
)
}
16 changes: 16 additions & 0 deletions packages/client/dashboard/src/components/icons/ModelIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function ModelIcon ({ isActive }: { isActive?: boolean }) {
return (
<svg
width='13'
height='15'
viewBox='0 0 13 15'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M6.02992 14.3549C5.94398 14.3549 5.85805 14.333 5.78008 14.2893L0.247891 11.1093C0.0939843 11.0197 -0.00195312 10.8566 -0.00195312 10.6774V4.32145C-0.00195312 4.14441 0.0939843 3.9791 0.247891 3.88957L5.78008 0.709727C5.93398 0.620195 6.12602 0.620195 6.27992 0.709727L11.8121 3.88973C11.966 3.97926 12.062 4.14238 12.062 4.3216V10.6796C12.062 10.8566 11.966 11.0219 11.8121 11.1114L6.27992 14.2893C6.20195 14.333 6.11602 14.3549 6.02992 14.3549ZM0.997734 10.3929L6.02992 13.2843L11.0623 10.3929V4.60801L6.02992 1.7166L0.997734 4.60801V10.3929ZM6.02992 7.99691C5.94602 7.99691 5.85992 7.97504 5.78008 7.92926L1.81742 5.65473C1.57758 5.51738 1.49555 5.21301 1.63352 4.9741C1.77148 4.73535 2.07742 4.65379 2.31727 4.79098L6.27992 7.06754C6.51977 7.20488 6.6018 7.50926 6.46383 7.74817C6.36992 7.90942 6.20195 7.99691 6.02992 7.99691ZM6.02992 12.5519C5.75398 12.5519 5.53008 12.3291 5.53008 12.0544V7.78801L1.82148 5.65473C1.82148 5.65473 1.81945 5.65473 1.81945 5.6527L0.249922 4.75129C0.0100782 4.61395 -0.0719531 4.30957 0.0660156 4.07066C0.203984 3.83176 0.509922 3.75035 0.749766 3.88754L6.28195 7.06754C6.43586 7.15707 6.5318 7.3202 6.5318 7.49941V12.0524C6.52977 12.3291 6.30586 12.5519 6.02992 12.5519ZM6.02992 14.3549C5.75398 14.3549 5.53008 14.1321 5.53008 13.8574V7.49941C5.53008 7.22473 5.75398 7.00191 6.02992 7.00191C6.30586 7.00191 6.52977 7.22473 6.52977 7.49941V13.8574C6.52977 14.1339 6.30586 14.3549 6.02992 14.3549ZM6.02992 7.99691C5.85805 7.99691 5.69008 7.90738 5.59602 7.74817C5.45805 7.50942 5.54008 7.20691 5.77992 7.06754L11.3121 3.88754C11.552 3.7502 11.8559 3.83176 11.9959 4.07066C12.1338 4.30941 12.0518 4.61191 11.812 4.75129L6.27992 7.93129C6.20195 7.97707 6.11602 7.99691 6.02992 7.99691Z'
fill={isActive ? '#ffffff' : '#718096'}
/>
</svg>
)
}
5 changes: 3 additions & 2 deletions packages/client/dashboard/src/components/model/CompositeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const Box = styled.div`
justify-content: space-between;
background-color: #14171a;
margin-bottom: 20px;
height: 100%;
> div {
display: flex;
align-items: center;
Expand All @@ -100,7 +100,6 @@ const Box = styled.div`
`

const EditorBox = styled.div`
height: calc(100vh - 300px);
max-height: 800px;
background: #14171a;
border: 1px solid #39424c;
Expand All @@ -110,13 +109,15 @@ const EditorBox = styled.div`
* {
box-sizing: border-box;
}
flex: 1;
`

const ResultBox = styled.div`
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
flex: 0 0 100px;
> div {
background: #1b1e23;
border: 1px solid #39424c;
Expand Down
6 changes: 1 addition & 5 deletions packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,8 @@ export default function CompositePlaygroundGraphiQL(
const GraphiqlContainer = styled.div`
border-radius: 20px;
overflow: hidden;
height: calc(100vh - 200px);
height: 100%;
> div {
height: 100%;
.graphiql-container {
height: 100%;
width: 100%;
}
}
`
2 changes: 1 addition & 1 deletion packages/client/dashboard/src/components/model/DappModelAndComposites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default function DappModelAndComposites ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [appId])

const isMetrics = location.pathname.endsWith('statistic')
const isMetrics = location.pathname.endsWith('metrics')
const isSdk = location.pathname.endsWith('sdk')

const [openModal, setOpenModal] = useState(OPEN_MODAL.NONE)
Expand Down
Loading

0 comments on commit 81ea284

Please sign in to comment.