From ac2829ef846d6bf3e43c840d9bae713401b3515e Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 28 May 2024 20:09:20 +0200
Subject: [PATCH 1/5] Added create filament page support for multi color

---
 client/public/locales/en/common.json       |  7 +-
 client/src/components/multiColorPicker.tsx | 85 ++++++++++++++++++++++
 client/src/pages/filaments/create.tsx      | 72 ++++++++++++++----
 3 files changed, 149 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/multiColorPicker.tsx

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index d0ff6d40f..5bd92a3e3 100644
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -204,6 +204,10 @@
             "settings_extruder_temp": "Extruder Temp",
             "settings_bed_temp": "Bed Temp",
             "color_hex": "Color",
+            "single_color": "Single",
+            "multi_color": "Multi",
+            "coaxial": "Coextruded",
+            "longitudinal": "Longitudinal",
             "external_id": "External ID",
             "spools": "Show Spools"
         },
@@ -213,7 +217,8 @@
             "price": "Price of a full spool.",
             "weight": "The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging.",
             "spool_weight": "The weight of an empty spool. Used to determine measured weight of a spool.",
-            "article_number": "E.g. EAN, UPC, etc."
+            "article_number": "E.g. EAN, UPC, etc.",
+            "multi_color_direction": "Filaments can have multiple colors in two ways: either through coextrusion, like dual-color filaments with consistent multi-colors, or through longitudinal color changes, like gradient filaments that shift colors along the spool."
         },
         "titles": {
             "create": "Create Filament",
diff --git a/client/src/components/multiColorPicker.tsx b/client/src/components/multiColorPicker.tsx
new file mode 100644
index 000000000..64581b80c
--- /dev/null
+++ b/client/src/components/multiColorPicker.tsx
@@ -0,0 +1,85 @@
+import { CloseOutlined, PlusOutlined } from "@ant-design/icons";
+import { Badge, Button, ColorPicker, InputNumber, Space } from "antd";
+
+function generateRandomColor() {
+  return "000000".replace(/0/g, function () {
+    return (~~(Math.random() * 16)).toString(16);
+  });
+}
+
+function generateInitialColors(num: number) {
+  const colors = [];
+  for (let i = 0; i < num; i++) {
+    colors.push(generateRandomColor());
+  }
+  return colors;
+}
+
+/**
+ * An Ant Design compatible form input for multiple color pickers
+ * The value is a comma separated list of hex values, without hashtags
+ * @param props
+ * @returns
+ */
+export function MultiColorPicker(props: {
+  value?: string | null | undefined;
+  onChange?: (value: string | null | undefined) => void;
+  min?: number;
+  max?: number;
+}) {
+  const values = props.value ? props.value.split(",") : generateInitialColors(props.min ?? 0);
+  if (!props.value && props.onChange) {
+    // Update value immediately
+    props.onChange(values.join(","));
+  }
+  const pickers = values.map((value, idx) => (
+    <Badge
+      key={idx}
+      count={
+        values.length > (props.min ?? 0) ? (
+          <span className="ant-badge-count">
+            <CloseOutlined
+              onClick={() => {
+                // Remove this picker
+                if (props.onChange) {
+                  props.onChange(values.filter((v, i) => i !== idx).join(","));
+                }
+              }}
+            />
+          </span>
+        ) : (
+          <></>
+        )
+      }
+    >
+      <ColorPicker
+        format="hex"
+        value={value}
+        onChange={(_, newHex) => {
+          if (props.onChange) {
+            newHex = newHex.replace("#", "");
+            props.onChange(values.map((v, i) => (i === idx ? newHex : v)).join(","));
+          }
+        }}
+      />
+    </Badge>
+  ));
+
+  return (
+    <>
+      <Space direction="horizontal" size="middle">
+        {pickers}
+        {values.length < (props.max ?? Infinity) && (
+          <Button
+            icon={<PlusOutlined />}
+            onClick={() => {
+              if (props.onChange) {
+                props.onChange(values.concat(generateRandomColor()).join(","));
+              }
+            }}
+          />
+        )}
+      </Space>
+    </>
+  );
+}
diff --git a/client/src/pages/filaments/create.tsx b/client/src/pages/filaments/create.tsx
index f930aafaa..964139cb2 100644
--- a/client/src/pages/filaments/create.tsx
+++ b/client/src/pages/filaments/create.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { HttpError, IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, Select, InputNumber, ColorPicker, Button, Typography, Modal } from "antd";
+import { Form, Input, Select, InputNumber, ColorPicker, Button, Typography, Modal, Radio } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { IVendor } from "../vendors/model";
@@ -16,6 +16,7 @@ import { ExternalFilament, useGetExternalDBFilaments } from "../../utils/queryEx
 import { formatFilamentLabel } from "../spools/functions";
 import { FilamentImportModal } from "../../components/filamentImportModal";
 import { getOrCreateVendorFromExternal } from "../vendors/functions";
+import { MultiColorPicker } from "../../components/multiColorPicker";
 
 dayjs.extend(utc);
 
@@ -33,6 +34,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
   const currency = useCurrency();
   const [isImportExtOpen, setIsImportExtOpen] = React.useState(false);
   const invalidate = useInvalidate();
+  const [colorType, setColorType] = React.useState<"single" | "multi">("single");
 
   const { form, formProps, formLoading, onFinish, redirect } = useForm<
     IFilament,
@@ -160,20 +162,62 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
             }
           />
         </Form.Item>
