diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 38bc2322eb..b332d1d8c7 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -7,7 +7,8 @@
 		DraftService,
 		type PathScript,
 		ScriptService,
-		Script
+		Script,
+		type HubScriptKind
 	} from '$lib/gen'
 	import { initHistory, push, redo, undo } from '$lib/history'
 	import {
@@ -413,7 +414,7 @@
 			$copilotModulesStore[idx].hubCompletions = scripts as {
 				path: string
 				summary: string
-				kind: string
+				kind: HubScriptKind
 				app: string
 				ask_id: number
 			}[]
diff --git a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte b/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
index 8c56b05c95..a4330c752b 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
@@ -129,7 +129,7 @@
 								</div>
 								{#if copilotModule.source === 'hub' && copilotModule.selectedCompletion && copilotModule.selectedCompletion?.kind !== 'script'}
 									<Badge color="gray" baseClass="border"
-										>{capitalize(copilotModule.selectedCompletion.kind)}</Badge
+										>{capitalize(copilotModule.selectedCompletion.kind.toString())}</Badge
 									>
 								{/if}
 
@@ -254,7 +254,9 @@
 													</div>
 												</div>
 												{#if item.kind !== 'script'}
-													<Badge color="gray" baseClass="border">{capitalize(item.kind)}</Badge>
+													<Badge color="gray" baseClass="border"
+														>{capitalize(item.kind.toString())}</Badge
+													>
 												{/if}
 											</button>
 										</li>
diff --git a/frontend/src/lib/components/copilot/flow.ts b/frontend/src/lib/components/copilot/flow.ts
index 4d1ef9a36a..6b5067a53d 100644
--- a/frontend/src/lib/components/copilot/flow.ts
+++ b/frontend/src/lib/components/copilot/flow.ts
@@ -1,4 +1,4 @@
-import type { Script, FlowModule } from '$lib/gen'
+import type { Script, FlowModule, HubScriptKind } from '$lib/gen'
 import { addResourceTypes, deltaCodeCompletion, getNonStreamingCompletion } from './lib'
 import type { Writable } from 'svelte/store'
 import type Editor from '../Editor.svelte'
@@ -15,7 +15,7 @@ export type FlowCopilotModule = {
 	hubCompletions: {
 		path: string
 		summary: string
-		kind: string
+		kind: HubScriptKind,
 		app: string
 		ask_id: number
 	}[]
@@ -23,7 +23,7 @@ export type FlowCopilotModule = {
 		| {
 				path: string
 				summary: string
-				kind: string
+				kind: HubScriptKind
 				app: string
 				ask_id: number
 		  }
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index 7d2177d723..7bf3694065 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -5,10 +5,10 @@
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import { APP_TO_ICON_COMPONENT } from '$lib/components/icons'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
-	import { IntegrationService, ScriptService } from '$lib/gen'
+	import { IntegrationService, ScriptService, type HubScriptKind } from '$lib/gen'
 	import { Loader2 } from 'lucide-svelte'
 
-	export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script'
+	export let kind: HubScriptKind & string = 'script'
 	export let filter = ''
 	export let syncQuery = false
 
@@ -25,7 +25,7 @@
 		version_id: number
 		ask_id: number
 		app: string
-		kind: typeof kind
+		kind: HubScriptKind
 	}[] = []
 
 	let allApps: string[] = []
@@ -89,7 +89,7 @@
 					id: number
 					ask_id: number
 					app: string
-					kind: typeof kind
+					kind: HubScriptKind
 				}) => ({
 					...x,
 					path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts b/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts
deleted file mode 100644
index b001540c44..0000000000
--- a/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import type { EdgeType, NodeType, ResizeNodeType, StoreType } from '../../store/types/types'
-import type { CollapsibleType } from '../types/types'
-import { get } from 'svelte/store'
-import type { AnchorType } from '../../edges/types/types'
-import { getAnchorById } from '../../edges/controllers/util'
-import { getAnchors } from '../../edges/controllers/util'
-
-
-
-
-// Given a nodeId, find ids of all connecting target nodes
-function findTargets(store: StoreType, nodeId: string): string[] {
-	// get source anchors on the node
-	const anchors = getAnchors(store, {
-		nodeId: nodeId,
-		sourceOrTarget: 'source'
-	})
-
-	// get target anchors on other node, and record the node id
-	const targetNodeIds: string[] = []
-	for (const anchor of anchors) {
-		const targetAnchorId = anchor.getOtherAnchorId()
-		const targetAnchor = getAnchorById(store, targetAnchorId)
-		targetNodeIds.push(targetAnchor.nodeId)
-	}
-	return targetNodeIds
-}
-
-// traverses tree and increments hideCount
-function traverseAndIncrement(
-	store: StoreType,
-	nodeId: string,
-	operation: 'increment' | 'decrement'
-) {
-	const collapsibles = get(store.collapsibleStore)
-	recursiveTraverse(nodeId)
-	store.collapsibleStore.set(collapsibles)
-
-	function recursiveTraverse(nId: string) {
-		for (const collapsible of collapsibles) {
-			if (collapsible.nodeId === nId) {
-				if (operation === 'increment') collapsible.hideCount++
-				else collapsible.hideCount--
-				const targetIds = findTargets(store, nId)
-				for (const targetId of targetIds) {
-					recursiveTraverse(targetId)
-				}
-			}
-		}
-	}
-}
-
-function collapse(store: StoreType, nodeId: string) {
-	const targetNodeIds = findTargets(store, nodeId)
-	for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'increment')
-}
-function expand(store: StoreType, nodeId: string) {
-	const targetNodeIds = findTargets(store, nodeId)
-	for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'decrement')
-}
-
-export function toggleExpandAndCollapse(store: StoreType, nodeId: string) {
-	const collapsibles = getCollapsibles(store, { nodeId: nodeId })
-	if (collapsibles.length === 0) return // when the collapsible feature is disabled, there will be no collapbsible objects
-	if (collapsibles.length > 1) throw 'there should only be one collapsible object per node'
-	const collapsible = collapsibles[0]
-	if (collapsible.state === 'expanded') collapse(store, nodeId)
-	else expand(store, nodeId)
-	store.collapsibleStore.update((arr) => {
-		for (const c of arr) if (c.id === collapsible.id) c.toggleState()
-		return [...arr]
-	})
-}
-
-export function getCollapsibles(store: StoreType, filter?: { [key: string]: any }) {
-	let collapsibles = Object.values(get(store.collapsibleStore))
-	// filter the array of anchors for elements that match filter
-	// Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
-	//return all anchors with sourceOrTarget = source AND poxitionX = 35
-	if (filter !== undefined) {
-		collapsibles = collapsibles.filter((collapsible) => {
-			for (let filterKey in filter) {
-				const filterValue = filter[filterKey]
-				if (collapsible[filterKey as keyof CollapsibleType] !== filterValue) return false
-			}
-			return true
-		})
-	}
-	// return list of anchors
-	return collapsibles
-}
-
-/*
-  This function is responsible for filtering nodes should be displayed based on Collapsible.
-  It also filters node-associated elements such as anchors, edges, etc. so that when you collapse a node, the 
-  edges also hide.
-  There is a better way to implement this with foreign keys; when collapsing a node, you would also collapse any rows with a foreign key 
-  linking to that node (like a cascading delete in SQL, but with hiding instead of deleting)
-*/
-export function filterByCollapsible(
-	store: StoreType,
-	nodes: NodeType[],
-	resizeNodes: ResizeNodeType[],
-	anchors: AnchorType[],
-	edges: EdgeType[]
-) {
-	// filter nodes for the collapsible nodes feature
-	const filteredNodes = nodes.filter((node) => {
-		const nodeId = node.id
-		const collapssibleObj = get(store.collapsibleStore).find((e) => e.nodeId === nodeId)
-		if (collapssibleObj === undefined) return true
-		return collapssibleObj.isHidden() === false
-	})
-	const filteredNodeIds = filteredNodes.map((e) => e.id)
-	// filter resizeNodes
-	const filteredResizeNodes = resizeNodes.filter((resizeNode) =>
-		filteredNodeIds.includes(resizeNode.nodeId)
-	)
-	const filteredAnchors = anchors.filter((selfAnchor) => {
-		const otherAnchorId = selfAnchor.getOtherAnchorId()
-		const otherAnchor = get(store.anchorsStore)[otherAnchorId]
-
-		if (filteredNodeIds.includes(selfAnchor.nodeId) && filteredNodeIds.includes(otherAnchor.nodeId))
-			return true
-		return false
-	})
-	const filteredEdgeIds = new Set(filteredAnchors.map((e) => e.edgeId))
-	const filteredEdges = edges.filter((edge) => filteredEdgeIds.has(edge.id))
-
-	return {
-		filteredNodes,
-		filteredResizeNodes,
-		filteredAnchors,
-		filteredEdges
-	}
-}
diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts b/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts
deleted file mode 100644
index 6dbd74e159..0000000000
--- a/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * This model implements functionality for nodes to expand and collapse their children
- */
-
-import type { CollapsibleType } from '../types/types';
-
-/** Class that implements collapsible/expandable functionality for Node objects
- * @param {string} id Unique string that serves as a primary key
- * @param {string} nodeId Foreign key to a Node Object
- */
-export class Collapsible implements CollapsibleType {
-  constructor(
-    public id: string,
-    public nodeId: string,
-    public hideCount: number,
-    public state: 'expanded' | 'collapsed'
-  ) {}
-
-  isHidden() {
-    return this.hideCount > 0;
-  }
-
-  toggleState() {
-    this.state = this.state === 'expanded' ? 'collapsed' : 'expanded';
-  }
-}
diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts b/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts
deleted file mode 100644
index f9b76b0971..0000000000
--- a/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface CollapsibleType {
-  id: string;
-  nodeId: string;
-  hideCount: number;
-  state: 'expanded' | 'collapsed';
-  isHidden: Function;
-  toggleState: Function;
-}
diff --git a/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts b/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts
index 70385bffad..9f4a4b1b65 100644
--- a/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts
+++ b/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts
@@ -3,30 +3,16 @@ This file contains "middleware" functions that sanitize user input (UserNodeType
 maintain consistency between previous 
 
 */
-import { get } from 'svelte/store';
 import {
   bottomCb,
   leftCb,
   rightCb,
   topCb,
 } from '../../edges/controllers/anchorCbUser';
-import type { StoreType } from '../../store/types/types';
 import type { UserEdgeType, UserNodeType } from '../../types/types';
 
-/**
- * sanitizeCanvasOptions will sanitize the canvas level options so that incompatible features will not be run simulataneously
- * @param store The array of nodes that have a UserNodeType
- * @returns void. The store is modified directly
- */
-export function sanitizeCanvasOptions(store: StoreType) {
-  enforceCollapsibleCompatibility(store);
-}
 
-function enforceCollapsibleCompatibility(store: StoreType) {
-  if (get(store.collapsibleOption)) {
-    store.nodeCreate.set(false);
-  }
-}
+
 
 /**
  * sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string.
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
index b1258ad44d..44767c2abc 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
@@ -9,7 +9,7 @@
 	import Node from '../../nodes/views/Node.svelte'
 
 	import { determineD3Instance } from '../..//d3/controllers/d3'
-	import { findStore } from '../../store/controllers/storeApi'
+	import { findStore } from '../../store/models/store'
 
 	import { Expand, Minus, Plus } from 'lucide-svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
index b0e422724c..2c5b25965a 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
@@ -8,7 +8,7 @@
 	} from '../../store/controllers/storeApi'
 	import { afterUpdate, onMount, getContext } from 'svelte'
 	import GraphView from './GraphView.svelte'
-	import { sanitizeCanvasOptions, sanitizeUserNodesAndEdges } from '../controllers/middleware'
+	import { sanitizeUserNodesAndEdges } from '../controllers/middleware'
 	import { SVELVET_CONTEXT_KEY, type SvelvetSettingsContext } from '../models'
 
 	const settings = getContext<SvelvetSettingsContext | undefined>(SVELVET_CONTEXT_KEY)
@@ -24,7 +24,6 @@
 	export let snapTo: number = 30
 	export let nodeCreate: boolean = false
 	export let boundary = false
-	export let collapsible = false
 	export let locked: boolean = false // if true, node movement is disabled
 	export let editable: boolean = false
 	export let highlightEdges: boolean = true
@@ -58,13 +57,10 @@
 			store.options.set(optionsObj) //
 			store.nodeCreate.set(nodeCreate)
 			store.boundary.set(boundary)
-			store.collapsibleOption.set(collapsible)
 			store.lockedOption.set(locked)
 			store.editableOption.set(editable)
 			store.highlightEdgesOption.set(highlightEdges)
 
-			// make sure that all canvas options are compatible
-			sanitizeCanvasOptions(store)
 			// set node/edge related stores
 			populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges)
 			error = ''
@@ -92,13 +88,10 @@
 			store.options.set(optionsObj) //
 			store.nodeCreate.set(nodeCreate)
 			store.boundary.set(boundary)
-			store.collapsibleOption.set(collapsible)
 			store.lockedOption.set(locked)
 			store.editableOption.set(editable)
 			store.highlightEdgesOption.set(highlightEdges)
 
-			// make sure that all canvas options are compatible
-			sanitizeCanvasOptions(store)
 			// set node/edge related stores
 			populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges)
 			error = ''
diff --git a/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts b/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts
index 6504434c71..f6f6ca8339 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts
+++ b/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts
@@ -1,4 +1,4 @@
-import { findStore } from '../../store/controllers/storeApi'
+import { findStore } from '../../store/models/store'
 import type { UserEdgeType } from '../../types/types'
 import type { EdgeType } from '../../store/types/types'
 
diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte
index 3b16c9ff52..59b09bf80f 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte
+++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { findStore } from '../../../store/controllers/storeApi'
+	import { findStore } from '../../../store/models/store'
 	import { getEdgeById } from '../../../edges/controllers/util'
 	import EdgeText from '../Edges/EdgeText.svelte'
 	import { get } from 'svelte/store'
diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
index 9497789a58..9c82b1630e 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
+++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
@@ -3,7 +3,7 @@
 
 	const Position = { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' }
 
-	import { findStore } from '../../../store/controllers/storeApi'
+	import { findStore } from '../../../store/models/store'
 	import { getAnchorFromEdge } from '../../../edges/controllers/util'
 
 	function calculateControlOffset(distance, curvature) {
diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte
index f9bd3f6fb6..88ee91a754 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte
+++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte
@@ -1,176 +1,157 @@
 <script>
-  import BaseEdge from './BaseEdge.svelte';
-  import { getCenter } from './utils';
+	import BaseEdge from './BaseEdge.svelte'
+	import { getCenter } from './utils'
 
-  const Position = {};
-  Position['Left'] = 'left';
-  Position['Right'] = 'right';
-  Position['Top'] = 'top';
-  Position['Bottom'] = 'bottom';
-  // These are some helper methods for drawing the round corners
-  // The name indicates the direction of the path. "bottomLeftCorner" goes
-  // from bottom to the left and "leftBottomCorner" goes from left to the bottom.
-  // We have to consider the direction of the paths because of the animated lines.
-  const bottomLeftCorner = (x, y, size) =>
-    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
-  const leftBottomCorner = (x, y, size) =>
-    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
-  const bottomRightCorner = (x, y, size) =>
-    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
-  const rightBottomCorner = (x, y, size) =>
-    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
-  const leftTopCorner = (x, y, size) =>
-    `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
-  const topLeftCorner = (x, y, size) =>
-    `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
-  const topRightCorner = (x, y, size) =>
-    `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
-  const rightTopCorner = (x, y, size) =>
-    `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
-  // returns string to pass into edge 'path' svg d attribute (where to be drawn)
-  export function getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition = Position.Bottom,
-    targetX,
-    targetY,
-    targetPosition = Position.Top,
-    borderRadius = 5,
-    centerX,
-    centerY,
-  }) {
-    const [_centerX, _centerY, offsetX, offsetY] = getCenter({
-      sourceX,
-      sourceY,
-      targetX,
-      targetY,
-    });
-    const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
-    const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
-    const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
-    const leftAndRight = [Position.Left, Position.Right];
-    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
-    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
-    let firstCornerPath = null;
-    let secondCornerPath = null;
-    // for non-mixed edge top/bottom
-    if (sourceX <= targetX) {
-      firstCornerPath =
-        sourceY <= targetY
-          ? bottomLeftCorner(sourceX, cY, cornerSize)
-          : topLeftCorner(sourceX, cY, cornerSize);
-      secondCornerPath =
-        sourceY <= targetY
-          ? rightTopCorner(targetX, cY, cornerSize)
-          : rightBottomCorner(targetX, cY, cornerSize);
-    } else {
-      firstCornerPath =
-        sourceY < targetY
-          ? bottomRightCorner(sourceX, cY, cornerSize)
-          : topRightCorner(sourceX, cY, cornerSize);
-      secondCornerPath =
-        sourceY < targetY
-          ? leftTopCorner(targetX, cY, cornerSize)
-          : leftBottomCorner(targetX, cY, cornerSize);
-    }
-    // for non-mixed edge left/right
-    if (
-      leftAndRight.includes(sourcePosition) &&
-      leftAndRight.includes(targetPosition)
-    ) {
-      if (sourceX <= targetX) {
-        firstCornerPath =
-          sourceY <= targetY
-            ? rightTopCorner(cX, sourceY, cornerSize)
-            : rightBottomCorner(cX, sourceY, cornerSize);
-        secondCornerPath =
-          sourceY <= targetY
-            ? bottomLeftCorner(cX, targetY, cornerSize)
-            : topLeftCorner(cX, targetY, cornerSize);
-      } else if (
-        (sourcePosition === Position.Right &&
-          targetPosition === Position.Left) ||
-        (sourcePosition === Position.Left &&
-          targetPosition === Position.Right) ||
-        (sourcePosition === Position.Left && targetPosition === Position.Left)
-      ) {
-        // and sourceX > targetX
-        firstCornerPath =
-          sourceY <= targetY
-            ? leftTopCorner(cX, sourceY, cornerSize)
-            : leftBottomCorner(cX, sourceY, cornerSize);
-        secondCornerPath =
-          sourceY <= targetY
-            ? bottomRightCorner(cX, targetY, cornerSize)
-            : topRightCorner(cX, targetY, cornerSize);
-      }
-      // for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
-    } else if (
-      leftAndRight.includes(sourcePosition) &&
-      !leftAndRight.includes(targetPosition)
-    ) {
-      if (sourceX <= targetX) {
-        firstCornerPath =
-          sourceY <= targetY
-            ? rightTopCorner(targetX, sourceY, cornerSize)
-            : rightBottomCorner(targetX, sourceY, cornerSize);
-      } else {
-        firstCornerPath =
-          sourceY <= targetY
-            ? leftTopCorner(targetX, sourceY, cornerSize)
-            : leftBottomCorner(targetX, sourceY, cornerSize);
-      }
-      secondCornerPath = '';
-    } else if (
-      !leftAndRight.includes(sourcePosition) &&
-      leftAndRight.includes(targetPosition)
-    ) {
-      if (sourceX <= targetX) {
-        firstCornerPath =
-          sourceY <= targetY
-            ? bottomLeftCorner(sourceX, targetY, cornerSize)
-            : topLeftCorner(sourceX, targetY, cornerSize);
-      } else {
-        firstCornerPath =
-          sourceY <= targetY
-            ? bottomRightCorner(sourceX, targetY, cornerSize)
-            : topRightCorner(sourceX, targetY, cornerSize);
-      }
-      secondCornerPath = '';
-    }
-    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
-  }
-  export let edge;
-  export let borderRadius = 5;
-  export let canvasId;
+	const Position = {}
+	Position['Left'] = 'left'
+	Position['Right'] = 'right'
+	Position['Top'] = 'top'
+	Position['Bottom'] = 'bottom'
+	// These are some helper methods for drawing the round corners
+	// The name indicates the direction of the path. "bottomLeftCorner" goes
+	// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+	// We have to consider the direction of the paths because of the animated lines.
+	const bottomLeftCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`
+	const leftBottomCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`
+	const bottomRightCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`
+	const rightBottomCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`
+	const leftTopCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`
+	const topLeftCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`
+	const topRightCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`
+	const rightTopCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`
+	// returns string to pass into edge 'path' svg d attribute (where to be drawn)
+	export function getSmoothStepPath({
+		sourceX,
+		sourceY,
+		sourcePosition = Position.Bottom,
+		targetX,
+		targetY,
+		targetPosition = Position.Top,
+		borderRadius = 5,
+		centerX,
+		centerY
+	}) {
+		const [_centerX, _centerY, offsetX, offsetY] = getCenter({
+			sourceX,
+			sourceY,
+			targetX,
+			targetY
+		})
+		const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX))
+		const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY))
+		const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY)
+		const leftAndRight = [Position.Left, Position.Right]
+		const cX = typeof centerX !== 'undefined' ? centerX : _centerX
+		const cY = typeof centerY !== 'undefined' ? centerY : _centerY
+		let firstCornerPath = null
+		let secondCornerPath = null
+		// for non-mixed edge top/bottom
+		if (sourceX <= targetX) {
+			firstCornerPath =
+				sourceY <= targetY
+					? bottomLeftCorner(sourceX, cY, cornerSize)
+					: topLeftCorner(sourceX, cY, cornerSize)
+			secondCornerPath =
+				sourceY <= targetY
+					? rightTopCorner(targetX, cY, cornerSize)
+					: rightBottomCorner(targetX, cY, cornerSize)
+		} else {
+			firstCornerPath =
+				sourceY < targetY
+					? bottomRightCorner(sourceX, cY, cornerSize)
+					: topRightCorner(sourceX, cY, cornerSize)
+			secondCornerPath =
+				sourceY < targetY
+					? leftTopCorner(targetX, cY, cornerSize)
+					: leftBottomCorner(targetX, cY, cornerSize)
+		}
+		// for non-mixed edge left/right
+		if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+			if (sourceX <= targetX) {
+				firstCornerPath =
+					sourceY <= targetY
+						? rightTopCorner(cX, sourceY, cornerSize)
+						: rightBottomCorner(cX, sourceY, cornerSize)
+				secondCornerPath =
+					sourceY <= targetY
+						? bottomLeftCorner(cX, targetY, cornerSize)
+						: topLeftCorner(cX, targetY, cornerSize)
+			} else if (
+				(sourcePosition === Position.Right && targetPosition === Position.Left) ||
+				(sourcePosition === Position.Left && targetPosition === Position.Right) ||
+				(sourcePosition === Position.Left && targetPosition === Position.Left)
+			) {
+				// and sourceX > targetX
+				firstCornerPath =
+					sourceY <= targetY
+						? leftTopCorner(cX, sourceY, cornerSize)
+						: leftBottomCorner(cX, sourceY, cornerSize)
+				secondCornerPath =
+					sourceY <= targetY
+						? bottomRightCorner(cX, targetY, cornerSize)
+						: topRightCorner(cX, targetY, cornerSize)
+			}
+			// for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
+		} else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
+			if (sourceX <= targetX) {
+				firstCornerPath =
+					sourceY <= targetY
+						? rightTopCorner(targetX, sourceY, cornerSize)
+						: rightBottomCorner(targetX, sourceY, cornerSize)
+			} else {
+				firstCornerPath =
+					sourceY <= targetY
+						? leftTopCorner(targetX, sourceY, cornerSize)
+						: leftBottomCorner(targetX, sourceY, cornerSize)
+			}
+			secondCornerPath = ''
+		} else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+			if (sourceX <= targetX) {
+				firstCornerPath =
+					sourceY <= targetY
+						? bottomLeftCorner(sourceX, targetY, cornerSize)
+						: topLeftCorner(sourceX, targetY, cornerSize)
+			} else {
+				firstCornerPath =
+					sourceY <= targetY
+						? bottomRightCorner(sourceX, targetY, cornerSize)
+						: topRightCorner(sourceX, targetY, cornerSize)
+			}
+			secondCornerPath = ''
+		}
+		return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`
+	}
+	export let edge
+	export let borderRadius = 5
+	export let canvasId
 
-  import { findStore } from '../../../store/controllers/storeApi';
-  import { getAnchorFromEdge } from '../../../edges/controllers/util';
+	import { findStore } from '../../../store/models/store'
+	import { getAnchorFromEdge } from '../../../edges/controllers/util'
 
-  let params;
-  $: {
-    const store = findStore(canvasId);
-    const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
-    const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
-    const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
-    params = {
-      sourceX: edge.sourceX,
-      sourceY: edge.sourceY,
-      targetX: edge.targetX,
-      targetY: edge.targetY,
-      sourcePosition: mapAngle[sourceAnchor.angle],
-      targetPosition: mapAngle[targetAnchor.angle],
-      borderRadius: borderRadius,
-    };
-  }
-  $: [centerX, centerY] = getCenter(params);
-  $: path = getSmoothStepPath(params);
-  $: baseEdgeProps = {
-    ...edge,
-    path: path,
-    centerX: centerX,
-    centerY: centerY,
-  };
+	let params
+	$: {
+		const store = findStore(canvasId)
+		const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
+		const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
+		const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
+		params = {
+			sourceX: edge.sourceX,
+			sourceY: edge.sourceY,
+			targetX: edge.targetX,
+			targetY: edge.targetY,
+			sourcePosition: mapAngle[sourceAnchor.angle],
+			targetPosition: mapAngle[targetAnchor.angle],
+			borderRadius: borderRadius
+		}
+	}
+	$: [centerX, centerY] = getCenter(params)
+	$: path = getSmoothStepPath(params)
+	$: baseEdgeProps = {
+		...edge,
+		path: path,
+		centerX: centerX,
+		centerY: centerY
+	}
 </script>
 
 <BaseEdge {baseEdgeProps} {canvasId} />
diff --git a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
index 510e7b1def..f409fe9d26 100644
--- a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
+++ b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterUpdate } from 'svelte'
 
-	import { findStore } from '../../store/controllers/storeApi'
+	import { findStore } from '../../store/models/store'
 	import type { NodeType } from '../../store/types/types'
 
 	import { forceCssHeightAndWidth } from '../../customCss/controllers/getCss'
diff --git a/frontend/src/lib/components/graph/svelvet/store/controllers/storeApi.ts b/frontend/src/lib/components/graph/svelvet/store/controllers/storeApi.ts
index 07443e30a2..3cbb7ffe93 100644
--- a/frontend/src/lib/components/graph/svelvet/store/controllers/storeApi.ts
+++ b/frontend/src/lib/components/graph/svelvet/store/controllers/storeApi.ts
@@ -30,22 +30,13 @@ populateSvelvetStoreFromUserInput(canvasId, nodes, edges)
 - edges: same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
 - Returns: store
 */
-import { stores } from '../models/store'
+import { findStore, stores } from '../models/store'
 import { writable } from 'svelte/store'
 
 import type { StoreType } from '../types/types'
 import type { UserNodeType, UserEdgeType } from '../../types/types'
 import { populateAnchorsStore, populateNodesStore, populateEdgesStore } from './util'
 
-/**
- * findStore is going to return the target Svelvet store with the canvasId provided as argument.
- * There can be multiple Svelvet canvases on the same page, and each has their own store with a unique canvasId.
- * @param canvasId The canvasId of a Svelvet component
- * @returns The store of a Svelvet component that matches the canvasId
- */
-export function findStore(canvasId: string): StoreType {
-	return stores[canvasId]
-}
 
 /**
  * createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
@@ -79,8 +70,6 @@ export function createStoreEmpty(canvasId: string): StoreType {
 		nodeCreate: writable(false), // this option sets whether the "nodeEdit" feature is enabled
 		boundary: writable(false),
 		edgeEditModal: writable(null), // this is used for edgeEditModal feature. When an edge is right clicked, store.edgeEditModal is set to the edgeId string. This causes a modal to be rendered
-		collapsibleStore: writable([]), // this is used for the collaspsible node feature. If the feature is enabled, store.collapsible will be populated with Collapsible objects which will track whether the node should be displayed or not
-		collapsibleOption: writable(false),
 		lockedOption: writable(false),
 		editableOption: writable(false), // true if you want nodes/edges to be editable. See feature editEdges
 		d3ZoomParameters: writable({}), // this stores d3 parameters x, y, and zoom. This isn't used for anything other than giving users a way to access d3 zoom parameters if they want to build on top of Svelvet
diff --git a/frontend/src/lib/components/graph/svelvet/store/controllers/userApi.ts b/frontend/src/lib/components/graph/svelvet/store/controllers/userApi.ts
index 88922d33be..edeec17454 100644
--- a/frontend/src/lib/components/graph/svelvet/store/controllers/userApi.ts
+++ b/frontend/src/lib/components/graph/svelvet/store/controllers/userApi.ts
@@ -1,4 +1,4 @@
-import { findStore } from './storeApi';
+import { findStore } from '../models/store';
 import { get } from 'svelte/store';
 export function getD3PositionX(canvasId) {
   const store = findStore(canvasId);
diff --git a/frontend/src/lib/components/graph/svelvet/store/models/store.ts b/frontend/src/lib/components/graph/svelvet/store/models/store.ts
index 8d6ebae177..0765623a9a 100644
--- a/frontend/src/lib/components/graph/svelvet/store/models/store.ts
+++ b/frontend/src/lib/components/graph/svelvet/store/models/store.ts
@@ -1,5 +1,9 @@
 import type { StoreType } from '../types/types';
 
+
+export function findStore(canvasId: string): StoreType {
+	return stores[canvasId]
+}
 /**
   `store` is a dictionary of Svelvet stores.
     * The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
diff --git a/frontend/src/lib/components/graph/svelvet/store/types/types.ts b/frontend/src/lib/components/graph/svelvet/store/types/types.ts
index ee61465a49..8cd17b95a6 100644
--- a/frontend/src/lib/components/graph/svelvet/store/types/types.ts
+++ b/frontend/src/lib/components/graph/svelvet/store/types/types.ts
@@ -1,4 +1,3 @@
-import type { CollapsibleType } from '../../collapsible/types/types'
 import type { Writable } from 'svelte/store'
 import type { AnchorType } from '../../edges/types/types'
 
@@ -35,8 +34,6 @@ export interface StoreType {
 	nodeCreate: Writable<boolean> // this option sets whether the "nodeEdit" feature is enabled
 	boundary: Writable<boolean | PositionType>
 	edgeEditModal: Writable<null | string> // this options is used to place the edgeEdit modal when an edge is right-clicked. null is no modal, positionType if modal should be placed at position defined by postionType.x, positionType.y
-	collapsibleStore: Writable<CollapsibleType[]>
-	collapsibleOption: Writable<boolean>
 	lockedOption: Writable<boolean>
 	editableOption: Writable<boolean>
 	d3ZoomParameters: Writable<{
diff --git a/frontend/src/lib/components/graph/svelvet/types/types.ts b/frontend/src/lib/components/graph/svelvet/types/types.ts
index 1056e2fad2..b24b3672ed 100644
--- a/frontend/src/lib/components/graph/svelvet/types/types.ts
+++ b/frontend/src/lib/components/graph/svelvet/types/types.ts
@@ -40,7 +40,7 @@ export interface UserEdgeType {
 	offset?: number
 }
 
-import { findStore } from '../store/controllers/storeApi'
+import { findStore } from '../store/models/store'
 import { get } from 'svelte/store'
 export function getD3PositionX(canvasId: string) {
 	const store = findStore(canvasId)