rockfactory · almarzn · Dec 18, 2024 · Dec 18, 2024
diff --git a/index.html b/index.html
@@ -17,6 +17,11 @@
       src="https://cloud.umami.is/script.js"
       data-website-id="c86a6222-5be7-4d14-a055-6d1b84baae27"
     ></script>
+    <style>
+      :root, body {
+          overscroll-behavior: none;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/factories/charts/ChartsTab.tsx b/src/factories/charts/ChartsTab.tsx
@@ -8,6 +8,8 @@ import { FactoriesGraphSettingsModal } from './graph/settings/FactoriesGraphSett
 import { FactoriesSankeyChart } from './sankey/FactoriesSankeyChart';
 import { useChartsView } from './store/chartsSlice';
 
+import { FullHeightContainer } from '@/layout/FullHeightContainer';
+
 export interface IChartsTabProps {}
 
 export function ChartsTab(_props: IChartsTabProps) {
@@ -30,7 +32,7 @@ export function ChartsTab(_props: IChartsTabProps) {
   }
 
   return (
-    <div>
+    <>
       <AfterHeaderSticky>
         <Group gap="xs">
           <SegmentedControl
@@ -44,8 +46,10 @@ export function ChartsTab(_props: IChartsTabProps) {
           {view === 'graph' && <FactoriesGraphSettingsModal />}
         </Group>
       </AfterHeaderSticky>
-      {view === 'graph' && <FactoriesGraphContainer />}
-      {view === 'sankey' && <FactoriesSankeyChart />}
-    </div>
+      <FullHeightContainer>
+        {view === 'graph' && <FactoriesGraphContainer />}
+        {view === 'sankey' && <FactoriesSankeyChart />}
+      </FullHeightContainer>
+    </>
   );
 }
diff --git a/src/factories/charts/graph/FactoriesGraphContainer.tsx b/src/factories/charts/graph/FactoriesGraphContainer.tsx
@@ -8,13 +8,8 @@ export interface IFactoriesGraphContainer {}
 export function FactoriesGraphContainer(props: IFactoriesGraphContainer) {
   const { nodes, edges } = useFactoriesGraph();
   return (
-    <Stack gap="md">
-      <ReactFlowProvider>
-        <FactoriesGraphLayout
-          nodes={nodes}
-          edges={edges}
-        ></FactoriesGraphLayout>
-      </ReactFlowProvider>
-    </Stack>
+    <ReactFlowProvider>
+      <FactoriesGraphLayout nodes={nodes} edges={edges}></FactoriesGraphLayout>
+    </ReactFlowProvider>
   );
 }
diff --git a/src/factories/charts/graph/FactoriesGraphLayout.tsx b/src/factories/charts/graph/FactoriesGraphLayout.tsx
@@ -95,67 +95,59 @@ export const FactoriesGraphLayout = (props: FactoriesGraphLayoutProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <Box w={'100%'} h={'80vh'} opacity={opacity}>
-      <ReactFlow
-        ref={ref}
-        minZoom={0.2}
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        connectionLineType={ConnectionLineType.SmoothStep}
-        fitView
-        snapToGrid
-        colorMode="dark"
-        proOptions={{
-          hideAttribution: true,
-        }}
-        snapGrid={[10, 10]}
-      >
-        <Controls showFitView />
-        <MiniMap pannable={true} nodeStrokeWidth={3} />
-
-        <svg>
-          <defs>
-            <linearGradient id="edge-gradient">
-              <stop offset="0%" stopColor="var(--mantine-color-gray-7)" />
-              <stop offset="100%" stopColor="var(--mantine-color-gray-4)" />
-            </linearGradient>
-            <linearGradient id="edge-gradient-reverse">
-              <stop offset="0%" stopColor="var(--mantine-color-gray-4)" />
-              <stop offset="100%" stopColor="var(--mantine-color-gray-7)" />
-            </linearGradient>
-
-            <marker
-              id="edge-circle"
-              viewBox="-5 -5 10 10"
-              refX="0"
-              refY="0"
-              markerUnits="strokeWidth"
-              markerWidth="10"
-              markerHeight="10"
-              orient="auto"
-            >
-              <circle
-                stroke="#2a8af6"
-                strokeOpacity="0.75"
-                r="2"
-                cx="0"
-                cy="0"
-              />
-            </marker>
-          </defs>
-        </svg>
-        <Background
-          bgColor="var(--mantine-color-dark-7)"
-          color="var(--mantine-color-dark-4)"
-          variant={BackgroundVariant.Dots}
-          gap={[10, 10]}
-        />
-        {props.children}
-      </ReactFlow>
-    </Box>
+    <ReactFlow
+      ref={ref}
+      minZoom={0.2}
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      connectionLineType={ConnectionLineType.SmoothStep}
+      fitView
+      snapToGrid
+      colorMode="dark"
+      proOptions={{
+        hideAttribution: true,
+      }}
+      snapGrid={[10, 10]}
+    >
+      <Controls showFitView />
+      <MiniMap pannable={true} nodeStrokeWidth={3} />
+
+      <svg>
+        <defs>
+          <linearGradient id="edge-gradient">
+            <stop offset="0%" stopColor="var(--mantine-color-gray-7)" />
+            <stop offset="100%" stopColor="var(--mantine-color-gray-4)" />
+          </linearGradient>
+          <linearGradient id="edge-gradient-reverse">
+            <stop offset="0%" stopColor="var(--mantine-color-gray-4)" />
+            <stop offset="100%" stopColor="var(--mantine-color-gray-7)" />
+          </linearGradient>
+
+          <marker
+            id="edge-circle"
+            viewBox="-5 -5 10 10"
+            refX="0"
+            refY="0"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+          >
+            <circle stroke="#2a8af6" strokeOpacity="0.75" r="2" cx="0" cy="0" />
+          </marker>
+        </defs>
+      </svg>
+      <Background
+        bgColor="var(--mantine-color-dark-7)"
+        color="var(--mantine-color-dark-4)"
+        variant={BackgroundVariant.Dots}
+        gap={[10, 10]}
+      />
+      {props.children}
+    </ReactFlow>
   );
 };
diff --git a/src/factories/charts/sankey/FactoriesSankeyChart.tsx b/src/factories/charts/sankey/FactoriesSankeyChart.tsx
@@ -73,36 +73,38 @@ export function FactoriesSankeyChart(props: IFactoriesSankeyChartProps) {
   }
 
   return (
-    <Container size="lg" mt="lg" mb={100}>
-      <ErrorBoundary
-        fallback={
-          <Alert
-            title="An error occurred while rendering chart"
-            color="red"
-            icon={<IconAlertCircle />}
-            variant="light"
-          >
-            Make sure to avoid circular paths in your logistics chain.
-          </Alert>
-        }
-        showDialog
-      >
-        <Box h={400}>
-          <ResponsiveSankey
-            data={data}
-            linkTooltip={info => {
-              return (
-                <Paper shadow="sm" radius="sm" p="md">
-                  <Text size="md">
-                    {info.link.source.id} → {info.link.target.id}:{' '}
-                    {info.link.resourceLabel} ({info.link.value})
-                  </Text>
-                </Paper>
-              );
-            }}
-          />
-        </Box>
-      </ErrorBoundary>
-    </Container>
+    <ErrorBoundary
+      fallback={
+        <Alert
+          title="An error occurred while rendering chart"
+          color="red"
+          icon={<IconAlertCircle />}
+          variant="light"
+        >
+          Make sure to avoid circular paths in your logistics chain.
+        </Alert>
+      }
+      showDialog
+    >
+      <ResponsiveSankey
+        data={data}
+        margin={{
+          top: 32,
+          bottom: 32,
+          left: 32,
+          right: 32,
+        }}
+        linkTooltip={info => {
+          return (
+            <Paper shadow="sm" radius="sm" p="md">
+              <Text size="md">
+                {info.link.source.id} → {info.link.target.id}:{' '}
+                {info.link.resourceLabel} ({info.link.value})
+              </Text>
+            </Paper>
+          );
+        }}
+      />
+    </ErrorBoundary>
   );
 }
