diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 2393ea5c0ab..2e48b95579e 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -10,14 +10,16 @@
 
 <script>
 import { useCoordinatePosition } from "./composables/useCoordinatePosition";
-import { inject, reactive, ref } from "vue";
+import { inject, ref } from "vue";
+import Terminals from "components/Workflow/Editor/modules/terminals";
 
 export default {
     setup(props) {
         const el = ref(null);
         const position = useCoordinatePosition(el, props.rootOffset, props.parentOffset, props.stepPosition);
         const isDragging = inject("isDragging");
-        return { el, position, isDragging };
+        const draggingConnection = inject("draggingConnection");
+        return { el, position, isDragging, draggingConnection };
     },
     props: {
         input: {
@@ -72,12 +74,24 @@ export default {
         label() {
             return this.input.label || this.input.name;
         },
+        canAccept() {
+            // TODO: put producesAcceptableDatatype ... in datatypesMapper ?
+            return Terminals.producesAcceptableDatatype(
+                this.datatypesMapper,
+                this.input.extensions,
+                this.draggingConnection.datatypes
+            ).canAccept;
+        },
         terminalClass() {
             const classes = ["terminal", "input-terminal"];
             if (this.isDragging) {
                 // TODO: check input compatible
                 classes.push("input-terminal-active");
-                classes.push("can-accept");
+                if (this.canAccept) {
+                    classes.push("can-accept");
+                } else {
+                    classes.push("cannot-accept");
+                }
             }
             if (this.isMultiple) {
                 classes.push("multiple");
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 75adf3ff263..78872f20491 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -146,7 +146,8 @@ export default {
         },
         dragPosition() {
             if (this.isDragging) {
-                this.$emit("onDragConnector", this.dragPosition);
+                const dragConnection = { ...this.dragPosition, datatypes: this.extensions };
+                this.$emit("onDragConnector", dragConnection);
             }
         },
         label() {
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 49a24556b76..98a5af3829d 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -75,6 +75,7 @@ const transform = reactive({ x: 0, y: 0, k: 1 });
 
 const draggingConnection = ref(null);
 const isDragging = ref(false);
+provide("draggingConnection", draggingConnection);
 provide("isDragging", isDragging);
 provide("transform", transform);
 const scale = useScale();
diff --git a/client/src/components/Workflow/Editor/modules/terminals.js b/client/src/components/Workflow/Editor/modules/terminals.js
index 0d0a3401a14..fc46e19c84c 100644
--- a/client/src/components/Workflow/Editor/modules/terminals.js
+++ b/client/src/components/Workflow/Editor/modules/terminals.js
@@ -696,7 +696,43 @@ class OutputParameterTerminal extends Terminal {
     }
 }
 
+function producesAcceptableDatatype(datatypesMapper, inputDatatypes, otherDatatypes) {
+    for (const t in inputDatatypes) {
+        const thisDatatype = inputDatatypes[t];
+        if (thisDatatype == "input") {
+            return new ConnectionAcceptable(true, null);
+        }
+        // FIXME: No idea what to do about case when datatype is 'input'
+        const validMatch = otherDatatypes.some(
+            (otherDatatype) =>
+                otherDatatype == "input" ||
+                otherDatatype == "_sniff_" ||
+                datatypesMapper.isSubType(otherDatatype, thisDatatype)
+        );
+        if (validMatch) {
+            return new ConnectionAcceptable(true, null);
+        }
+    }
+    const datatypesSet = new Set(datatypesMapper.datatypes);
+    const invalidDatatypes = otherDatatypes.filter((datatype) => !datatypesSet.has(datatype));
+    if (invalidDatatypes.length) {
+        return new ConnectionAcceptable(
+            false,
+            `Effective output data type(s) [${invalidDatatypes.join(
+                ", "
+            )}] unknown. This tool cannot be run on this Galaxy Server at this moment, please contact the Administrator.`
+        );
+    }
+    return new ConnectionAcceptable(
+        false,
+        `Effective output data type(s) [${otherDatatypes.join(
+            ", "
+        )}] do not appear to match input type(s) [${inputDatatypes.join(", ")}].`
+    );
+}
+
 export default {
+    producesAcceptableDatatype: producesAcceptableDatatype,
     Terminal: Terminal,
     InputTerminal: InputTerminal,
     InputParameterTerminal: InputParameterTerminal,