-        <Form.Item
-          label={t("filament.fields.color_hex")}
-          name={["color_hex"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-          getValueFromEvent={(e) => {
-            return e?.toHex();
-          }}
-        >
-          <ColorPicker format="hex" />
+        <Form.Item label={t("filament.fields.color_hex")}>
+          <Radio.Group
+            onChange={(value) => {
+              setColorType(value.target.value);
+            }}
+            defaultValue={colorType}
+            value={colorType}
+          >
+            <Radio.Button value={"single"}>{t("filament.fields.single_color")}</Radio.Button>
+            <Radio.Button value={"multi"}>{t("filament.fields.multi_color")}</Radio.Button>
+          </Radio.Group>
         </Form.Item>
+        {colorType == "single" && (
+          <Form.Item
+            name={"color_hex"}
+            rules={[
+              {
+                required: false,
+              },
+            ]}
+            getValueFromEvent={(e) => {
+              return e?.toHex();
+            }}
+          >
+            <ColorPicker format="hex" />
+          </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_direction"}
+            help={t("filament.fields_help.multi_color_direction")}
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+            initialValue={"coaxial"}
+          >
+            <Radio.Group>
+              <Radio.Button value={"coaxial"}>{t("filament.fields.coaxial")}</Radio.Button>
+              <Radio.Button value={"longitudinal"}>{t("filament.fields.longitudinal")}</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_hexes"}
+            rules={[
+              {
+                required: false,
+              },
+            ]}
+          >
+            <MultiColorPicker min={2} max={14} />
+          </Form.Item>
+        )}
         <Form.Item
           label={t("filament.fields.material")}
           help={t("filament.fields_help.material")}

From f3d23ad9feee8abce2bbf43b9ab4fb5d3422231d Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 28 May 2024 20:21:36 +0200
Subject: [PATCH 2/5] Added client edit support for multi colors

---
 client/src/pages/filaments/edit.tsx | 82 ++++++++++++++++++++++++-----
 1 file changed, 68 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/filaments/edit.tsx b/client/src/pages/filaments/edit.tsx
index aa36fc292..18b42a48b 100644
--- a/client/src/pages/filaments/edit.tsx
+++ b/client/src/pages/filaments/edit.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert, Typography } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert, Typography, Radio } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
@@ -11,6 +11,7 @@ import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
 import { ParsedExtras } from "../../components/extraFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
