Refine UI around query editor

Changelog.md

@@ -10,7 +10,8 @@
   [#956](https://github.com/aws/graph-explorer/pull/956),
   [#957](https://github.com/aws/graph-explorer/pull/957),
   [#974](https://github.com/aws/graph-explorer/pull/974),
-  [#958](https://github.com/aws/graph-explorer/pull/958))
+  [#958](https://github.com/aws/graph-explorer/pull/958),
+  [#989](https://github.com/aws/graph-explorer/pull/989))
 - **Updated** graph layout options to include better descriptions and new
   directions for hierarchical and subway
   ([#973](https://github.com/aws/graph-explorer/pull/973))

packages/graph-explorer/src/components/Button/Button.tsx

@@ -18,8 +18,8 @@ export const buttonStyles = cva({
     },
     size: {
       small: "h-8 rounded px-1 text-base [&_svg]:size-5",
-      base: "h-10 rounded-md px-3 text-base [&_svg]:size-5",
-      large: "h-12 rounded-md px-4 text-lg [&_svg]:size-6",
+      base: "h-10 rounded-md px-4 text-base [&_svg]:size-5",
+      large: "h-12 rounded-md px-5 text-lg [&_svg]:size-6",
     },
   },
   compoundVariants: [

packages/graph-explorer/src/components/KeyboardKey.tsx

@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef } from "react";
+import { cn } from "@/utils";
+
+export function KeyboardKey({
+  className,
+  ...props
+}: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      className={cn(
+        "border-text-secondary inline rounded border bg-transparent px-1 py-0.5 font-mono text-xs leading-none tracking-wider [&_svg]:inline [&_svg]:size-[10px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}

packages/graph-explorer/src/components/index.ts

@@ -39,6 +39,8 @@ export * from "./Input";
 export { default as InputField } from "./InputField";
 export * from "./InputField";
 
+export * from "./KeyboardKey";
+
 export * from "./Label";
 
 export { default as ListItem } from "./ListItem";

packages/graph-explorer/src/modules/GraphViewer/SelectLayout.tsx

@@ -20,6 +20,7 @@
   ...selectTriggerProps
 }: ComponentPropsWithRef<typeof SelectTrigger>) {
   const [value, setValue] = useAtom(graphLayoutSelectionAtom);
+
   return (
     <Select
       value={value}
@@ -41,24 +42,24 @@
         <SelectSeparator />
         <SelectGroup>
           <SelectLabel>Klay</SelectLabel>
-          <SelectItem value="KLAY_LR">Left to Right</SelectItem>
-          <SelectItem value="KLAY_TB">Top to Bottom</SelectItem>
+          <SelectItem value="KLAY_LR">Klay (Left to Right)</SelectItem>
+          <SelectItem value="KLAY_TB">Klay (Top to Bottom)</SelectItem>
         </SelectGroup>
         <SelectSeparator />
         <SelectGroup>
           <SelectLabel>Hierarchical</SelectLabel>
-          <SelectItem value="DAGRE_LR">Left to Right</SelectItem>
-          <SelectItem value="DAGRE_RL">Right to Left</SelectItem>
-          <SelectItem value="DAGRE_TB">Top to Bottom</SelectItem>
-          <SelectItem value="DAGRE_BT">Bottom to Top</SelectItem>
+          <SelectItem value="DAGRE_LR">Hierarchical (Left to Right)</SelectItem>
+          <SelectItem value="DAGRE_RL">Hierarchical (Right to Left)</SelectItem>
+          <SelectItem value="DAGRE_TB">Hierarchical (Top to Bottom)</SelectItem>
+          <SelectItem value="DAGRE_BT">Hierarchical (Bottom to Top)</SelectItem>
         </SelectGroup>
         <SelectSeparator />
         <SelectGroup>
           <SelectLabel>Subway</SelectLabel>
-          <SelectItem value="SUBWAY_LR">Left to Right</SelectItem>
-          <SelectItem value="SUBWAY_RL">Right to Left</SelectItem>
-          <SelectItem value="SUBWAY_TB">Top to Bottom</SelectItem>
-          <SelectItem value="SUBWAY_BT">Bottom to Top</SelectItem>
+          <SelectItem value="SUBWAY_LR">Subway (Left to Right)</SelectItem>
+          <SelectItem value="SUBWAY_RL">Subway (Right to Left)</SelectItem>
+          <SelectItem value="SUBWAY_TB">Subway (Top to Bottom)</SelectItem>
+          <SelectItem value="SUBWAY_BT">Subway (Bottom to Top)</SelectItem>
         </SelectGroup>
       </SelectContent>
     </Select>

packages/graph-explorer/src/modules/SearchSidebar/QuerySearchTabContent.tsx

@@ -4,15 +4,19 @@
   FormControl,
   FormField,
   FormItem,
+  KeyboardKey,
   LoadingSpinner,
   PanelEmptyState,
   PanelError,
   SearchSadIcon,
   TextArea,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@/components";
 import { useExplorer, useUpdateSchemaFromEntities } from "@/core";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { CornerDownRightIcon } from "lucide-react";
+import { SendHorizonalIcon } from "lucide-react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -90,16 +94,25 @@
               </FormItem>
             )}
           />
-          <div className="flex gap-3">
-            <Button
-              className="w-full"
-              variant="filled"
-              type="submit"
-              disabled={form.formState.isSubmitting}
-            >
-              <CornerDownRightIcon />
-              Run query
-            </Button>
+          <div className="flex justify-end gap-3">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="default"
+                  type="submit"
+                  disabled={form.formState.isSubmitting}
+                >
+                  Run Query
+                  <SendHorizonalIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <KeyboardKey>Cmd</KeyboardKey> +{" "}
+                <KeyboardKey>Enter</KeyboardKey> or{" "}
+                <KeyboardKey>Ctrl</KeyboardKey> +{" "}
+                <KeyboardKey>Enter</KeyboardKey>
+              </TooltipContent>
+            </Tooltip>
           </div>
         </form>
       </Form>

packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx

@@ -8,7 +8,7 @@
 import { MappedQueryResults } from "@/connector";
 import { NodeSearchResult } from "./NodeSearchResult";
 import { useAddToGraphMutation } from "@/hooks/useAddToGraph";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon, ListPlusIcon } from "lucide-react";
 import { EdgeSearchResult } from "./EdgeSearchResult";
 import { ScalarSearchResult } from "./ScalarSearchResult";
 import { Edge, Vertex } from "@/core";
@@ -57,7 +57,7 @@
           vertices={results.vertices}
           edges={results.edges}
         />
-        <div className="flex items-center gap-2">
+        <div className="flex min-h-10 items-center gap-2">
           <ResultCounts results={results} />
           {isPagingNecessary ? (
             <div className="flex">
@@ -135,22 +135,29 @@
   ...props
 }: ButtonProps & { vertices: Vertex[]; edges: Edge[] }) {
   const mutation = useAddToGraphMutation();
-  const canSendToGraph = vertices.length > 0 || edges.length > 0;
-  const counts = vertices.length + edges.length;
 
-  if (counts === 0) {
+  // Ensure there are entities that can be added to the graph
+  const canSendToGraph = vertices.length + edges.length > 0;
+  if (!canSendToGraph) {
     return null;
   }
 
   return (
     <Button
+      variant="filled"
       onClick={() => mutation.mutate({ vertices, edges })}
-      disabled={!canSendToGraph || mutation.isPending}
+      disabled={mutation.isPending}
       className="stack shrink-0 items-center justify-center"
       {...props}
     >
-      <span className={cn("visible", mutation.isPending && "invisible")}>
-        Add All ({counts})
+      <span
+        className={cn(
+          "visible inline-flex items-center gap-2",
+          mutation.isPending && "invisible"
+        )}
+      >
+        <ListPlusIcon />
+        Add All
       </span>
       <span
         className={cn("invisible", mutation.isPending && "visible mx-auto")}