Skip to content

Commit

Permalink
checkpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@noahlitvin
noahlitvin committed Jan 6, 2025
1 parent 1b473c8 commit 2eb8357
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 182 deletions.
305 changes: 141 additions & 164 deletions packages/website/src/features/Packages/CannonfileExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useQueryIpfsDataParsed } from '@/hooks/ipfs';
import { CannonfileGraph } from './CannonfileGraph';
import { StepModalProvider } from '@/providers/stepModalProvider';
import { stringify } from '@iarna/toml';
import { PiGraphLight, PiCodeLight, PiListBullets } from 'react-icons/pi';
import { ApiPackage } from '@usecannon/api/dist/src/types';
import {
Table,
Expand All @@ -26,7 +25,7 @@ import {
TooltipProvider,
} from '@/components/ui/tooltip';
import { IpfsSpinner } from '@/components/IpfsSpinner';
import { SidebarLayout } from '@/components/layouts/SidebarLayout';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';

function omitEmptyObjects(config: { [x: string]: any }) {
for (const key in config) {
Expand Down Expand Up @@ -99,176 +98,154 @@ export const CannonfileExplorer: FC<{ pkg: ApiPackage }> = ({ pkg }) => {

return pkg?.deployUrl ? (
<div className="flex flex-1 flex-col h-full w-full">
<div className="h-[710px]">
<SidebarLayout extraContentHeight="710px">
{deploymentData.isLoading ? (
<div className="py-20">
<IpfsSpinner ipfsUrl={pkg?.deployUrl} />
{deploymentData.isLoading ? (
<div className="py-20">
<IpfsSpinner ipfsUrl={pkg?.deployUrl} />
</div>
) : deploymentInfo ? (
<div className="relative h-full w-full">
<TooltipProvider>
<div className="sticky top-0 overflow-x-scroll overflow-y-hidden max-w-full border-b border-border bg-muted">
<Tabs
value={displayMode.toString()}
onValueChange={(value) => setDisplayMode(parseInt(value))}
>
<TabsList className="h-full">
<TabsTrigger value="1">Dependency Graph</TabsTrigger>
<TabsTrigger value="2">Processed Cannonfile</TabsTrigger>
<TabsTrigger value="3">Raw Cannonfile</TabsTrigger>
</TabsList>
</Tabs>
</div>
) : deploymentInfo ? (
<div className="relative h-full w-full">
<TooltipProvider>
<div className="absolute top-4 left-1/2 -translate-x-1/2 flex items-center rounded-full border border-gray-500 bg-black z-50 overflow-hidden">
<button
onClick={() => setDisplayMode(1)}
className={`p-3 pl-4 hover:bg-gray-900 ${
displayMode === 1 ? 'text-[#1ad6ff]' : 'text-white'
}`}
>
<PiGraphLight size="24" />
</button>
<button
onClick={() => setDisplayMode(2)}
className={`p-3 hover:bg-gray-900 ${
displayMode === 2 ? 'text-[#1ad6ff]' : 'text-white'
}`}
>
<PiListBullets size="24" />
</button>
<button
onClick={() => setDisplayMode(3)}
className={`p-3 pr-4 hover:bg-gray-900 ${
displayMode === 3 ? 'text-[#1ad6ff]' : 'text-white'
}`}
>
<PiCodeLight size="24" />
</button>

<StepModalProvider>
<div
className={`${displayMode === 1 ? 'block h-full' : 'hidden'} `}
>
<div className="h-full">
<CannonfileGraph deploymentDefinition={deploymentInfo.def} />
</div>
</div>

<StepModalProvider>
<div
className={`${displayMode === 1 ? 'h-full' : 'hidden'} `}
>
<CannonfileGraph
deploymentDefinition={deploymentInfo.def}
<div
className={`container mx-auto p-4 ${
displayMode === 2 ? 'flex flex-col' : 'hidden'
}`}
>
{Object.entries(settings).length > 0 && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">Variables</h2>
<div className="overflow-x-auto mb-6">
<Table>
<TableHeader>
<TableRow className="border-border">
<TableHead className="border-border">
<code>var</code>
</TableHead>
<TableHead className="border-border">
Value
</TableHead>
</TableRow>
</TableHeader>
<TableBody className="font-mono">
{Object.entries(settings).map(([key, value]) => (
<TableRow key={key} className="border-border">
<TableCell className="border-border">
<Tooltip>
<TooltipTrigger>{key}</TooltipTrigger>
<TooltipContent>
<p>{key}</p>
</TooltipContent>
</Tooltip>
</TableCell>
<TableCell className="border-border">
{value.option ? (
<>{value.option}</>
) : (
<>{value.defaultValue}</>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
)}
{deploymentInfo?.def?.var && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Variable Setting
</h2>
<ChainDefinitionSteps
name="var"
modules={deploymentInfo?.def?.var}
/>
</div>

<div
className={`container mx-auto max-w-5xl py-14 px-4 ${
displayMode === 2 ? 'flex flex-col' : 'hidden'
}`}
>
{Object.entries(settings).length > 0 && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Variables
</h2>
<div className="overflow-x-auto mb-6">
<Table>
<TableHeader>
<TableRow className="border-border">
<TableHead className="border-border">
<code>var</code>
</TableHead>
<TableHead className="border-border">
Value
</TableHead>
</TableRow>
</TableHeader>
<TableBody className="font-mono">
{Object.entries(settings).map(([key, value]) => (
<TableRow key={key} className="border-border">
<TableCell className="border-border">
<Tooltip>
<TooltipTrigger>{key}</TooltipTrigger>
<TooltipContent>
<p>{key}</p>
</TooltipContent>
</Tooltip>
</TableCell>
<TableCell className="border-border">
{value.option ? (
<>{value.option}</>
) : (
<>{value.defaultValue}</>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
)}
{deploymentInfo?.def?.var && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Variable Setting
</h2>
<ChainDefinitionSteps
name="var"
modules={deploymentInfo?.def?.var}
/>
</div>
)}
{!isEmpty(pulls) && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Pulled Packages
</h2>
<ChainDefinitionSteps name="pull" modules={pulls} />
</div>
)}
{!isEmpty(clones) && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Cloned Package
</h2>
<ChainDefinitionSteps name="clone" modules={clones} />
</div>
)}
{deploymentInfo?.def?.router && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Router Generation
</h2>
<ChainDefinitionSteps
name="router"
modules={deploymentInfo.def.router}
/>
</div>
)}
{!isEmpty(deploys) && (
<div className="mt-4 max-w-full overflow-x-auto">
<h2 className="text-xl font-semibold mb-3">
Contract Deployments
</h2>
<ChainDefinitionSteps name="deploy" modules={deploys} />
</div>
)}
{deploymentInfo?.def?.invoke && (
<div className="mt-4 max-w-full overflow-x-auto">
<h2 className="text-xl font-semibold mb-3">
Function Calls
</h2>
<ChainDefinitionSteps
name="invoke"
modules={deploymentInfo.def.invoke}
/>
</div>
)}
)}
{!isEmpty(pulls) && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Pulled Packages
</h2>
<ChainDefinitionSteps name="pull" modules={pulls} />
</div>

<div
className={`${displayMode === 3 ? 'h-full' : 'hidden'} `}
>
<CodePreview
code={stringify(processedDeploymentInfo as any)}
language="ini"
height="100%"
)}
{!isEmpty(clones) && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Cloned Package
</h2>
<ChainDefinitionSteps name="clone" modules={clones} />
</div>
)}
{deploymentInfo?.def?.router && (
<div className="mt-4">
<h2 className="text-xl font-semibold mb-3">
Router Generation
</h2>
<ChainDefinitionSteps
name="router"
modules={deploymentInfo.def.router}
/>
</div>
</StepModalProvider>
</TooltipProvider>
</div>
) : (
<div className="text-center py-20 opacity-50">
Unable to retrieve deployment data
</div>
)}
</SidebarLayout>
</div>
)}
{!isEmpty(deploys) && (
<div className="mt-4 max-w-full overflow-x-auto">
<h2 className="text-xl font-semibold mb-3">
Contract Deployments
</h2>
<ChainDefinitionSteps name="deploy" modules={deploys} />
</div>
)}
{deploymentInfo?.def?.invoke && (
<div className="mt-4 max-w-full overflow-x-auto">
<h2 className="text-xl font-semibold mb-3">
Function Calls
</h2>
<ChainDefinitionSteps
name="invoke"
modules={deploymentInfo.def.invoke}
/>
</div>
)}
</div>

<div className={`${displayMode === 3 ? 'h-full' : 'hidden'} `}>
<CodePreview
code={stringify(processedDeploymentInfo as any)}
language="ini"
height="100%"
/>
</div>
</StepModalProvider>
</TooltipProvider>
</div>
) : (
<div className="text-center py-20 opacity-50">
Unable to retrieve deployment data
</div>
)}
</div>
) : (
<div className="text-center py-20 opacity-50">
Expand Down
19 changes: 8 additions & 11 deletions packages/website/src/features/Packages/CannonfileGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,24 +58,21 @@ export const CannonfileGraph: FC<{
useEffect(() => {
async function initializeGraph() {
try {
const chainDefinition = await getChainDefinitionFromWorker(
deploymentDefinition
);
const { allActionNames, resolvedDependencies } =
await getChainDefinitionFromWorker(deploymentDefinition);

// Clear existing nodes and links
nodes.length = 0;
links.length = 0;

// Add nodes and links using worker result
for (const node of chainDefinition.allActionNames) {
for (const node of allActionNames) {
nodes.push({ id: node });
}
for (const node of chainDefinition.allActionNames) {
chainDefinition.resolvedDependencies
.get(node)
?.forEach((dependency) => {
links.push({ source: dependency, target: node });
});
for (const node of allActionNames) {
resolvedDependencies.get(node)?.forEach((dependency) => {
links.push({ source: dependency, target: node });
});
}

// Continue with existing D3 setup code...
Expand Down Expand Up @@ -299,7 +296,7 @@ export const CannonfileGraph: FC<{
return (
<>
<GlobalStyles />
<svg ref={svgRef} width={'100%'} height={'100%'} />
<svg ref={svgRef} width={'100%'} height={'calc(100dvh)'} />
</>
);
};
Loading

0 comments on commit 2eb8357

Please sign in to comment.