+import { MultiColorPicker } from "../../components/multiColorPicker";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -25,6 +26,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
+  const [colorType, setColorType] = React.useState<"single" | "multi">("single");
 
   const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilament, IFilament>({
     liveMode: "manual",
@@ -49,6 +51,16 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
     formProps.initialValues = ParsedExtras(formProps.initialValues);
   }
 
+  // Update colorType state
+  React.useEffect(() => {
+    console.log(formProps.initialValues?.multi_color_hexes);
+    if (formProps.initialValues?.multi_color_hexes) {
+      setColorType("multi");
+    } else {
+      setColorType("single");
+    }
+  }, [formProps.initialValues?.multi_color_hexes]);
+
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
   formProps.onFinish = (allValues: IFilamentParsedExtras) => {
@@ -132,20 +144,62 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
             }
           />
         </Form.Item>
-        <Form.Item
-          label={t("filament.fields.color_hex")}
-          name={["color_hex"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-          getValueFromEvent={(e) => {
-            return e?.toHex();
-          }}
-        >
-          <ColorPicker format="hex" />
+        <Form.Item label={t("filament.fields.color_hex")}>
+          <Radio.Group
+            onChange={(value) => {
+              setColorType(value.target.value);
+            }}
+            defaultValue={colorType}
+            value={colorType}
+          >
+            <Radio.Button value={"single"}>{t("filament.fields.single_color")}</Radio.Button>
+            <Radio.Button value={"multi"}>{t("filament.fields.multi_color")}</Radio.Button>
+          </Radio.Group>
         </Form.Item>
+        {colorType == "single" && (
+          <Form.Item
+            name={"color_hex"}
+            rules={[
+              {
+                required: false,
+              },
+            ]}
+            getValueFromEvent={(e) => {
+              return e?.toHex();
+            }}
+          >
+            <ColorPicker format="hex" />
+          </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_direction"}
+            help={t("filament.fields_help.multi_color_direction")}
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+            initialValue={"coaxial"}
+          >
+            <Radio.Group>
+              <Radio.Button value={"coaxial"}>{t("filament.fields.coaxial")}</Radio.Button>
+              <Radio.Button value={"longitudinal"}>{t("filament.fields.longitudinal")}</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_hexes"}
+            rules={[
+              {
+                required: false,
+              },
+            ]}
+          >
+            <MultiColorPicker min={2} max={14} />
+          </Form.Item>
+        )}
         <Form.Item
           label={t("filament.fields.material")}
           help={t("filament.fields_help.material")}

From 30098e02134f05d1b73f638d9a18ce390d0a449c Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sat, 8 Jun 2024 22:48:14 +0200
Subject: [PATCH 3/5] Abstracted spoolicon into its own component

---
 client/src/components/column.tsx    | 12 ++----------
 client/src/components/spoolIcon.tsx | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/spoolIcon.tsx

diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
index 7824df660..c53a4e8cf 100644
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -7,13 +7,12 @@ import { NumberFieldUnit, NumberFieldUnitRange } from "./numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { DateField, TextField } from "@refinedev/antd";
-import Icon from "@ant-design/icons";
-import SpoolIcon from "../icon_spool.svg?react";
 import { useTranslate } from "@refinedev/core";
 import { enrichText } from "../utils/parsing";
 import { UseQueryResult } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 import { Field, FieldType } from "../utils/queryFields";
+import SpoolIcon from "./spoolIcon";
 
 dayjs.extend(utc);
 
@@ -348,14 +347,7 @@ export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<
         <Row wrap={false} justify="space-around" align="middle">
           {colorStr && (
             <Col flex="none">
-              <Icon
-                component={SpoolIcon}
-                style={{
-                  color: "#" + colorStr,
-                  fontSize: 42,
-                  marginRight: 0,
-                }}
-              />
+              <SpoolIcon color={colorStr} />
             </Col>
           )}
           <Col flex="auto">{value}</Col>
diff --git a/client/src/components/spoolIcon.tsx b/client/src/components/spoolIcon.tsx
new file mode 100644
index 000000000..26bc28664
--- /dev/null
+++ b/client/src/components/spoolIcon.tsx
@@ -0,0 +1,15 @@
+import Icon from "@ant-design/icons";
+import SpoolSVG from "../icon_spool.svg?react";
+
+export default function SpoolIcon(props: { color: string }) {
+  return (
+    <Icon
+      component={SpoolSVG}
+      style={{
+        color: "#" + props.color,
+        fontSize: 42,
+        marginRight: 0,
+      }}
+    />
+  );
+}

From e2df888e96611df3c5f600f5fc3472fcb802e85a Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 9 Jun 2024 19:23:43 +0200
Subject: [PATCH 4/5] New spool color indication that supports multi colors

---
 client/src/components/column.tsx     |  2 +-
 client/src/components/spoolIcon.css  | 23 +++++++++++++++++++++++
 client/src/components/spoolIcon.tsx  | 25 ++++++++++++++-----------
 client/src/pages/filaments/list.tsx  |  3 ++-
 client/src/pages/filaments/model.tsx |  2 ++
 client/src/pages/spools/list.tsx     |  5 ++++-
 6 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/spoolIcon.css

diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
index c53a4e8cf..8f9e43773 100644
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -295,7 +295,7 @@ export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Ac
 }
 
 interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
-  color: (record: Obj) => string | undefined;
+  color: (record: Obj) => string | string[] | undefined;
 }
 
 export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
new file mode 100644
index 000000000..7dc205ace
--- /dev/null
+++ b/client/src/components/spoolIcon.css
@@ -0,0 +1,23 @@
+.spool-icon {
+  display: flex;
+  flex-direction: column;
+  width: 1.5em;
+  height: 2.5em;
+  gap: 2px;
+  margin: 0 0.5em;
+}
+
+.spool-icon * {
+  flex: 1 1 0px;
+  border-radius: 2px;
+}
+
+.spool-icon *:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.spool-icon *:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
diff --git a/client/src/components/spoolIcon.tsx b/client/src/components/spoolIcon.tsx
index 26bc28664..f9a532410 100644
--- a/client/src/components/spoolIcon.tsx
+++ b/client/src/components/spoolIcon.tsx
@@ -1,15 +1,18 @@
-import Icon from "@ant-design/icons";
-import SpoolSVG from "../icon_spool.svg?react";
+import "./spoolIcon.css";
+
+export default function SpoolIcon(props: { color: string | string[] }) {
+  const cols = Array.isArray(props.color) ? props.color : [props.color];
 
-export default function SpoolIcon(props: { color: string }) {
   return (
-    <Icon
-      component={SpoolSVG}
-      style={{
-        color: "#" + props.color,
-        fontSize: 42,
-        marginRight: 0,
-      }}
-    />
+    <div className="spool-icon">
+      {cols.map((col) => (
+        <div
+          key={col}
+          style={{
+            backgroundColor: "#" + col.replace("#", ""),
+          }}
+        ></div>
+      ))}
+    </div>
   );
 }
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 7379c3a35..cd944a534 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -240,7 +240,8 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "name",
             i18ncat: "filament",
-            color: (record: IFilamentCollapsed) => record.color_hex,
+            color: (record: IFilamentCollapsed) =>
+              record.multi_color_hexes ? record.multi_color_hexes.split(",") : record.color_hex,
             filterValueQuery: useSpoolmanFilamentNames(),
           }),
           FilteredQueryColumn({
diff --git a/client/src/pages/filaments/model.tsx b/client/src/pages/filaments/model.tsx
index 2ebb72835..b21c709ea 100644
--- a/client/src/pages/filaments/model.tsx
+++ b/client/src/pages/filaments/model.tsx
@@ -16,6 +16,8 @@ export interface IFilament {
   settings_extruder_temp?: number;
   settings_bed_temp?: number;
   color_hex?: string;
+  multi_color_hexes?: string;
+  multi_color_direction?: string;
   external_id?: string;
   extra: { [key: string]: string };
 }
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index c9ef50023..35a857076 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -342,7 +342,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "filament.combined_name",
             i18nkey: "spool.fields.filament_name",
-            color: (record: ISpoolCollapsed) => record.filament.color_hex,
+            color: (record: ISpoolCollapsed) =>
+              record.filament.multi_color_hexes
+                ? record.filament.multi_color_hexes.split(",")
+                : record.filament.color_hex,
             dataId: "filament.combined_name",
             filterValueQuery: useSpoolmanFilamentFilter(),
           }),

