diff --git a/src/components/DownloadDialog.tsx b/src/components/DownloadDialog.tsx
index 2420363..587d05d 100644
--- a/src/components/DownloadDialog.tsx
+++ b/src/components/DownloadDialog.tsx
@@ -1,48 +1,24 @@
-import React from 'react';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Radio,
-  RadioGroup,
-  FormControlLabel,
-  FormControl,
-  TextField,
-} from '@mui/material';
-import Papa from 'papaparse';
-
-const jsonToCsvString = (json: any[] | Papa.UnparseObject<unknown>) =>
-  Promise.resolve(Papa.unparse(json));
+import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Radio, RadioGroup, FormControlLabel, FormControl, TextField } from "@mui/material";
+import Papa from "papaparse";
+
+const jsonToCsvString = (json: any[] | Papa.UnparseObject<unknown>) => Promise.resolve(Papa.unparse(json));
 
 const constructPmidOrPmcLink = (id: string) => {
-  if (id.startsWith('PMID')) {
-    return `https://pubmed.ncbi.nlm.nih.gov/${id.split(':')[1]}`;
+  if (id.startsWith("PMID")) {
+    return `https://pubmed.ncbi.nlm.nih.gov/${id.split(":")[1]}`;
   }
-  if (id.startsWith('PMC')) {
-    return `https://pmc.ncbi.nlm.nih.gov/articles/${id.split(':')[1]}`;
+  if (id.startsWith("PMC")) {
+    return `https://pmc.ncbi.nlm.nih.gov/articles/${id.split(":")[1]}`;
   }
-  return '';
+  return "";
 };
 
-const getConcatPublicationsForResult = (
-  result: { analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[] },
-  message: { knowledge_graph: { edges: { [x: string]: any } } }
-) => {
+const getConcatPublicationsForResult = (result: { analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[] }, message: { knowledge_graph: { edges: { [x: string]: any } } }) => {
   const edgeIds = Object.values(result.analyses[0].edge_bindings)
     .flat()
     .map((e) => (e as { id: string }).id);
-  const publications = edgeIds
-    .flatMap((edgeId) =>
-      message.knowledge_graph.edges[edgeId].attributes
-        .filter(
-          (attr: { attribute_type_id: string }) => attr.attribute_type_id === 'biolink:publications'
-        )
-        .flatMap((attr: { value: any }) => attr.value)
-    )
-    .map(constructPmidOrPmcLink);
+  const publications = edgeIds.flatMap((edgeId) => message.knowledge_graph.edges[edgeId].attributes.filter((attr: { attribute_type_id: string }) => attr.attribute_type_id === "biolink:publications").flatMap((attr: { value: any }) => attr.value)).map(constructPmidOrPmcLink);
 
   return publications;
 };
@@ -54,84 +30,65 @@ const constructCsvObj = (message: {
     nodes: { [x: string]: any };
   };
 }) => {
-  const nodeLabelHeaders = Object.keys(message.results[0].node_bindings).flatMap((node_label) => [
-    `${node_label} (Name)`,
-    `${node_label} (CURIE)`,
-  ]);
+  const nodeLabelHeaders = Object.keys(message.results[0].node_bindings).flatMap((node_label) => [`${node_label} (Name)`, `${node_label} (CURIE)`]);
 
   let csvHeaderEdgeLabelsMerged = new Set();
-  message.results.forEach(
-    (result: {
-      node_bindings: ArrayLike<unknown> | { [s: string]: unknown };
-      analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[];
-    }) => {
-      const curieToNodeLabel: Record<string, string> = {};
-
-      Object.entries(result.node_bindings).forEach(([nodeLabel, nb]) => {
-        const curie = (nb as Array<{ id: string }>)[0].id;
-        curieToNodeLabel[curie] = nodeLabel;
+  message.results.forEach((result: { node_bindings: ArrayLike<unknown> | { [s: string]: unknown }; analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[] }) => {
+    const curieToNodeLabel: Record<string, string> = {};
+
+    Object.entries(result.node_bindings).forEach(([nodeLabel, nb]) => {
+      const curie = (nb as Array<{ id: string }>)[0].id;
+      curieToNodeLabel[curie] = nodeLabel;
+    });
+
+    Object.values(result.analyses[0].edge_bindings)
+      .flat()
+      .forEach((eb) => {
+        const { subject, object } = message.knowledge_graph.edges[(eb as { id: string }).id];
+        const subjectLabel = curieToNodeLabel[subject];
+        const objectLabel = curieToNodeLabel[object];
+        const csvHeaderEdgeLabel = `${subjectLabel} -> ${objectLabel}`;
+        if (subjectLabel && objectLabel) {
+          // TODO: These were occasionally returning undefined, figure out why
+          csvHeaderEdgeLabelsMerged.add(csvHeaderEdgeLabel);
+        }
       });
-
-      Object.values(result.analyses[0].edge_bindings)
-        .flat()
-        .forEach((eb) => {
-          const { subject, object } = message.knowledge_graph.edges[(eb as { id: string }).id];
-          const subjectLabel = curieToNodeLabel[subject];
-          const objectLabel = curieToNodeLabel[object];
-          const csvHeaderEdgeLabel = `${subjectLabel} -> ${objectLabel}`;
-          if (subjectLabel && objectLabel) {
-            // TODO: These were occasionally returning undefined, figure out why
-            csvHeaderEdgeLabelsMerged.add(csvHeaderEdgeLabel);
-          }
-        });
-    }
-  );
+  });
   const csvHeaderEdgeLabelsMergedArray = Array.from(csvHeaderEdgeLabelsMerged);
 
-  const header = [...nodeLabelHeaders, ...csvHeaderEdgeLabelsMergedArray, 'Score', 'Publications'];
-
-  const body = message.results.map(
-    (result: {
-      node_bindings: ArrayLike<unknown> | { [s: string]: unknown };
-      analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[];
-      score: any;
-    }) => {
-      const row = new Array(header.length).fill('');
-      const curieToNodeLabel: Record<string, string> = {};
-      Object.entries(result.node_bindings).forEach(([nodeLabel, nb], i) => {
-        const curie = (nb as Array<{ id: string }>)[0].id;
-        curieToNodeLabel[curie] = nodeLabel;
-        const node = message.knowledge_graph.nodes[curie];
-        row[i * 2] = node.name || node.categories[0];
-        row[i * 2 + 1] = curie;
+  const header = [...nodeLabelHeaders, ...csvHeaderEdgeLabelsMergedArray, "Score", "Publications"];
+
+  const body = message.results.map((result: { node_bindings: ArrayLike<unknown> | { [s: string]: unknown }; analyses: { edge_bindings: { [s: string]: unknown } | ArrayLike<unknown> }[]; score: any }) => {
+    const row = new Array(header.length).fill("");
+    const curieToNodeLabel: Record<string, string> = {};
+    Object.entries(result.node_bindings).forEach(([nodeLabel, nb], i) => {
+      const curie = (nb as Array<{ id: string }>)[0].id;
+      curieToNodeLabel[curie] = nodeLabel;
+      const node = message.knowledge_graph.nodes[curie];
+      row[i * 2] = node.name || node.categories[0];
+      row[i * 2 + 1] = curie;
+    });
+
+    Object.values(result.analyses[0].edge_bindings)
+      .flat()
+      .forEach((eb) => {
+        const { subject, object, predicate, sources } = message.knowledge_graph.edges[(eb as { id: string }).id];
+        const subjectLabel = curieToNodeLabel[subject];
+        const objectLabel = curieToNodeLabel[object];
+        if (subjectLabel && objectLabel) {
+          const csvHeaderEdgeLabel = `${curieToNodeLabel[subject]} -> ${curieToNodeLabel[object]}`;
+          const edgeHeaderIndex = header.findIndex((h) => h === csvHeaderEdgeLabel);
+          const primarySourceObj = sources.find((s: { resource_role: string }) => s.resource_role === "primary_knowledge_source");
+          const primarySource = (primarySourceObj && primarySourceObj.resource_id) || undefined;
+          row[edgeHeaderIndex] += `${row[edgeHeaderIndex].length > 0 ? "\n" : ""}${predicate}${primarySource ? ` (${primarySource})` : ""}`;
+        }
       });
 
-      Object.values(result.analyses[0].edge_bindings)
-        .flat()
-        .forEach((eb) => {
-          const { subject, object, predicate, sources } =
-            message.knowledge_graph.edges[(eb as { id: string }).id];
-          const subjectLabel = curieToNodeLabel[subject];
-          const objectLabel = curieToNodeLabel[object];
-          if (subjectLabel && objectLabel) {
-            const csvHeaderEdgeLabel = `${curieToNodeLabel[subject]} -> ${curieToNodeLabel[object]}`;
-            const edgeHeaderIndex = header.findIndex((h) => h === csvHeaderEdgeLabel);
-            const primarySourceObj = sources.find(
-              (s: { resource_role: string }) => s.resource_role === 'primary_knowledge_source'
-            );
-            const primarySource = (primarySourceObj && primarySourceObj.resource_id) || undefined;
-            row[edgeHeaderIndex] += `${row[edgeHeaderIndex].length > 0 ? '\n' : ''}${predicate}${
-              primarySource ? ` (${primarySource})` : ''
-            }`;
-          }
-        });
-
-      row[row.length - 2] = result.score;
-      row[row.length - 1] = getConcatPublicationsForResult(result, message).join('\n');
-
-      return row;
-    }
-  );
+    row[row.length - 2] = result.score;
+    row[row.length - 1] = getConcatPublicationsForResult(result, message).join("\n");
+
+    return row;
+  });
 
   return [header, ...body];
 };
@@ -140,17 +97,12 @@ type DownloadDialogProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
   message: any;
-  download_type?: 'answer' | 'all_queries' | 'query';
+  download_type?: "answer" | "all_queries" | "query";
 };
 
-export default function DownloadDialog({
-  open,
-  setOpen,
-  message,
-  download_type = 'answer',
-}: DownloadDialogProps) {
-  const [type, setType] = React.useState('json');
-  const [fileName, setFileName] = React.useState('ROBOKOP_message');
+export default function DownloadDialog({ open, setOpen, message, download_type = "answer" }: DownloadDialogProps) {
+  const [type, setType] = React.useState("json");
+  const [fileName, setFileName] = React.useState(`ROBOKOP_${download_type === "all_queries" ? "query" : "answer"}`);
 
   const handleClose = () => {
     setOpen(false);
@@ -158,12 +110,12 @@ export default function DownloadDialog({
 
   const handleClickDownload = async () => {
     let blob;
-    if (type === 'json') {
-      blob = new Blob([JSON.stringify({ message }, null, 2)], { type: 'application/json' });
+    if (type === "json") {
+      blob = new Blob([JSON.stringify({ message }, null, 2)], { type: "application/json" });
     }
-    if (type === 'csv') {
+    if (type === "csv") {
       const csvString = await jsonToCsvString(constructCsvObj(message));
-      blob = new Blob([csvString], { type: 'text/csv' });
+      blob = new Blob([csvString], { type: "text/csv" });
     }
 
     if (!blob) {
@@ -171,7 +123,7 @@ export default function DownloadDialog({
       handleClose();
       return;
     }
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.download = `${fileName}.${type}`;
     a.href = window.URL.createObjectURL(blob);
     document.body.appendChild(a);
@@ -182,15 +134,13 @@ export default function DownloadDialog({
 
   return (
     <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title">
-      <DialogTitle id="alert-dialog-title">Download Answer</DialogTitle>
-      <DialogContent style={{ width: 600, paddingTop: '1rem' }}>
+      <DialogTitle id="alert-dialog-title">Download {download_type === "all_queries" ? "Query" : "Answer"}</DialogTitle>
+      <DialogContent style={{ width: 600, paddingTop: "1rem" }}>
         <TextField
-          label={
-            ['answer', 'all_queries'].includes(download_type) ? 'File name' : 'Query Graph Name'
-          }
+          label={["answer", "all_queries"].includes(download_type) ? "File name" : "Query Graph Name"}
           // fullWidth
           variant="outlined"
-          style={{ marginBottom: '1rem', width: '90%' }}
+          style={{ marginBottom: "1rem", width: "90%" }}
           value={fileName}
           onChange={(e) => {
             setFileName(e.target.value);
@@ -199,7 +149,7 @@ export default function DownloadDialog({
 
         {
           // Show the radio group only when the download type is answers.
-          download_type === 'answer' && (
+          download_type === "answer" && (
             <FormControl component="fieldset">
               <RadioGroup
                 aria-label="gender"
@@ -216,19 +166,14 @@ export default function DownloadDialog({
           )
         }
 
-        {type === 'csv' && (
-          <DialogContentText style={{ fontSize: '1em' }}>
-            The CSV download contains a smaller subset of the answer information. To analyze the
-            complete properties of the answer graphs, consider using JSON.
-          </DialogContentText>
-        )}
+        {type === "csv" && <DialogContentText style={{ fontSize: "1em" }}>The CSV download contains a smaller subset of the answer information. To analyze the complete properties of the answer graphs, consider using JSON.</DialogContentText>}
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary">
           Cancel
         </Button>
         <Button onClick={handleClickDownload} color="primary" variant="contained">
-          {['answer', 'all_queries'].includes(download_type) ? 'Download' : 'Bookmark'}
+          {["answer", "all_queries"].includes(download_type) ? "Download" : "Bookmark"}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/pages/answer/leftDrawer/LeftDrawer.tsx b/src/pages/answer/leftDrawer/LeftDrawer.tsx
index 6b49707..96735b8 100644
--- a/src/pages/answer/leftDrawer/LeftDrawer.tsx
+++ b/src/pages/answer/leftDrawer/LeftDrawer.tsx
@@ -149,7 +149,7 @@ export default function LeftDrawer({ onUpload, displayState, updateDisplayState,
         </ListItemButton>
       </List>
       <DownloadDialog open={downloadOpen} setOpen={setDownloadOpen} message={message} />
-      <DownloadDialog open={downloadQueryOpen} setOpen={setDownloadQueryOpen} message={queryBuilder.query_graph} download_type="all_queries" />
+      <DownloadDialog open={downloadQueryOpen} setOpen={setDownloadQueryOpen} message={queryBuilder.state.message.message} download_type="all_queries" />
       {summarizeWithAIOpen && <SummarizeWithAIModal isOpen={summarizeWithAIOpen} onModalClose={() => setSummarizeWithAIOpen(false)} answerStore={answerStore} />}
       {summarizeTableWithAIOpen && <SummarizeTableWithAIModal isOpen={summarizeTableWithAIOpen} onModalClose={() => setSummarizeTableWithAIOpen(false)} answerStore={answerStore} />}
     </Drawer>
diff --git a/src/pages/entryPoint/ExampleModal.tsx b/src/pages/entryPoint/ExampleModal.tsx
index 3f4faed..609876d 100644
--- a/src/pages/entryPoint/ExampleModal.tsx
+++ b/src/pages/entryPoint/ExampleModal.tsx
@@ -1,16 +1,13 @@
-import { Modal } from '@mui/material';
-import React from 'react';
-import { QueryTemplate, TemplatesArray } from '../queryBuilder/templatedQueries/types';
+import { Modal } from "@mui/material";
+import React from "react";
+import { QueryTemplate, TemplatesArray } from "../queryBuilder/templatedQueries/types";
 // import examples from '../queryBuilder/templatedQueries/templates.json';
-import { parse } from 'yaml';
+import { parse } from "yaml";
 
-import './EntryPoint.css';
-import {
-  TemplateNodePart,
-  TemplatePart,
-} from '../queryBuilder/templatedQueries/TemplateQueriesModal';
-import { useQueryBuilderContext } from '../../context/queryBuilder';
-import { useNavigate } from '@tanstack/react-router';
+import "./EntryPoint.css";
+import { TemplateNodePart, TemplatePart } from "../queryBuilder/templatedQueries/TemplateQueriesModal";
+import { useQueryBuilderContext } from "../../context/queryBuilder";
+import { useNavigate } from "@tanstack/react-router";
 interface ExampleModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -33,7 +30,7 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
   React.useEffect(() => {
     (async () => {
       try {
-        const res = await fetch('/templates.yaml');
+        const res = await fetch("/templates.yaml");
         const text = await res.text();
         const data = parse(text) as TemplatesArray;
         setExamples(data);
@@ -45,12 +42,8 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
   const queryBuilder = useQueryBuilderContext();
   const navigate = useNavigate();
 
-  const [selectedExamples, setSelectedExamples] = React.useState<QueryTemplate>(
-    {} as QueryTemplate
-  );
-  const exampleQueries = (examples as unknown as TemplatesArray).filter(
-    (example) => example.type === 'example'
-  );
+  const [selectedExamples, setSelectedExamples] = React.useState<QueryTemplate>({} as QueryTemplate);
+  const exampleQueries = (examples as unknown as TemplatesArray).filter((example) => example.type === "example");
   const onModalClose = () => {
     setSelectedExamples({} as QueryTemplate);
     onCancel();
@@ -58,16 +51,14 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
   };
 
   function exampleToTrapiFormat(example: ExampleTemplate) {
-    const templateNodes = example.template
-      .filter((part): part is TemplateNodePart => part.type === 'node')
-      .reduce((obj, { id }) => ({ ...obj, [id]: { categories: [] } }), {} as Record<string, any>);
+    const templateNodes = example.template.filter((part): part is TemplateNodePart => part.type === "node").reduce((obj, { id }) => ({ ...obj, [id]: { categories: [] } }), {} as Record<string, any>);
 
     const structureNodes = Object.entries(example.structure.nodes).reduce(
       (obj, [id, n]) => ({
         ...obj,
         [id]: { categories: [n.category], name: n.name, ...(n.id && { ids: [n.id] }) },
       }),
-      {} as Record<string, any>
+      {} as Record<string, any>,
     );
 
     const nodesSortedById = Object.entries({ ...templateNodes, ...structureNodes })
@@ -79,7 +70,7 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
         ...obj,
         [id]: { subject: e.subject, object: e.object, predicates: [e.predicate] },
       }),
-      {} as Record<string, any>
+      {} as Record<string, any>,
     );
 
     return {
@@ -93,18 +84,19 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
   }
 
   const handleSelectExample = (example: any) => {
+    console.log("Selected example:", example);
     const payload = exampleToTrapiFormat(example as ExampleTemplate);
-    queryBuilder.dispatch({ type: 'saveGraph', payload });
+    queryBuilder.dispatch({ type: "saveGraph", payload });
   };
 
   const createTemplateDisplay = (template: TemplatePart[]) => {
     return (
       <span>
         {template.map((part, i) => {
-          if (part.type === 'text') {
+          if (part.type === "text") {
             return <span key={i}>{part.text}</span>;
           }
-          if (part.type === 'node') {
+          if (part.type === "node") {
             return <code key={i}>{part.name}</code>;
           }
           return null;
@@ -116,49 +108,45 @@ function ExampleModal({ isOpen, onClose, onCancel }: ExampleModalProps) {
     <Modal open={isOpen} onClose={onModalClose}>
       <div
         style={{
-          padding: '20px',
-          backgroundColor: 'white',
-          borderRadius: '8px',
-          maxWidth: '500px',
-          margin: 'auto',
-          marginTop: '100px',
+          padding: "20px",
+          backgroundColor: "white",
+          borderRadius: "8px",
+          maxWidth: "500px",
+          margin: "auto",
+          marginTop: "100px",
         }}
       >
         <div
           style={{
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
           }}
         >
           <img src="/react-icons/fiBookOpen.svg" alt="Example" />
-          <h3 style={{ margin: '0 0 0 12px', fontWeight: 500 }}>Start with an example</h3>
+          <h3 style={{ margin: "0 0 0 12px", fontWeight: 500 }}>Start with an example</h3>
         </div>
-        <p style={{ color: '#5E5E5E', fontSize: '14px', margin: '8px 0 0 0' }}>
-          Select one of the existing queries from our set of examples provided
-        </p>
+        <p style={{ color: "#5E5E5E", fontSize: "14px", margin: "8px 0 0 0" }}>Select one of the existing queries from our set of examples provided</p>
         {exampleQueries.map((query) => (
           <div
             key={query.id}
-            className={`example-box ${selectedExamples.id === query.id ? 'example-box-selected' : 'example-box-unselected'}`}
+            className={`example-box ${selectedExamples.id === query.id ? "example-box-selected" : "example-box-unselected"}`}
             onClick={() => {
               setSelectedExamples(query);
               handleSelectExample(query);
             }}
           >
             <h4 style={{ fontWeight: 500, margin: 0 }}>{createTemplateDisplay(query.template)}</h4>
-            <p style={{ margin: 0, color: '#5E5E5E', fontSize: '14px', marginTop: '4px' }}>
-              Short description about the query
-            </p>
+            <p style={{ margin: 0, color: "#5E5E5E", fontSize: "14px", marginTop: "4px" }}>Short description about the query</p>
           </div>
         ))}
-        <div style={{ display: 'flex', justifyContent: 'end', marginTop: '32px', gap: '8px' }}>
+        <div style={{ display: "flex", justifyContent: "end", marginTop: "32px", gap: "8px" }}>
           <button onClick={onModalClose} className="button-cancel">
             Cancel
           </button>
           <button
             onClick={() => {
               onClose();
-              navigate({ to: '/question-builder' });
+              navigate({ to: "/question-builder" });
             }}
             className="button-default"
             disabled={!selectedExamples.id}
diff --git a/src/pages/graphId/Download.tsx b/src/pages/graphId/Download.tsx
index 933c1db..674cdeb 100644
--- a/src/pages/graphId/Download.tsx
+++ b/src/pages/graphId/Download.tsx
@@ -52,7 +52,7 @@ function DownloadSection() {
   );
 
   return (
-    <Box sx={{ mt: 5 }} id="download">
+    <Box sx={{ marginTop: "36px" }} id="download">
       <Card variant="outlined">
         <CardHeader title="Releases and Download Options" sx={{ pb: 0 }} />
         <CardContent>
diff --git a/src/pages/graphId/GraphId.css b/src/pages/graphId/GraphId.css
index ca840ec..32515bd 100644
--- a/src/pages/graphId/GraphId.css
+++ b/src/pages/graphId/GraphId.css
@@ -78,4 +78,8 @@
         font-size: 0.8rem;
         padding: 6px 12px;
     }
+
+    .MuiTypography-h5 {
+        font-size: 1.25rem !important;
+    }
 }
\ No newline at end of file
diff --git a/src/pages/queryBuilder/QueryBuilder.tsx b/src/pages/queryBuilder/QueryBuilder.tsx
index cf52cab..6df197d 100644
--- a/src/pages/queryBuilder/QueryBuilder.tsx
+++ b/src/pages/queryBuilder/QueryBuilder.tsx
@@ -138,7 +138,6 @@ export default function QueryBuilder() {
       });
     }
   };
-
   return (
     <>
       <pageStatus.Display />
@@ -146,7 +145,7 @@ export default function QueryBuilder() {
         <div id="queryBuilderContainer">
           <RegisterPasskeyDialog open={registerPasskeyOpen} onClose={() => setRegisterPasskeyOpen(false)} />
           <JsonEditor show={showJson} close={() => toggleJson(false)} />
-          <DownloadDialog open={downloadOpen} setOpen={setDownloadOpen} message={queryBuilder.query_graph} download_type="all_queries" />
+          <DownloadDialog open={downloadOpen} setOpen={setDownloadOpen} message={queryBuilder.state.message.message} download_type="all_queries" />
           <PanelGroup direction="horizontal">
             <Panel defaultSize={60} minSize={30} style={{ padding: "20px 20px 20px 0", overflowY: "auto" }}>
               <TextEditor rows={queryBuilder.textEditorRows || []} />
diff --git a/src/pages/queryBuilder/graphEditor/GraphEditor.tsx b/src/pages/queryBuilder/graphEditor/GraphEditor.tsx
index f171a7e..9beb022 100644
--- a/src/pages/queryBuilder/graphEditor/GraphEditor.tsx
+++ b/src/pages/queryBuilder/graphEditor/GraphEditor.tsx
@@ -1,35 +1,35 @@
-import React, { useReducer, useEffect, useState, cloneElement } from 'react';
-import { Popover, Button, Paper, Tooltip } from '@mui/material';
-import { useQueryBuilderContext } from '../../../context/queryBuilder';
-import nodeUtils from '../../../utils/d3/nodes';
-import DownloadDialog from '../../../components/DownloadDialog';
-import { NodeOption } from '../textEditor/types';
+import React, { useReducer, useEffect, useState, cloneElement } from "react";
+import { Popover, Button, Paper, Tooltip } from "@mui/material";
+import { useQueryBuilderContext } from "../../../context/queryBuilder";
+import nodeUtils from "../../../utils/d3/nodes";
+import DownloadDialog from "../../../components/DownloadDialog";
+import { NodeOption } from "../textEditor/types";
 
-import QueryGraph from './QueryGraph';
-import NodeSelector from '../textEditor/textEditorRow/NodeSelector';
-import PredicateSelector from '../textEditor/textEditorRow/PredicateSelector';
-import queryGraphUtils from '../../../utils/queryGraph';
+import QueryGraph from "./QueryGraph";
+import NodeSelector from "../textEditor/textEditorRow/NodeSelector";
+import PredicateSelector from "../textEditor/textEditorRow/PredicateSelector";
+import queryGraphUtils from "../../../utils/queryGraph";
 
-import './graphEditor.css';
-import SaveQuery from '../saveQuery/SaveQuery';
-import { useAuth } from '../../../context/AuthContext';
-import API from '../../../API/routes';
-import axios from 'axios';
-import ShareQuery from '../shareQuery/ShareQuery';
+import "./graphEditor.css";
+import SaveQuery from "../saveQuery/SaveQuery";
+import { useAuth } from "../../../context/AuthContext";
+import API from "../../../API/routes";
+import axios from "axios";
+import ShareQuery from "../shareQuery/ShareQuery";
 
-import AddIcon from '@mui/icons-material/Add';
-import AddLinkIcon from '@mui/icons-material/AddLink';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-import ShareIcon from '@mui/icons-material/Share';
-import EditIcon from '@mui/icons-material/Edit';
-import DownloadIcon from '@mui/icons-material/Download';
+import AddIcon from "@mui/icons-material/Add";
+import AddLinkIcon from "@mui/icons-material/AddLink";
+import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
+import ShareIcon from "@mui/icons-material/Share";
+import EditIcon from "@mui/icons-material/Edit";
+import DownloadIcon from "@mui/icons-material/Download";
 
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import { useAlert } from '../../../components/AlertProvider';
-import RestartAlt from '@mui/icons-material/RestartAlt';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useAlert } from "../../../components/AlertProvider";
+import RestartAlt from "@mui/icons-material/RestartAlt";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 
 const width = 600;
 const height = 400;
@@ -46,50 +46,50 @@ interface ClickState {
 
 // Define types for click actions
 type ClickAction =
-  | { type: 'startConnection'; payload: { anchor: HTMLElement } }
-  | { type: 'connectTerm'; payload: { id: string } }
-  | { type: 'connectionMade' }
-  | { type: 'click'; payload: { id: string } }
-  | { type: 'openEditor'; payload: { id: string; type: string; anchor: HTMLElement } }
-  | { type: 'closeEditor' };
+  | { type: "startConnection"; payload: { anchor: HTMLElement } }
+  | { type: "connectTerm"; payload: { id: string } }
+  | { type: "connectionMade" }
+  | { type: "click"; payload: { id: string } }
+  | { type: "openEditor"; payload: { id: string; type: string; anchor: HTMLElement } }
+  | { type: "closeEditor" };
 
 function clickReducer(state: ClickState, action: ClickAction): ClickState {
   switch (action.type) {
-    case 'startConnection': {
+    case "startConnection": {
       const { anchor } = action.payload;
       state.creatingConnection = true;
-      state.popoverId = '';
+      state.popoverId = "";
       state.popoverAnchor = anchor;
-      state.popoverType = 'newEdge';
+      state.popoverType = "newEdge";
       break;
     }
-    case 'connectTerm': {
+    case "connectTerm": {
       const { id } = action.payload;
       if (!state.chosenTerms.includes(id)) {
         state.chosenTerms = [...state.chosenTerms, id];
       }
       break;
     }
-    case 'connectionMade': {
+    case "connectionMade": {
       state.creatingConnection = false;
       state.chosenTerms = [];
       break;
     }
-    case 'click': {
+    case "click": {
       const { id } = action.payload;
       state.clickedId = id;
       break;
     }
-    case 'openEditor': {
+    case "openEditor": {
       const { id, type, anchor } = action.payload;
       state.popoverId = id;
       state.popoverType = type;
       state.popoverAnchor = anchor;
       break;
     }
-    case 'closeEditor': {
-      state.popoverId = '';
-      state.popoverType = '';
+    case "closeEditor": {
+      state.popoverId = "";
+      state.popoverType = "";
       state.popoverAnchor = null;
       break;
     }
@@ -110,12 +110,7 @@ interface GraphEditorProps {
 /**
  * Query Builder graph editor interface
  */
-export default function GraphEditor({
-  editJson,
-  downloadQuery,
-  onSubmit,
-  buttonOptions,
-}: GraphEditorProps) {
+export default function GraphEditor({ editJson, downloadQuery, onSubmit, buttonOptions }: GraphEditorProps) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -137,32 +132,32 @@ export default function GraphEditor({
   const [clickState, clickDispatch] = useReducer(clickReducer, {
     creatingConnection: false,
     chosenTerms: [],
-    clickedId: '',
-    popoverId: '',
+    clickedId: "",
+    popoverId: "",
     popoverAnchor: null,
-    popoverType: '',
+    popoverType: "",
   });
 
   function addEdge() {
-    queryBuilder.dispatch({ type: 'addEdge', payload: clickState.chosenTerms });
+    queryBuilder.dispatch({ type: "addEdge", payload: clickState.chosenTerms });
   }
 
   function addHop() {
     if (!Object.keys(query_graph.nodes).length) {
       // add a node to an empty graph
-      queryBuilder.dispatch({ type: 'addNode', payload: {} });
+      queryBuilder.dispatch({ type: "addNode", payload: {} });
     } else {
       // add a node and edge
-      queryBuilder.dispatch({ type: 'addHop', payload: {} });
+      queryBuilder.dispatch({ type: "addHop", payload: {} });
     }
   }
 
   function editNode(id: string, node: NodeOption | null) {
-    queryBuilder.dispatch({ type: 'editNode', payload: { id, node } });
+    queryBuilder.dispatch({ type: "editNode", payload: { id, node } });
   }
 
   function resetGraph() {
-    queryBuilder.dispatch({ type: 'resetGraph', payload: {} });
+    queryBuilder.dispatch({ type: "resetGraph", payload: {} });
   }
 
   /**
@@ -172,7 +167,7 @@ export default function GraphEditor({
   useEffect(() => {
     if (clickState.creatingConnection && clickState.chosenTerms.length >= 2) {
       addEdge();
-      clickDispatch({ type: 'connectionMade' });
+      clickDispatch({ type: "connectionMade" });
       // remove border from connected nodes
       nodeUtils.removeBorder();
     }
@@ -180,18 +175,18 @@ export default function GraphEditor({
 
   const graphActions = [
     {
-      tooltip: 'Add New Term',
+      tooltip: "Add New Term",
       onClick: addHop,
       icon: <AddIcon />,
       disabled: false,
     },
     {
-      tooltip: 'Connect Terms',
+      tooltip: "Connect Terms",
       onClick: (e: React.MouseEvent<HTMLElement>) => {
-        clickDispatch({ type: 'startConnection', payload: { anchor: e.currentTarget } });
+        clickDispatch({ type: "startConnection", payload: { anchor: e.currentTarget } });
         // auto close after 5 seconds
         setTimeout(() => {
-          clickDispatch({ type: 'closeEditor' });
+          clickDispatch({ type: "closeEditor" });
           nodeUtils.removeBorder();
         }, 5000);
       },
@@ -199,34 +194,34 @@ export default function GraphEditor({
       disabled: false,
     },
     {
-      tooltip: 'Edit JSON',
+      tooltip: "Edit JSON",
       onClick: editJson,
       icon: <EditIcon />,
       disabled: false,
     },
     {
-      tooltip: 'Download Query',
+      tooltip: "Download Query",
       onClick: downloadQuery,
       icon: <DownloadIcon />,
       disabled: false,
     },
     {
-      tooltip: 'Reset Graph',
+      tooltip: "Reset Graph",
       onClick: resetGraph,
       icon: <RestartAlt />,
       disabled: false,
     },
     {
-      icon: 'divider',
+      icon: "divider",
     },
     {
-      tooltip: user ? 'Bookmark Graph' : 'Login to save your query',
+      tooltip: user ? "Bookmark Graph" : "Login to save your query",
       onClick: () => toggleSaveQuery(true),
       icon: <BookmarkBorderIcon />,
       disabled: !user,
     },
     {
-      tooltip: 'Share Graph',
+      tooltip: "Share Graph",
       onClick: () => toggleShareQuery(true),
       icon: <ShareIcon />,
       disabled: false,
@@ -243,28 +238,24 @@ export default function GraphEditor({
 
   return (
     <div id="queryGraphEditor">
-      <div
-        id="graphContainer"
-        style={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden' }}
-        ref={divRef}
-      >
+      <div id="graphContainer" style={{ height: "100%", width: "100%", position: "relative", overflow: "hidden" }} ref={divRef}>
         <div className="buttons-container">
           {graphActions.map((action, index) => (
             <>
-              {action.icon !== 'divider' && typeof action.icon !== 'string' ? (
+              {action.icon !== "divider" && typeof action.icon !== "string" ? (
                 <div
                   className="button-icon"
                   key={index}
                   onClick={
                     action.disabled
                       ? () => {
-                          displayAlert('info', 'Please log in to use this feature.');
+                          displayAlert("info", "Please log in to use this feature.");
                         }
                       : action.onClick
                   }
                   style={{ opacity: action.disabled ? 0.5 : 1 }}
                 >
-                  <div className="icon">{cloneElement(action.icon, { className: '' })}</div>
+                  <div className="icon">{cloneElement(action.icon, { className: "" })}</div>
                   <div className="icon-label">{action.tooltip}</div>
                 </div>
               ) : (
@@ -314,13 +305,7 @@ export default function GraphEditor({
             ))}
           </div>
         </div> */}
-        <QueryGraph
-          height={height}
-          width={width}
-          clickState={clickState}
-          updateClickState={clickDispatch as any}
-          graphRef={divRef}
-        />
+        <QueryGraph height={height} width={width} clickState={clickState} updateClickState={clickDispatch as any} graphRef={divRef} />
         {/* <div id="graphBottomButtons">
           <Button
             onClick={() => {
@@ -353,17 +338,17 @@ export default function GraphEditor({
         <Popover
           open={Boolean(clickState.popoverAnchor)}
           anchorEl={clickState.popoverAnchor}
-          onClose={() => clickDispatch({ type: 'closeEditor' })}
+          onClose={() => clickDispatch({ type: "closeEditor" })}
           anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'left',
+            vertical: "top",
+            horizontal: "left",
           }}
           transformOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
+            vertical: "bottom",
+            horizontal: "left",
           }}
         >
-          {(clickState.popoverType === 'editNode' || clickState.popoverType === 'newNode') && (
+          {(clickState.popoverType === "editNode" || clickState.popoverType === "newNode") && (
             <NodeSelector
               properties={query_graph.nodes[clickState.popoverId]}
               id={clickState.popoverId}
@@ -375,65 +360,47 @@ export default function GraphEditor({
               }}
             />
           )}
-          {clickState.popoverType === 'editEdge' && <PredicateSelector id={clickState.popoverId} />}
-          {clickState.popoverType === 'newEdge' && (
-            <Paper style={{ padding: '10px' }}>
+          {clickState.popoverType === "editEdge" && <PredicateSelector id={clickState.popoverId} />}
+          {clickState.popoverType === "newEdge" && (
+            <Paper style={{ padding: "10px" }}>
               <p>Select two terms to connect!</p>
             </Paper>
           )}
         </Popover>
-        <DownloadDialog
-          open={downloadOpen}
-          setOpen={setDownloadOpen}
-          message={queryBuilder.state.message}
-          download_type="query"
-        />
+        <DownloadDialog open={downloadOpen} setOpen={setDownloadOpen} message={queryBuilder.state.message} download_type="query" />
         <SaveQuery show={showSaveQuery} close={() => toggleSaveQuery(false)} />
         <ShareQuery show={showShareQuery} close={() => toggleShareQuery(false)} />
         <div
           style={{
-            position: 'absolute',
+            position: "absolute",
             bottom: 10,
-            right: '50%',
-            transform: 'translateX(50%)',
-            display: 'flex',
-            gap: '10px',
+            right: "50%",
+            transform: "translateX(50%)",
+            display: "flex",
+            gap: "10px",
           }}
         >
           <button
             id="demo-positioned-button"
-            aria-controls={open ? 'demo-positioned-menu' : undefined}
+            aria-controls={open ? "demo-positioned-menu" : undefined}
             aria-haspopup="true"
-            aria-expanded={open ? 'true' : undefined}
+            aria-expanded={open ? "true" : undefined}
             onClick={handleClick}
             style={{
-              backgroundColor: 'white',
-              width: '270px',
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              padding: '8px 12px',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
+              backgroundColor: "white",
+              width: "270px",
+              border: "1px solid #ccc",
+              borderRadius: "4px",
+              padding: "8px 12px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            Load a query{' '}
-            {open ? (
-              <UnfoldLessIcon style={{ marginLeft: '8px' }} />
-            ) : (
-              <UnfoldMoreIcon style={{ marginLeft: '8px' }} />
-            )}
+            Load a query {open ? <UnfoldLessIcon style={{ marginLeft: "8px" }} /> : <UnfoldMoreIcon style={{ marginLeft: "8px" }} />}
           </button>
-          <Menu
-            id="demo-positioned-menu"
-            aria-labelledby="demo-positioned-button"
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
-            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-            transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-          >
+          <Menu id="demo-positioned-menu" aria-labelledby="demo-positioned-button" anchorEl={anchorEl} open={open} onClose={handleClose} anchorOrigin={{ vertical: "top", horizontal: "center" }} transformOrigin={{ vertical: "bottom", horizontal: "center" }}>
             {buttonOptions?.map((option, index) => (
               <MenuItem
                 key={index}
diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/AsyncAutocomplete.tsx b/src/pages/queryBuilder/textEditor/textEditorRow/AsyncAutocomplete.tsx
index 2797582..b872b56 100644
--- a/src/pages/queryBuilder/textEditor/textEditorRow/AsyncAutocomplete.tsx
+++ b/src/pages/queryBuilder/textEditor/textEditorRow/AsyncAutocomplete.tsx
@@ -357,10 +357,6 @@ export function AsyncAutocomplete<T = any>({
     setInputValue(newValue);
     onInputChange?.(newValue);
 
-    if (value && newValue !== getOptionLabel(value)) {
-      onChange?.(null);
-    }
-
     if (!open && newValue) {
       setOpen(true);
     }
@@ -410,11 +406,11 @@ export function AsyncAutocomplete<T = any>({
 
   const handleClear = (event: React.MouseEvent) => {
     event.stopPropagation();
-    onChange?.(null);
     setInputValue("");
     onInputChange?.("");
     setAsyncResults({});
     setSourceLoadingStates({});
+    setOpen(true);
   };
 
   // Sync input value with prop value only when not actively editing