diff --git a/components/visualize/PageDetails.tsx b/components/visualize/PageDetails.tsx
index 2c58e09..b10f9dd 100644
--- a/components/visualize/PageDetails.tsx
+++ b/components/visualize/PageDetails.tsx
@@ -1,7 +1,7 @@
import { useRouter } from 'next/router'
import { useGroups } from '../contexts/GroupProvider'
import { useFactories } from '../../src/hooks/useFactories'
-import { FC, useEffect, useMemo } from 'react'
+import { FC, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs'
import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails'
import { groupBy, isNonNullable, uniquify } from '../../src/utils'
@@ -17,11 +17,6 @@ export const PageDetails: FC = () => {
const { exportedFactories, baseFactories, groups } = useGroups()
const { findFactory } = useFactories()
- useEffect(() => {
- document.body.classList.add('scroll')
- return () => document.body.classList.remove('scroll')
- }, [])
-
const group = typeof name === 'string' ? groups[name] : undefined
const [inputFactories, intermediateFactories] = useMemo<
@@ -68,7 +63,6 @@ export const PageDetails: FC = () => {
Factorio Microservices
-
diff --git a/components/visualize/PageOverview.tsx b/components/visualize/PageOverview.tsx
new file mode 100644
index 0000000..263cd16
--- /dev/null
+++ b/components/visualize/PageOverview.tsx
@@ -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 (
+ <>
+
+ Factorio Microservices
+
+
+
+
+ Factorio Microservices
+
+
+
+
+ )
+}
diff --git a/pages/visualize/[name].tsx b/pages/visualize/[name].tsx
index b755863..960bbfe 100644
--- a/pages/visualize/[name].tsx
+++ b/pages/visualize/[name].tsx
@@ -2,8 +2,14 @@ import type { NextPage } from 'next'
import { GroupProvider } from '../../components/contexts/GroupProvider'
import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps'
import { PageDetails } from '../../components/visualize/PageDetails'
+import { useEffect } from 'react'
const Page: NextPage = ({ id, ...initial }) => {
+ useEffect(() => {
+ document.body.classList.add('scroll')
+ return () => document.body.classList.remove('scroll')
+ }, [])
+
return (
diff --git a/pages/visualize/index.tsx b/pages/visualize/index.tsx
index 2ce3ef1..d22f0c7 100644
--- a/pages/visualize/index.tsx
+++ b/pages/visualize/index.tsx
@@ -1,55 +1,19 @@
import type { NextPage } from 'next'
-import Head from 'next/head'
-import { GroupProvider, useGroups } from '../../components/contexts/GroupProvider'
-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 { GroupProvider } from '../../components/contexts/GroupProvider'
+import { useEffect } from 'react'
+
import { getServerSidePropsGroupProvider, PropsGroupProvider } from '../../src/getServerSideProps'
+import { PageOverview } from '../../components/visualize/PageOverview'
const Page: NextPage = ({ id, ...initial }) => {
- const { exportedFactories, baseFactories, groups } = useGroups()
- const { findFactory } = useFactories()
-
useEffect(() => {
document.body.classList.add('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 (
-
- Factorio Microservices
-
-
-
-
-
- Factorio Microservices
-
-
-
+
)
}