Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

F-composites-bufan #298

Merged
merged 4 commits into from
Jan 31, 2024
Merged

F-composites-bufan #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f93b1c
change nav icons
sin-bufan Jan 30, 2024
5332d5b
reconstruct nav and styles
sin-bufan Jan 31, 2024
8df7f9f
reconstruct nav and styles
sin-bufan Jan 31, 2024
222de5c
fix issue playground hidden plugin div cover nav
sin-bufan Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 133 additions & 117 deletions packages/client/dashboard/src/App.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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