From f1b27b441df4fa672fae98969f32d9d6c7637b65 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 11 Jun 2024 17:09:54 +0200
Subject: [PATCH 5/5] New spool icon updates

---
 client/src/components/column.tsx           |  8 ++++----
 client/src/components/multiColorPicker.tsx |  2 +-
 client/src/components/spoolIcon.css        | 24 +++++++++++++++++++---
 client/src/components/spoolIcon.tsx        | 20 +++++++++++++++---
 client/src/icon_spool.svg                  |  1 -
 client/src/pages/filaments/list.tsx        |  7 ++++++-
 client/src/pages/filaments/show.tsx        | 10 ++++++++-
 client/src/pages/spools/list.tsx           |  5 ++++-
 client/src/pages/spools/show.tsx           | 10 ++++++++-
 9 files changed, 71 insertions(+), 16 deletions(-)
 delete mode 100644 client/src/icon_spool.svg

diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
index 8f9e43773..b671018de 100644
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -295,7 +295,7 @@ export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Ac
 }
 
 interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
-  color: (record: Obj) => string | string[] | undefined;
+  color: (record: Obj) => string | { colors: string[]; vertical: boolean } | undefined;
 }
 
 export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
@@ -342,12 +342,12 @@ export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<
     },
     render: (rawValue, record: Obj) => {
       const value = props.transform ? props.transform(rawValue) : rawValue;
-      const colorStr = props.color(record);
+      const colorObj = props.color(record);
       return (
         <Row wrap={false} justify="space-around" align="middle">
-          {colorStr && (
+          {colorObj && (
             <Col flex="none">
-              <SpoolIcon color={colorStr} />
+              <SpoolIcon color={colorObj} />
             </Col>
           )}
           <Col flex="auto">{value}</Col>
diff --git a/client/src/components/multiColorPicker.tsx b/client/src/components/multiColorPicker.tsx
index 64581b80c..3ac6a1e03 100644
--- a/client/src/components/multiColorPicker.tsx
+++ b/client/src/components/multiColorPicker.tsx
@@ -67,7 +67,7 @@ export function MultiColorPicker(props: {
 
   return (
     <>
-      <Space direction="horizontal" size="middle">
+      <Space direction="horizontal" size="middle" style={{ marginTop: "1em" }}>
         {pickers}
         {values.length < (props.max ?? Infinity) && (
           <Button
diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
index 7dc205ace..d0b0f6d41 100644
--- a/client/src/components/spoolIcon.css
+++ b/client/src/components/spoolIcon.css
@@ -1,23 +1,41 @@
 .spool-icon {
   display: flex;
-  flex-direction: column;
   width: 1.5em;
   height: 2.5em;
   gap: 2px;
   margin: 0 0.5em;
 }
 
+.spool-icon.vertical {
+  flex-direction: column;
+}
+
+.spool-icon.large {
+  width: 4em;
+  height: 4em;
+}
+
 .spool-icon * {
   flex: 1 1 0px;
   border-radius: 2px;
 }
 
-.spool-icon *:first-child {
+.spool-icon.vertical *:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
-.spool-icon *:last-child {
+.spool-icon.vertical *:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.spool-icon.horizontal *:first-child {
+  border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
+}
+
+.spool-icon.horizontal *:last-child {
+  border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 }
diff --git a/client/src/components/spoolIcon.tsx b/client/src/components/spoolIcon.tsx
index f9a532410..355f7923b 100644
--- a/client/src/components/spoolIcon.tsx
+++ b/client/src/components/spoolIcon.tsx
@@ -1,10 +1,24 @@
 import "./spoolIcon.css";
 
-export default function SpoolIcon(props: { color: string | string[] }) {
-  const cols = Array.isArray(props.color) ? props.color : [props.color];
+interface Props {
+  color: string | { colors: string[]; vertical: boolean };
+  size?: "small" | "large";
+}
+
+export default function SpoolIcon(props: Props) {
+  let dirClass = "vertical";
+  let cols = [];
+  let size = props.size ? props.size : "small";
+
+  if (typeof props.color === "string") {
+    cols = [props.color];
+  } else {
+    dirClass = props.color.vertical ? "vertical" : "horizontal";
+    cols = props.color.colors;
+  }
 
   return (
-    <div className="spool-icon">
+    <div className={"spool-icon " + dirClass + " " + size}>
       {cols.map((col) => (
         <div
           key={col}
diff --git a/client/src/icon_spool.svg b/client/src/icon_spool.svg
deleted file mode 100644
index 784b290db..000000000
--- a/client/src/icon_spool.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 235 500" xml:space="preserve"><desc>Created with Fabric.js 5.3.0</desc><g id="z-gD78pOtWjQii31Q-6Ze"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="qCAOML5j7kpAVIP3Df73i"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="DwEIaQUSPW4DgKfkdPWoC"><path style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227) translate(-0.000005, 0)" vector-effect="non-scaling-stroke"/></g><g id="OvgM38-6CZm9R47a1TDIX" transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)"><filter id="SVGID_90" width="181.094%" height="149.483%" x="-40.547%" y="-24.742%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="30" dy="0" result="oBlur"/><feFlood flood-color="#000" flood-opacity=".8"/><feComposite in2="oBlur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1;filter:url(#SVGID_90)" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="woBV3Wt7ijQ6puNeMgAQD"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#111;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227) translate(0, 0)" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index cd944a534..c90850a3a 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -241,7 +241,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             id: "name",
             i18ncat: "filament",
             color: (record: IFilamentCollapsed) =>
-              record.multi_color_hexes ? record.multi_color_hexes.split(",") : record.color_hex,
+              record.multi_color_hexes
+                ? {
+                    colors: record.multi_color_hexes.split(","),
+                    vertical: record.multi_color_direction === "longitudinal",
+                  }
+                : record.color_hex,
             filterValueQuery: useSpoolmanFilamentNames(),
           }),
           FilteredQueryColumn({
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index 264009421..b82314bdf 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { useCurrency } from "../../utils/settings";
+import SpoolIcon from "../../components/spoolIcon";
 dayjs.extend(utc);
 
 const { Title } = Typography;
@@ -49,6 +50,13 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
     navigate(URL);
   };
 
+  const colorObj = record?.multi_color_hexes
+    ? {
+        colors: record.multi_color_hexes.split(","),
+        vertical: record.multi_color_direction === "longitudinal",
+      }
+    : record?.color_hex;
+
   return (
     <Show
       isLoading={isLoading}
@@ -80,7 +88,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>{t("filament.fields.name")}</Title>
       <TextField value={record?.name} />
       <Title level={5}>{t("filament.fields.color_hex")}</Title>
-      <TextField value={record?.color_hex} />
+      {colorObj && <SpoolIcon color={colorObj} size="large" />}
       <Title level={5}>{t("filament.fields.material")}</Title>
       <TextField value={record?.material} />
       <Title level={5}>{t("filament.fields.price")}</Title>
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 35a857076..20463689e 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -344,7 +344,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             i18nkey: "spool.fields.filament_name",
             color: (record: ISpoolCollapsed) =>
               record.filament.multi_color_hexes
-                ? record.filament.multi_color_hexes.split(",")
+                ? {
+                    colors: record.filament.multi_color_hexes.split(","),
+                    vertical: record.filament.multi_color_direction === "longitudinal",
+                  }
                 : record.filament.color_hex,
             dataId: "filament.combined_name",
             filterValueQuery: useSpoolmanFilamentFilter(),
diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index 6cc2a8aa8..714ee0943 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -11,6 +11,7 @@ import { IFilament } from "../filaments/model";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { useCurrency } from "../../utils/settings";
+import SpoolIcon from "../../components/spoolIcon";
 
 dayjs.extend(utc);
 
@@ -66,12 +67,19 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
     });
   };
 
+  const colorObj = record?.filament.multi_color_hexes
+    ? {
+        colors: record.filament.multi_color_hexes.split(","),
+        vertical: record.filament.multi_color_direction === "longitudinal",
+      }
+    : record?.filament.color_hex;
+
   return (
     <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
       <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>
-      <TextField value={record ? filamentURL(record?.filament) : ""} />
+      {colorObj && <SpoolIcon color={colorObj} />} <TextField value={record ? filamentURL(record?.filament) : ""} />
       <Title level={5}>{t("spool.fields.price")}</Title>
       <NumberField
         value={record ? spoolPrice(record) : ""}