Journey view update.

src/app/(main)/reports/[reportId]/Report.module.css

@@ -3,4 +3,5 @@
   grid-template-rows: max-content 1fr;
   grid-template-columns: max-content 1fr;
   margin-bottom: 60px;
+  height: 100%;
 }

src/app/(main)/reports/[reportId]/ReportBody.module.css

@@ -1,5 +1,5 @@
 .body {
   padding-inline-start: 20px;
-  grid-row: 2/3;
+  grid-row: 2 / 3;
   grid-column: 2 / 3;
 }

src/app/(main)/reports/[reportId]/ReportBody.tsx

@@ -1,6 +1,6 @@
-import styles from './ReportBody.module.css';
 import { useContext } from 'react';
 import { ReportContext } from './Report';
+import styles from './ReportBody.module.css';
 
 export function ReportBody({ children }) {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/journey/JourneyView.module.css

@@ -1,5 +1,6 @@
 .container {
-  height: 900px;
+  width: 100%;
+  height: 100%;
   position: relative;
 }
 
@@ -12,13 +13,13 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  gap: 60px;
   overflow: auto;
+  gap: 100px;
 }
 
 .header {
   display: flex;
-  margin-bottom: 20px;
+  min-height: 70px;
 }
 
 .num {
@@ -37,7 +38,11 @@
 }
 
 .column {
-  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.nodes {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -48,14 +53,18 @@
   padding: 10px 20px;
   background: var(--base75);
   border-radius: 5px;
+  display: flex;
+  align-items: center;
+  min-width: 300px;
+  min-height: 60px;
 }
 
-.item:hover:not(.highlight) {
+.item:hover:not(.selected) {
   color: var(--base900);
   background: var(--base100);
 }
 
-.highlight {
+.selected {
   color: var(--base75);
   background: var(--base900);
   font-weight: 400;

src/app/(main)/reports/journey/JourneyView.tsx

@@ -1,15 +1,17 @@
 import { useContext, useMemo, useState } from 'react';
 import { ReportContext } from '../[reportId]/Report';
 import { firstBy } from 'thenby';
-import styles from './JourneyView.module.css';
 import classNames from 'classnames';
 import { useEscapeKey } from 'components/hooks';
+import styles from './JourneyView.module.css';
 
 export default function JourneyView() {
-  const [selected, setSelected] = useState(null);
+  const [selectedNode, setSelectedNode] = useState(null);
   const { report } = useContext(ReportContext);
   const { data, parameters } = report || {};
-  useEscapeKey(() => setSelected(null));
+
+  useEscapeKey(() => setSelectedNode(null));
+
   const columns = useMemo(() => {
     if (!data) {
       return [];
@@ -26,6 +28,9 @@ export default function JourneyView() {
                 item,
                 total: +count,
                 index,
+                selected: !!selectedNode?.paths.find(arr => {
+                  return arr.find(a => a.items[index] === item);
+                }),
                 paths: [
                   data.filter((d, i) => {
                     return d.items[index] === item && i !== index;
@@ -42,13 +47,13 @@ export default function JourneyView() {
           .map(key => col[key])
           .sort(firstBy('total', -1));
       });
-  }, [data]);
+  }, [data, selectedNode]);
 
   const handleClick = (item: string, index: number, paths: any[]) => {
-    if (item !== selected?.item || index !== selected?.index) {
-      setSelected({ item, index, paths });
+    if (item !== selectedNode?.item || index !== selectedNode?.index) {
+      setSelectedNode({ item, index, paths });
     } else {
-      setSelected(null);
+      setSelectedNode(null);
     }
   };
 
@@ -59,10 +64,10 @@ export default function JourneyView() {
   return (
     <div className={styles.container}>
       <div className={styles.view}>
-        {columns.map((column, index) => {
-          const current = index === selected?.index;
-          const behind = index <= selected?.index - 1;
-          const ahead = index > selected?.index;
+        {columns.map((nodes, index) => {
+          const current = index === selectedNode?.index;
+          const behind = index <= selectedNode?.index - 1;
+          const ahead = index > selectedNode?.index;
 
           return (
             <div
@@ -76,23 +81,22 @@ export default function JourneyView() {
               <div className={styles.header}>
                 <div className={styles.num}>{index + 1}</div>
               </div>
-              {column.map(({ item, total, paths }) => {
-                const highlight = selected?.paths.find(arr => {
-                  return arr.find(a => a.items[index] === item);
-                });
-
-                return (
-                  <div
-                    key={item}
-                    className={classNames(styles.item, {
-                      [styles.highlight]: highlight,
-                    })}
-                    onClick={() => handleClick(item, index, paths)}
-                  >
-                    {item} ({total})
-                  </div>
-                );
-              })}
+              <div className={styles.nodes}>
+                {nodes.map(({ item, total, selected, paths }, i) => {
+                  return (
+                    <div
+                      id={`node_${index}_${i}`}
+                      key={item}
+                      className={classNames(styles.item, {
+                        [styles.selected]: selected,
+                      })}
+                      onClick={() => handleClick(item, index, paths)}
+                    >
+                      {item} ({total})
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           );
         })}

src/components/layout/Page.module.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   position: relative;
   width: 100%;
+  height: 100%;
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 20px;