From b6111040c54f0cb04504069fd6fbe1bdff63f4ff Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 9 Oct 2024 20:06:55 +0200
Subject: [PATCH 1/7] toggle images on graph first go

---
 .../components/Flow/components/Checklist.tsx  |  7 +++
 .../components/Flow/components/Option.tsx     |  7 +++
 .../components/Flow/components/Question.tsx   |  7 +++
 .../components/Flow/components/Thumbnail.tsx  | 23 ++++++++++
 .../FlowEditor/ToggleImagesButton.tsx         | 45 +++++++++++++++++++
 .../FlowEditor/ToggleTagsButton.tsx           |  2 +-
 .../src/pages/FlowEditor/index.tsx            |  6 ++-
 .../src/pages/FlowEditor/lib/store/editor.ts  |  8 +++-
 8 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
index 3c2214f2be..ea99191d6c 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -15,6 +15,7 @@ import { getParentId } from "../lib/utils";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
+import { Thumbnail } from "./Thumbnail";
 
 type Props = {
   type: TYPES;
@@ -96,6 +97,12 @@ const Checklist: React.FC<Props> = React.memo((props) => {
             <span>{props.text}</span>
           </Link>
           {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+          {props.data?.img && (
+            <Thumbnail
+              imageSource={props.data?.img}
+              imageAltText={props.data?.text}
+            />
+          )}
         </Box>
         {groupedOptions ? (
           <ol className="categories">
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
index 8a48609f6e..6c1934cd03 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-navi";
 import { useStore } from "../../../lib/store";
 import Hanger from "./Hanger";
 import Node from "./Node";
+import { Thumbnail } from "./Thumbnail";
 
 const Option: React.FC<any> = (props) => {
   const childNodes = useStore((state) => state.childNodesOf(props.id));
@@ -34,6 +35,12 @@ const Option: React.FC<any> = (props) => {
         {childNodes.map((child: any) => (
           <Node key={child.id} parent={props.id} {...child} />
         ))}
+        {props.data?.img && (
+          <Thumbnail
+            imageSource={props.data?.img}
+            imageAltText={props.data.text}
+          />
+        )}
         <Hanger parent={props.id} />
       </ol>
     </li>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
index a63d20827c..bc0a295f6a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -14,6 +14,7 @@ import { getParentId } from "../lib/utils";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
+import { Thumbnail } from "./Thumbnail";
 
 type Props = {
   type: TYPES | "Error";
@@ -84,6 +85,12 @@ const Question: React.FC<Props> = React.memo((props) => {
           <span>{props.text}</span>
         </Link>
         {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+        {props.data?.img && (
+          <Thumbnail
+            imageSource={props.data?.img}
+            imageAltText={props.data?.text}
+          />
+        )}
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
new file mode 100644
index 0000000000..3fa0be0ea1
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
@@ -0,0 +1,23 @@
+import Box from "@mui/material/Box";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const Thumbnail: React.FC<{
+  imageSource: string;
+  imageAltText?: string;
+}> = ({ imageSource, imageAltText }) => {
+  const showImages = useStore((state) => state.showImages);
+  if (!showImages) return null;
+
+  return (
+    <Box
+      sx={{
+        maxWidth: "180px",
+        maxHeight: "180px",
+      }}
+      component="img"
+      src={imageSource}
+      alt={imageAltText}
+    />
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
new file mode 100644
index 0000000000..68add76f4a
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -0,0 +1,45 @@
+import ImageOffIcon from "@mui/icons-material/HideImage";
+import ImageIcon from "@mui/icons-material/Image";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import { TooltipWrap } from "./ToggleTagsButton";
+
+export const ToggleImagesButton: React.FC = () => {
+  const [showImages, toggleShowImages] = useStore((state) => [
+    state.showImages,
+    state.toggleShowImages,
+  ]);
+
+  return (
+    <Box
+      sx={(theme) => ({
+        position: "fixed",
+        bottom: theme.spacing(2),
+        left: theme.spacing(13),
+        zIndex: theme.zIndex.appBar,
+        border: `1px solid ${theme.palette.border.main}`,
+        borderRadius: "3px",
+        background: theme.palette.background.paper,
+      })}
+    >
+      <TooltipWrap title="Toggle images">
+        <IconButton
+          aria-label="Toggle images"
+          onClick={toggleShowImages}
+          size="large"
+          sx={(theme) => ({
+            padding: theme.spacing(1),
+            color: showImages
+              ? theme.palette.text.primary
+              : theme.palette.text.disabled,
+          })}
+        >
+          {showImages ? <ImageIcon /> : <ImageOffIcon />}
+        </IconButton>
+      </TooltipWrap>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
index 93e5bf4991..108f47ea0f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -8,7 +8,7 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
-const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
+export const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} arrow placement="right" classes={{ popper: className }} />
 ))(() => ({
   [`& .${tooltipClasses.arrow}`]: {
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 167b517006..66b5df591c 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -7,6 +7,7 @@ import React, { useRef } from "react";
 import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
+import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
 import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
@@ -50,7 +51,10 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
-          <ToggleTagsButton />
+          <Box sx={{ display: "flex", flexDirection: "row" }}>
+            <ToggleTagsButton />
+            <ToggleImagesButton />
+          </Box>
         </Box>
       </Box>
       <Sidebar />
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index 02db9a6b77..871200e661 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -3,7 +3,6 @@ import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
 import {
   ComponentType,
   FlowGraph,
-  IndexedNode,
   NodeId,
   OrderedFlow,
 } from "@opensystemslab/planx-core/types";
@@ -52,6 +51,8 @@ export interface EditorUIStore {
   hideTestEnvBanner: () => void;
   showTags: boolean;
   toggleShowTags: () => void;
+  showImages: boolean;
+  toggleShowImages: () => void;
 }
 
 export const editorUIStore: StateCreator<
@@ -76,12 +77,17 @@ export const editorUIStore: StateCreator<
     showTags: false,
 
     toggleShowTags: () => set({ showTags: !get().showTags }),
+
+    showImages: false,
+
+    toggleShowImages: () => set({ showImages: !get().showImages }),
   }),
   {
     name: "editorUIStore",
     partialize: (state) => ({
       showSidebar: state.showSidebar,
       showTags: state.showTags,
+      showImages: state.showImages,
     }),
   },
 );

From 56fd7bb8dfb3f836ea9e62dbfbcbde6a07027770 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 10 Oct 2024 09:55:43 +0200
Subject: [PATCH 2/7] toggle data fields too

---
 .../components/Flow/components/Checklist.tsx  | 16 ++++---
 .../components/Flow/components/DataField.tsx  | 33 ++++++++++++++
 .../components/Flow/components/Option.tsx     | 15 ++++---
 .../components/Flow/components/Question.tsx   | 16 ++++---
 .../components/Flow/components/Thumbnail.tsx  |  4 +-
 .../FlowEditor/ToggleDataFieldsButton.tsx     | 45 +++++++++++++++++++
 .../FlowEditor/ToggleImagesButton.tsx         |  4 +-
 .../src/pages/FlowEditor/floweditor.scss      |  2 +-
 .../src/pages/FlowEditor/index.tsx            | 12 +++--
 .../src/pages/FlowEditor/lib/store/editor.ts  |  7 +++
 10 files changed, 128 insertions(+), 26 deletions(-)
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
index ea99191d6c..e31eab25b6 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -12,6 +12,7 @@ import { Link } from "react-navi";
 
 import { useStore } from "../../../lib/store";
 import { getParentId } from "../lib/utils";
+import { DataField } from "./DataField";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
@@ -93,16 +94,19 @@ const Checklist: React.FC<Props> = React.memo((props) => {
             onContextMenu={handleContext}
             ref={drag}
           >
+            {props.data?.img && (
+              <Thumbnail
+                imageSource={props.data?.img}
+                imageAltText={props.data?.text}
+              />
+            )}
             {Icon && <Icon />}
             <span>{props.text}</span>
           </Link>
-          {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
-          {props.data?.img && (
-            <Thumbnail
-              imageSource={props.data?.img}
-              imageAltText={props.data?.text}
-            />
+          {props.data?.fn && (
+            <DataField value={props.data.fn} variant="parent" />
           )}
+          {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
         </Box>
         {groupedOptions ? (
           <ol className="categories">
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
new file mode 100644
index 0000000000..6147c0f558
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
@@ -0,0 +1,33 @@
+import Box from "@mui/material/Box";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const DataField: React.FC<{
+  value: string;
+  variant: "parent" | "child";
+}> = ({ value, variant }) => {
+  const showDataFields = useStore((state) => state.showDataFields);
+  if (!showDataFields) return null;
+
+  return (
+    <Box
+      sx={(theme) => ({
+        fontFamily: theme.typography.data.fontFamily,
+        fontSize: theme.typography.data,
+        backgroundColor: "#f0f0f0",
+        borderColor:
+          variant === "parent"
+            ? theme.palette.common.black
+            : theme.palette.grey[400],
+        borderWidth:
+          variant === "parent" ? "0 1px 1px 1px" : "0 .1px .1px .1px",
+        borderStyle: "solid",
+        width: "100%",
+        p: 0.5,
+        textAlign: "center",
+      })}
+    >
+      {value}
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
index 6c1934cd03..3e4e5b2177 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Link } from "react-navi";
 
 import { useStore } from "../../../lib/store";
+import { DataField } from "./DataField";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Thumbnail } from "./Thumbnail";
@@ -15,6 +16,7 @@ const Option: React.FC<any> = (props) => {
 
   let background = "#666"; // no flag color
   let color = "#000";
+
   try {
     const flag = flatFlags.find(({ value }) =>
       [props.data?.flag, props.data?.val].filter(Boolean).includes(value),
@@ -28,19 +30,20 @@ const Option: React.FC<any> = (props) => {
       className={classNames("card", "option", { wasVisited: props.wasVisited })}
     >
       <Link href={href} prefetch={false} onClick={(e) => e.preventDefault()}>
+        {props.data?.img && (
+          <Thumbnail
+            imageSource={props.data?.img}
+            imageAltText={props.data.text}
+          />
+        )}
         <div className="band" style={{ background, color }}></div>
         <div className="text">{props.data.text}</div>
       </Link>
+      {props.data?.val && <DataField value={props.data.val} variant="child" />}
       <ol className="decisions">
         {childNodes.map((child: any) => (
           <Node key={child.id} parent={props.id} {...child} />
         ))}
-        {props.data?.img && (
-          <Thumbnail
-            imageSource={props.data?.img}
-            imageAltText={props.data.text}
-          />
-        )}
         <Hanger parent={props.id} />
       </ol>
     </li>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
index bc0a295f6a..b2b1a20069 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -11,6 +11,7 @@ import { Link } from "react-navi";
 
 import { useStore } from "../../../lib/store";
 import { getParentId } from "../lib/utils";
+import { DataField } from "./DataField";
 import Hanger from "./Hanger";
 import Node from "./Node";
 import { Tag } from "./Tag";
@@ -81,16 +82,19 @@ const Question: React.FC<Props> = React.memo((props) => {
           onContextMenu={handleContext}
           ref={drag}
         >
+          {props.data?.img && (
+            <Thumbnail
+              imageSource={props.data?.img}
+              imageAltText={props.data?.text}
+            />
+          )}
           {Icon && <Icon titleAccess={iconTitleAccess} />}
           <span>{props.text}</span>
         </Link>
-        {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
-        {props.data?.img && (
-          <Thumbnail
-            imageSource={props.data?.img}
-            imageAltText={props.data?.text}
-          />
+        {props.type !== TYPES.SetValue && props.data?.fn && (
+          <DataField value={props.data.fn} variant="parent" />
         )}
+        {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
index 3fa0be0ea1..669e39c27e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
@@ -12,8 +12,8 @@ export const Thumbnail: React.FC<{
   return (
     <Box
       sx={{
-        maxWidth: "180px",
-        maxHeight: "180px",
+        maxWidth: "220px",
+        maxHeight: "220px",
       }}
       component="img"
       src={imageSource}
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
new file mode 100644
index 0000000000..9cf5aed7ec
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -0,0 +1,45 @@
+import DataFieldIcon from "@mui/icons-material/AutoFixNormal";
+import DataFieldOffIcon from "@mui/icons-material/AutoFixOff";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import { TooltipWrap } from "./ToggleTagsButton";
+
+export const ToggleDataFieldsButton: React.FC = () => {
+  const [showDataFields, toggleShowDataFields] = useStore((state) => [
+    state.showDataFields,
+    state.toggleShowDataFields,
+  ]);
+
+  return (
+    <Box
+      sx={(theme) => ({
+        position: "fixed",
+        bottom: theme.spacing(6),
+        left: theme.spacing(7),
+        zIndex: theme.zIndex.appBar,
+        border: `1px solid ${theme.palette.border.main}`,
+        borderRadius: "3px",
+        background: theme.palette.background.paper,
+      })}
+    >
+      <TooltipWrap title="Toggle data fields">
+        <IconButton
+          aria-label="Toggle data fields"
+          onClick={toggleShowDataFields}
+          size="large"
+          sx={(theme) => ({
+            padding: theme.spacing(1),
+            color: showDataFields
+              ? theme.palette.text.primary
+              : theme.palette.text.disabled,
+          })}
+        >
+          {showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
+        </IconButton>
+      </TooltipWrap>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
index 68add76f4a..be65e0c7c8 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -17,8 +17,8 @@ export const ToggleImagesButton: React.FC = () => {
     <Box
       sx={(theme) => ({
         position: "fixed",
-        bottom: theme.spacing(2),
-        left: theme.spacing(13),
+        bottom: theme.spacing(10),
+        left: theme.spacing(7),
         zIndex: theme.zIndex.appBar,
         border: `1px solid ${theme.palette.border.main}`,
         borderRadius: "3px",
diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
index e610e515d9..11909f8ed8 100644
--- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
+++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -250,7 +250,7 @@ $fontMonospace: "Source Code Pro", monospace;
     flex-direction: column;
     padding: 0;
     min-width: 60px;
-    max-width: 200px;
+    max-width: fit-content;
   }
   .band {
     width: 100%;
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 66b5df591c..50f0c96b7f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -1,12 +1,14 @@
 import "./floweditor.scss";
 
 import Box from "@mui/material/Box";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import { styled } from "@mui/material/styles";
 import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import React, { useRef } from "react";
 import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
+import { ToggleDataFieldsButton } from "./components/FlowEditor/ToggleDataFieldsButton";
 import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
 import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
@@ -51,10 +53,14 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
-          <Box sx={{ display: "flex", flexDirection: "row" }}>
-            <ToggleTagsButton />
+          <ButtonGroup
+            orientation="vertical"
+            aria-label="Toggle node attributes"
+          >
             <ToggleImagesButton />
-          </Box>
+            <ToggleDataFieldsButton />
+            <ToggleTagsButton />
+          </ButtonGroup>
         </Box>
       </Box>
       <Sidebar />
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index 871200e661..b12d7f920e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -53,6 +53,8 @@ export interface EditorUIStore {
   toggleShowTags: () => void;
   showImages: boolean;
   toggleShowImages: () => void;
+  showDataFields: boolean;
+  toggleShowDataFields: () => void;
 }
 
 export const editorUIStore: StateCreator<
@@ -81,6 +83,10 @@ export const editorUIStore: StateCreator<
     showImages: false,
 
     toggleShowImages: () => set({ showImages: !get().showImages }),
+
+    showDataFields: false,
+
+    toggleShowDataFields: () => set({ showDataFields: !get().showDataFields }),
   }),
   {
     name: "editorUIStore",
@@ -88,6 +94,7 @@ export const editorUIStore: StateCreator<
       showSidebar: state.showSidebar,
       showTags: state.showTags,
       showImages: state.showImages,
+      showDataFields: state.showDataFields,
     }),
   },
 );

From 6767d9485c108bf448215d253045e250887958c3 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 16 Oct 2024 10:00:41 +0200
Subject: [PATCH 3/7] tidier styles

---
 .../pages/FlowEditor/components/Flow/components/DataField.tsx   | 2 +-
 .../src/pages/FlowEditor/components/Flow/components/Option.tsx  | 2 +-
 .../pages/FlowEditor/components/Flow/components/Thumbnail.tsx   | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
index 6147c0f558..86686beb4f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/DataField.tsx
@@ -20,7 +20,7 @@ export const DataField: React.FC<{
             ? theme.palette.common.black
             : theme.palette.grey[400],
         borderWidth:
-          variant === "parent" ? "0 1px 1px 1px" : "0 .1px .1px .1px",
+          variant === "parent" ? "0 1px 1px 1px" : "1px 0 0 0",
         borderStyle: "solid",
         width: "100%",
         p: 0.5,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
index 3e4e5b2177..8f1802dd70 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -38,8 +38,8 @@ const Option: React.FC<any> = (props) => {
         )}
         <div className="band" style={{ background, color }}></div>
         <div className="text">{props.data.text}</div>
+        {props.data?.val && <DataField value={props.data.val} variant="child" />}
       </Link>
-      {props.data?.val && <DataField value={props.data.val} variant="child" />}
       <ol className="decisions">
         {childNodes.map((child: any) => (
           <Node key={child.id} parent={props.id} {...child} />
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
index 669e39c27e..7250a30c65 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Thumbnail.tsx
@@ -14,6 +14,7 @@ export const Thumbnail: React.FC<{
       sx={{
         maxWidth: "220px",
         maxHeight: "220px",
+        margin: "auto",
       }}
       component="img"
       src={imageSource}

From 078c53d5b3584f0f161b0f6e48285a8319e91eef Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 16 Oct 2024 12:39:18 +0200
Subject: [PATCH 4/7] use code & code off icons

---
 .../components/FlowEditor/ToggleDataFieldsButton.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
index ec212ecbb5..8c2ae3eb28 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -1,5 +1,5 @@
-import DataFieldIcon from "@mui/icons-material/AutoFixNormal";
-import DataFieldOffIcon from "@mui/icons-material/AutoFixOff";
+import DataFieldIcon from "@mui/icons-material/Code";
+import DataFieldOffIcon from "@mui/icons-material/CodeOff";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";

From 467250c4913ff0af1b4b90cabdd0f8973eb02d53 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Wed, 16 Oct 2024 11:25:23 +0100
Subject: [PATCH 5/7] refactor: Simplify editor toggle button group

---
 .../FlowEditor/ToggleDataFieldsButton.tsx     | 51 ++++++++-----------
 .../FlowEditor/ToggleImagesButton.tsx         | 46 +++++++----------
 .../FlowEditor/ToggleTagsButton.tsx           | 46 +++++++----------
 .../src/pages/FlowEditor/index.tsx            | 15 +++++-
 4 files changed, 72 insertions(+), 86 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
index 8c2ae3eb28..5186e64509 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -1,6 +1,5 @@
-import DataFieldIcon from "@mui/icons-material/Code";
-import DataFieldOffIcon from "@mui/icons-material/CodeOff";
-import Box from "@mui/material/Box";
+import CodeIcon from "@mui/icons-material/Code";
+import CodeOffIcon from "@mui/icons-material/CodeOff";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -13,32 +12,24 @@ export const ToggleDataFieldsButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(6),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle data fields" placement="right">
-        <IconButton
-          aria-label="Toggle data fields"
-          onClick={toggleShowDataFields}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showDataFields
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle data fields" placement="right">
+      <IconButton
+        aria-label="Toggle data fields"
+        onClick={toggleShowDataFields}
+        size="large"
+        sx={(theme) => ({
+          padding: theme.spacing(1),
+          background: theme.palette.background.paper,
+          color: showDataFields
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showDataFields ? <CodeIcon /> : <CodeOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
index 5e27b46a0a..8fa6d8a6be 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -13,32 +13,24 @@ export const ToggleImagesButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(10),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle images" placement="right">
-        <IconButton
-          aria-label="Toggle images"
-          onClick={toggleShowImages}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showImages
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showImages ? <ImageIcon /> : <ImageOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle images" placement="right">
+      <IconButton
+        aria-label="Toggle images"
+        onClick={toggleShowImages}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showImages
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showImages ? <ImageIcon /> : <ImageOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
index 18a01e24a8..df34b627c1 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -13,32 +13,24 @@ export const ToggleTagsButton: React.FC = () => {
   ]);
 
   return (
-    <Box
-      sx={(theme) => ({
-        position: "fixed",
-        bottom: theme.spacing(2),
-        left: theme.spacing(7),
-        zIndex: theme.zIndex.appBar,
-        border: `1px solid ${theme.palette.border.main}`,
-        borderRadius: "3px",
-        background: theme.palette.background.paper,
-      })}
-    >
-      <Tooltip title="Toggle tags" placement="right">
-        <IconButton
-          aria-label="Toggle tags"
-          onClick={toggleShowTags}
-          size="large"
-          sx={(theme) => ({
-            padding: theme.spacing(1),
-            color: showTags
-              ? theme.palette.text.primary
-              : theme.palette.text.disabled,
-          })}
-        >
-          {showTags ? <LabelIcon /> : <LabelOffIcon />}
-        </IconButton>
-      </Tooltip>
-    </Box>
+    <Tooltip title="Toggle tags" placement="right">
+      <IconButton
+        aria-label="Toggle tags"
+        onClick={toggleShowTags}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showTags
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showTags ? <LabelIcon /> : <LabelOffIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 50f0c96b7f..b0334df497 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -27,6 +27,17 @@ const EditorContainer = styled(Box, {
     : `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
+const EditorVisualControls = styled(ButtonGroup)(({ theme }) => ({
+  position: "fixed",
+  bottom: theme.spacing(2.5),
+  left: theme.spacing(7.5),
+  zIndex: theme.zIndex.appBar,
+  border: `1px solid ${theme.palette.border.main}`,
+  borderRadius: "3px",
+  background: theme.palette.border.main,
+  gap: "1px",
+}));
+
 const FlowEditor = () => {
   const [flow, ...breadcrumbs] =
     useCurrentRoute().url.pathname.split("/").at(-1)?.split(",") || [];
@@ -53,14 +64,14 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
-          <ButtonGroup
+          <EditorVisualControls
             orientation="vertical"
             aria-label="Toggle node attributes"
           >
             <ToggleImagesButton />
             <ToggleDataFieldsButton />
             <ToggleTagsButton />
-          </ButtonGroup>
+          </EditorVisualControls>
         </Box>
       </Box>
       <Sidebar />

From c24bded516eb3514b8a100e562bb88acb741ab9a Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Wed, 16 Oct 2024 11:41:46 +0100
Subject: [PATCH 6/7] button border radius

---
 .../components/FlowEditor/ToggleDataFieldsButton.tsx           | 3 ++-
 .../FlowEditor/components/FlowEditor/ToggleImagesButton.tsx    | 2 +-
 .../FlowEditor/components/FlowEditor/ToggleTagsButton.tsx      | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
index 5186e64509..6ec650bfd3 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -18,8 +18,9 @@ export const ToggleDataFieldsButton: React.FC = () => {
         onClick={toggleShowDataFields}
         size="large"
         sx={(theme) => ({
-          padding: theme.spacing(1),
           background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          borderRadius: "3px",
           color: showDataFields
             ? theme.palette.text.primary
             : theme.palette.text.disabled,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
index 8fa6d8a6be..090b644647 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -1,6 +1,5 @@
 import ImageOffIcon from "@mui/icons-material/HideImage";
 import ImageIcon from "@mui/icons-material/Image";
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -21,6 +20,7 @@ export const ToggleImagesButton: React.FC = () => {
         sx={(theme) => ({
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
+          borderRadius: "3px",
           color: showImages
             ? theme.palette.text.primary
             : theme.palette.text.disabled,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
index df34b627c1..f52b3f93a1 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -1,6 +1,5 @@
 import LabelIcon from "@mui/icons-material/Label";
 import LabelOffIcon from "@mui/icons-material/LabelOff";
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -21,6 +20,7 @@ export const ToggleTagsButton: React.FC = () => {
         sx={(theme) => ({
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
+          borderRadius: "3px",
           color: showTags
             ? theme.palette.text.primary
             : theme.palette.text.disabled,

From 8051058008d7b84897f2e39815a67350e5071bbe Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Wed, 16 Oct 2024 11:43:09 +0100
Subject: [PATCH 7/7] group overflow setting

---
 .../FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx  | 1 -
 .../FlowEditor/components/FlowEditor/ToggleImagesButton.tsx      | 1 -
 .../pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx  | 1 -
 editor.planx.uk/src/pages/FlowEditor/index.tsx                   | 1 +
 4 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
index 6ec650bfd3..7bfe499d46 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
@@ -20,7 +20,6 @@ export const ToggleDataFieldsButton: React.FC = () => {
         sx={(theme) => ({
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
-          borderRadius: "3px",
           color: showDataFields
             ? theme.palette.text.primary
             : theme.palette.text.disabled,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
index 090b644647..4e1a958804 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
@@ -20,7 +20,6 @@ export const ToggleImagesButton: React.FC = () => {
         sx={(theme) => ({
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
-          borderRadius: "3px",
           color: showImages
             ? theme.palette.text.primary
             : theme.palette.text.disabled,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
index f52b3f93a1..068563981a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
@@ -20,7 +20,6 @@ export const ToggleTagsButton: React.FC = () => {
         sx={(theme) => ({
           background: theme.palette.background.paper,
           padding: theme.spacing(1),
-          borderRadius: "3px",
           color: showTags
             ? theme.palette.text.primary
             : theme.palette.text.disabled,
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index b0334df497..f582340893 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -36,6 +36,7 @@ const EditorVisualControls = styled(ButtonGroup)(({ theme }) => ({
   borderRadius: "3px",
   background: theme.palette.border.main,
   gap: "1px",
+  overflow: "hidden",
 }));
 
 const FlowEditor = () => {