diff --git a/src/factories/details/FactoryGraph.tsx b/src/factories/details/FactoryGraph.tsx
@@ -8,7 +8,7 @@ export const FactoryGraph = ({ id }: { id: string }) => {
     useSolverSolution(id, 'game');
 
   return (
-    <Box h="80vh" pos={'relative'}>
+    <>
       <Box pos={'absolute'} right={0} top={0} style={{ zIndex: 99 }} p="md">
         <SolverRequestDrawer
           factoryId={id}
@@ -24,6 +24,6 @@ export const FactoryGraph = ({ id }: { id: string }) => {
           instance={instance}
         />
       )}
-    </Box>
+    </>
   );
 };
diff --git a/src/factories/details/FactoryPage.tsx b/src/factories/details/FactoryPage.tsx
@@ -7,6 +7,7 @@ import { AfterHeaderSticky } from '@/layout/AfterHeaderSticky';
 import { FactoryDeleteButton } from '@/factories/details/FactoryDeleteButton';
 import { ProductionView } from '@/factories/details/ProductionView';
 import { FactoryGraph } from '@/factories/details/FactoryGraph';
+import { FullHeightContainer } from '@/layout/FullHeightContainer';
 
 export const FactoryPage = ({
   currentView,
@@ -60,7 +61,11 @@ export const FactoryPage = ({
         </Group>
       </AfterHeaderSticky>
       {currentView === 'overview' && <ProductionView id={id} />}
-      {currentView === 'calculator' && <FactoryGraph id={id} />}
+      {currentView === 'calculator' && (
+        <FullHeightContainer>
+          <FactoryGraph id={id} />
+        </FullHeightContainer>
+      )}
     </>
   );
 };
diff --git a/src/layout/AfterHeaderSticky.tsx b/src/layout/AfterHeaderSticky.tsx
@@ -22,14 +22,14 @@ function useHeaderTop() {
 export function AfterHeaderSticky(
   props: React.PropsWithChildren<IAfterHeaderStickyProps>,
 ) {
-  const headerTop = useHeaderTop();
+  // const headerTop = useHeaderTop();
   return (
     <Box
       bg="dark.7"
       w="100%"
       style={{
         position: 'sticky',
-        top: headerTop,
+        top: 0,
         zIndex: 10,
         boxShadow: '0 4px 4px rgba(0, 0, 0, 0.1)',
       }}

diff --git a/src/layout/AppContainer.module.css b/src/layout/AppContainer.module.css
@@ -0,0 +1,16 @@
+.appContainer {
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+
+    overscroll-behavior: none;
+}
+
+.appContainerPageContent {
+    flex-grow: 1;
+    display: flex;
+
+    flex-direction: column;
+    align-items: stretch;
+}
diff --git a/src/layout/AppContainer.tsx b/src/layout/AppContainer.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import styles from './AppContainer.module.css';
+
+interface IAppContainerProps {
+  header: ReactNode;
+  footer: ReactNode;
+  children: ReactNode;
+}
+
+export const AppContainer = ({
+  footer,
+  header,
+  children,
+}: IAppContainerProps) => {
+  return (
+    <div className={styles.appContainer}>
+      {header}
+      <div className={styles.appContainerPageContent}>{children}</div>
+      {footer}
+    </div>
+  );
+};
diff --git a/src/layout/FullHeightContainer.module.css b/src/layout/FullHeightContainer.module.css
@@ -0,0 +1,8 @@
+.fullHeightContainer {
+    position: relative;
+    height: 0;
+
+    flex-grow: 1;
+
+    overflow-y: scroll;
+}
diff --git a/src/layout/FullHeightContainer.tsx b/src/layout/FullHeightContainer.tsx
@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import styles from '@/layout/FullHeightContainer.module.css';
+
+export const FullHeightContainer = ({ children }: { children: ReactNode }) => {
+  return <div className={styles.fullHeightContainer}>{children}</div>;
+};
diff --git a/src/layout/Header.module.css b/src/layout/Header.module.css
@@ -6,8 +6,8 @@
   );
   border-bottom: rem(1px) solid
     light-dark(var(--mantine-color-gray-2), transparent);
-  position: sticky;
-  top: 0;
+  /*position: sticky;*/
+  /*top: 0;*/
   z-index: 10;
 }