From 10d771d78a5dcb36b056adc276a4f391598370b3 Mon Sep 17 00:00:00 2001
From: RemDelaporteMathurin <rdelaportemathurin@gmail.com>
Date: Fri, 25 Jul 2025 22:36:22 -0400
Subject: [PATCH] added vial

---
 src/App.jsx              |  2 ++
 src/VialNode.jsx         | 32 ++++++++++++++++++++++++++++++++
 src/vial-svgrepo-com.svg | 17 +++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/VialNode.jsx
 create mode 100644 src/vial-svgrepo-com.svg

diff --git a/src/App.jsx b/src/App.jsx
index a086966..d51a5d6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -26,6 +26,7 @@ import DefaultNode from './DefaultNode';
 import { makeEdge } from './CustomEdge';
 import MultiplierNode from './MultiplierNode';
 import { Splitter2Node, Splitter3Node } from './Splitters';
+import VialNode from './VialNode';
 
 // Add nodes as a node type for this script
 const nodeTypes = {
@@ -43,6 +44,7 @@ const nodeTypes = {
   pid: DefaultNode,
   splitter2: Splitter2Node,
   splitter3: Splitter3Node,
+  vial: VialNode,
 };
 
 // Defining initial nodes and edges. In the data section, we have label, but also parameters specific to the node.
diff --git a/src/VialNode.jsx b/src/VialNode.jsx
new file mode 100644
index 0000000..9a389de
--- /dev/null
+++ b/src/VialNode.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Handle } from '@xyflow/react';
+import vialIcon from './vial-svgrepo-com.svg';
+
+
+export default function VialNode({ data }) {
+  return (
+    <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    }}>
+        <img src={vialIcon} alt="Vial" width="100 px" style={{
+            // filter: 'hue-rotate(180deg)',  // Change color
+            // // or
+            filter: 'invert(1)',           // Invert colors
+        }}/>
+        <div style={{ 
+            fontSize: '12px',
+            textAlign: 'center',
+            marginBottom: '8px',
+            color: 'white',
+            fontWeight: 'bold',
+        }}>
+            {data.label}<br></br>Not implemented yet
+        </div>
+    
+        <Handle type="target" position="top" style={{ background: '#555' }} />
+        <Handle type="source" position="bottom" style={{ background: '#555' }} />
+    </div>
+  );
+}
diff --git a/src/vial-svgrepo-com.svg b/src/vial-svgrepo-com.svg
new file mode 100644
index 0000000..945de88
--- /dev/null
+++ b/src/vial-svgrepo-com.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<path d="M325.392,169.084v-45.249h10.223c11.151,0,20.19-9.04,20.19-20.19V20.19c0-11.151-9.04-20.19-20.19-20.19H176.384
+			c-11.151,0-20.19,9.04-20.19,20.19v83.454c0,11.151,9.04,20.19,20.19,20.19h10.223v45.249
+			c-22.323,6.567-38.666,27.244-38.666,51.665v237.41c0,29.688,24.153,53.841,53.841,53.841h108.436
+			c29.688,0,53.841-24.153,53.841-53.841v-237.41C364.058,196.328,347.714,175.653,325.392,169.084z M196.574,40.381h118.85v43.073
+			c-42.631,0,24.762,0-118.85,0V40.381z M323.677,458.158c0,7.423-6.038,13.462-13.46,13.462H201.781
+			c-7.422,0-13.46-6.038-13.46-13.46V323.051h135.357V458.158z M323.677,282.67H188.32v-61.921c0-7.422,6.038-13.46,13.46-13.46
+			h5.015c11.151,0,20.19-9.04,20.19-20.19v-63.263h58.025v63.263c0,11.151,9.04,20.19,20.19,20.19h5.015
+			c7.422,0,13.46,6.038,13.46,13.46V282.67z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file