sebse/node-factorio-recipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed overview graph

Browse Source
This commit is contained in:
Sebastian Seedorf
2022-08-18 17:05:32 +02:00
parent 4e11388086
commit b88ae9ceaa
4 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/visualize/PageDetails.tsx
View File

@@ -1,7 +1,7 @@
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useGroups } from '../contexts/GroupProvider' import { useGroups } from '../contexts/GroupProvider'
import { useFactories } from '../../src/hooks/useFactories' import { useFactories } from '../../src/hooks/useFactories'
import { FC, useEffect, useMemo } from 'react' import { FC, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs' import { calculateInputs } from '../../src/calculateInputs'
import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails' import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails'
import { groupBy, isNonNullable, uniquify } from '../../src/utils' import { groupBy, isNonNullable, uniquify } from '../../src/utils'
@@ -17,11 +17,6 @@ export const PageDetails: FC = () => {
const { exportedFactories, baseFactories, groups } = useGroups() const { exportedFactories, baseFactories, groups } = useGroups()
const { findFactory } = useFactories() const { findFactory } = useFactories()
useEffect(() => {
document.body.classList.add('scroll')
return () => document.body.classList.remove('scroll')
}, [])
const group = typeof name === 'string' ? groups[name] : undefined const group = typeof name === 'string' ? groups[name] : undefined
const [inputFactories, intermediateFactories] = useMemo< const [inputFactories, intermediateFactories] = useMemo<
@@ -68,7 +63,6 @@ export const PageDetails: FC = () => {
<Head> <Head>
<title>Factorio Microservices</title> <title>Factorio Microservices</title>
<meta name='description' content='Create Factorio microservices' /> <meta name='description' content='Create Factorio microservices' />
<link rel='icon' href='/public/favicon.ico' />
</Head> </Head>
<main> <main>
<ScrollContainer> <ScrollContainer>

44
components/visualize/PageOverview.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { useGroups } from '../contexts/GroupProvider'
import { useFactories } from '../../src/hooks/useFactories'
import { FC, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs'
import { fixedEncodeURIComponent } from '../../src/utils'
import Head from 'next/head'
import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer'
import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph'
import { NodeOverview, OverviewGraphNode } from './NodeOverview/NodeOverview'
export const PageOverview: FC = () => {
const { exportedFactories, baseFactories, groups } = useGroups()
const { findFactory } = useFactories()
const producingNodes: OverviewGraphNode[] = useMemo(() => {
return Object.values(groups).map(group => ({
inputs: calculateInputs(
[...group.exports, ...group.malls],
baseFactories,
exportedFactories,
findFactory
)[0],
outputs: group.exports,
name: group.name,
icons: [...group.exports, ...group.malls],
linkOut: `./visualize/${fixedEncodeURIComponent(group.name)}`
}))
}, [baseFactories, exportedFactories, findFactory, groups])
return (
<>
<Head>
<title>Factorio Microservices</title>
<meta name='description' content='Create Factorio microservices' />
</Head>
<main>
<ScrollContainer>
<h1>Factorio Microservices</h1>
<ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview} />
</ScrollContainer>
</main>
</>
)
}

6
pages/visualize/[name].tsx
View File

@@ -2,8 +2,14 @@ import type { NextPage } from 'next'
import { GroupProvider } from '../../components/contexts/GroupProvider' import { GroupProvider } from '../../components/contexts/GroupProvider'
import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps' import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps'
import { PageDetails } from '../../components/visualize/PageDetails' import { PageDetails } from '../../components/visualize/PageDetails'
import { useEffect } from 'react'
const Page: NextPage<PropsGroupProvider> = ({ id, ...initial }) => { const Page: NextPage<PropsGroupProvider> = ({ id, ...initial }) => {
useEffect(() => {
document.body.classList.add('scroll')
return () => document.body.classList.remove('scroll')
}, [])
return ( return (
<GroupProvider id={id} initial={initial}> <GroupProvider id={id} initial={initial}>
<PageDetails /> <PageDetails />

46
pages/visualize/index.tsx
View File

@@ -1,55 +1,19 @@
import type { NextPage } from 'next' import type { NextPage } from 'next'
import Head from 'next/head' import { GroupProvider } from '../../components/contexts/GroupProvider'
import { GroupProvider, useGroups } from '../../components/contexts/GroupProvider' import { useEffect } from 'react'
import { useFactories } from '../../src/hooks/useFactories'
import { ProducingGraph } from '../../components/shared/ProducingGraph/ProducingGraph'
import { useEffect, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs'
import {
NodeOverview,
OverviewGraphNode
} from '../../components/visualize/NodeOverview/NodeOverview'
import { fixedEncodeURIComponent } from '../../src/utils'
import { ScrollContainer } from '../../components/shared/ScrollContainer/ScrollContainer'
import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps' import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps'
import { PageOverview } from '../../components/visualize/PageOverview'
const Page: NextPage<PropsGroupProvider> = ({ id, ...initial }) => { const Page: NextPage<PropsGroupProvider> = ({ id, ...initial }) => {
const { exportedFactories, baseFactories, groups } = useGroups()
const { findFactory } = useFactories()
useEffect(() => { useEffect(() => {
document.body.classList.add('scroll') document.body.classList.add('scroll')
return () => document.body.classList.remove('scroll') return () => document.body.classList.remove('scroll')
}, []) }, [])
const producingNodes: OverviewGraphNode[] = useMemo(() => {
return Object.values(groups).map(group => ({
inputs: calculateInputs(
[...group.exports, ...group.malls],
baseFactories,
exportedFactories,
findFactory
)[0],
outputs: group.exports,
name: group.name,
icons: [...group.exports, ...group.malls],
linkOut: `./visualize/${fixedEncodeURIComponent(group.name)}`
}))
}, [baseFactories, exportedFactories, findFactory, groups])
return ( return (
<GroupProvider id={id} initial={initial}> <GroupProvider id={id} initial={initial}>
<Head> <PageOverview />
<title>Factorio Microservices</title>
<meta name='description' content='Create Factorio microservices' />
<link rel='icon' href='/public/favicon.ico' />
</Head>
<main>
<ScrollContainer>
<h1>Factorio Microservices</h1>
<ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview} />
</ScrollContainer>
</main>
</GroupProvider> </GroupProvider>
) )
} }