Fixed journey calculations.

src/app/(main)/websites/[websiteId]/journeys/Journey.module.css

@@ -33,7 +33,6 @@
   justify-content: flex-start;
   gap: 10px;
   width: 100%;
-  height: 60px;
 }
 
 .visitors {

src/app/(main)/websites/[websiteId]/journeys/Journey.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { TooltipTrigger, Tooltip, Focusable, Icon, Text, Row } from '@umami/react-zen';
+import { TooltipTrigger, Tooltip, Focusable, Icon, Text, Row, Column } from '@umami/react-zen';
 import { firstBy } from 'thenby';
 import classNames from 'classnames';
 import { useEscapeKey, useMessages, useResultQuery } from '@/components/hooks';
@@ -169,8 +169,7 @@ export function Journey({
     <LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
       <div className={styles.container}>
         <div className={styles.view}>
-          {columns.map((column, columnIndex) => {
+          {columns.map(({ visitorCount, nodes }, columnIndex) => {
-            const dropOffPercent = `${~~column.dropOff}%`;
             return (
               <div
                 key={columnIndex}
@@ -182,16 +181,13 @@ export function Journey({
                 <div className={styles.header}>
                   <div className={styles.num}>{columnIndex + 1}</div>
                   <div className={styles.stats}>
-                    <div className={styles.visitors} title={column.visitorCount}>
+                    <div className={styles.visitors} title={visitorCount}>
-                      {formatLongNumber(column.visitorCount)} {formatMessage(labels.visitors)}
+                      {formatLongNumber(visitorCount)} {formatMessage(labels.visitors)}
-                    </div>
-                    <div>
-                      {columnIndex > 0 && <div className={styles.dropoff}>{dropOffPercent}</div>}
                     </div>
                   </div>
                 </div>
                 <div className={styles.nodes}>
-                  {column.nodes.map(
+                  {nodes.map(
                     ({
                       name,
                       totalCount,
@@ -208,6 +204,13 @@ export function Journey({
                           : selectedCount
                         : totalCount;
 
+                      const remaining =
+                        columnIndex > 0
+                          ? Math.round((nodeCount / columns[columnIndex - 1]?.visitorCount) * 100)
+                          : 0;
+
+                      const dropped = 100 - remaining;
+
                       return (
                         <div
                           key={name}
@@ -229,12 +232,22 @@ export function Journey({
                               <Text truncate>{name}</Text>
                             </Row>
                             <div className={styles.count} title={nodeCount}>
-                              <TooltipTrigger delay={0} isDisabled={columnIndex === 0}>
+                              <TooltipTrigger
+                                delay={0}
+                                isDisabled={columnIndex === 0 || (selectedNode && !selected)}
+                              >
                                 <Focusable>
                                   <div>{formatLongNumber(nodeCount)}</div>
                                 </Focusable>
-                                <Tooltip placement="right" offset={10}>
+                                <Tooltip placement="top" offset={20} showArrow>
-                                  {dropOffPercent}
+                                  <Text transform="lowercase" color="ruby">
+                                    {`${dropped}% ${formatMessage(labels.dropoff)}`}
+                                  </Text>
+                                  <Column>
+                                    <Text transform="lowercase">
+                                      {`${remaining}% ${formatMessage(labels.conversion)}`}
+                                    </Text>
+                                  </Column>
                                 </Tooltip>
                               </TooltipTrigger>
                             </div>

src/components/common/Panel.tsx

@@ -21,6 +21,7 @@ const fullscreenStyles = {
   height: '100%',
   top: 0,
   left: 0,
+  border: 'none',
   zIndex: 9999,
 } as any;
 

src/components/input/MenuButton.tsx

@@ -15,7 +15,7 @@ export function MenuButton({
 
   return (
     <DialogTrigger>
-      <Button variant="outline">
+      <Button variant="quiet">
         <Icon>
           <Ellipsis />
         </Icon>

src/components/messages.ts

@@ -260,10 +260,6 @@ export const labels = defineMessages({
     id: 'message.triggered-event',
     defaultMessage: 'Triggered event',
   },
-  visitorsDroppedOff: {
-    id: 'message.visitors-dropped-off',
-    defaultMessage: 'Visitors dropped off',
-  },
   utm: { id: 'label.utm', defaultMessage: 'UTM' },
   utmDescription: {
     id: 'label.utm-description',
@@ -325,6 +321,8 @@ export const labels = defineMessages({
   addBoard: { id: 'label.add-board', defaultMessage: 'Add board' },
   cohort: { id: 'label.cohort', defaultMessage: 'Cohort' },
   expand: { id: 'label.expand', defaultMessage: 'Expand' },
+  remaining: { id: 'label.remaining', defaultMessage: 'Remaining' },
+  conversion: { id: 'label.converstion', defaultMessage: 'Conversion' },
 });
 
 export const messages = defineMessages({