Computed column

packages/app/.gitignore

@@ -42,4 +42,6 @@ next-env.d.ts
 # Sentry Config File
 .env.sentry-build-plugin
 
-.env.local
+.env.local
+# clerk configuration (can include secrets)
+/.clerk/

packages/app/package.json

@@ -10,11 +10,17 @@
     "lint": "next lint && npm run type-check"
   },
   "dependencies": {
-    "@turf/turf": "^7.2.0",
     "@aws-sdk/client-s3": "^3.716.0",
     "@aws-sdk/s3-request-presigner": "^3.716.0",
     "@clerk/nextjs": "^6.12.10",
-    "@codemirror/view": "^6.33.0",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.0",
     "@dnd-kit/core": "^6.3.1",
     "@glideapps/glide-data-grid": "^6.0.3",
     "@groundup-dev/ags": "^0.2.2",
@@ -45,6 +51,7 @@
     "@tanstack/react-query-devtools": "^5.66.9",
     "@tanstack/react-table": "^8.20.6",
     "@tanstack/react-virtual": "^3.11.2",
+    "@turf/turf": "^7.2.0",
     "@types/d3": "^7.4.3",
     "@types/react-resizable": "^3.0.8",
     "@types/recharts": "^1.8.29",
@@ -59,7 +66,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "codemirror": "^6.0.1",
+    "codemirror": "^6.0.2",
     "d3": "^7.9.0",
     "date-fns": "^3.6.0",
     "deck.gl": "^9.1.11",

packages/app/src/actions/data/queries/addComputedColumn.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import { getServerUser } from "@/lib/auth";
+import { getProjectForUser } from "@/lib/dal/projects";
+import { revalidateQueryCache } from "@/lib/dal/queries";
+import { addComputedColumn } from "@/db/crud/query";
+import { ComputedColumn } from "@common/db/schema/query";
+
+export async function addComputedColumnAction(
+  projectId: string,
+  queryId: string,
+  column: ComputedColumn,
+): Promise<void> {
+  const user = await getServerUser();
+  const userProject = await getProjectForUser(user, projectId);
+
+  if (!userProject) {
+    throw new Error("Project not found");
+  }
+
+  await addComputedColumn(queryId, column);
+
+  revalidateQueryCache(queryId, projectId);
+}

packages/app/src/actions/data/queries/deleteComputedColumn.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import { getServerUser } from "@/lib/auth";
+import { getProjectForUser } from "@/lib/dal/projects";
+import { revalidateQueryCache } from "@/lib/dal/queries";
+import { deleteComputedColumn } from "@/db/crud/query";
+
+export async function deleteComputedColumnAction(
+  projectId: string,
+  queryId: string,
+  columnName: string,
+): Promise<void> {
+  const user = await getServerUser();
+  const userProject = await getProjectForUser(user, projectId);
+
+  if (!userProject) {
+    throw new Error("Project not found");
+  }
+
+  await deleteComputedColumn(queryId, columnName);
+
+  revalidateQueryCache(queryId, projectId);
+}

packages/app/src/actions/data/queries/updateComputedColumn.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import { getServerUser } from "@/lib/auth";
+import { getProjectForUser } from "@/lib/dal/projects";
+import { revalidateQueryCache } from "@/lib/dal/queries";
+import { updateComputedColumn } from "@/db/crud/query";
+import { ComputedColumn } from "@common/db/schema/query";
+
+export async function updateComputedColumnAction(
+  projectId: string,
+  queryId: string,
+  columnName: string,
+  column: ComputedColumn,
+): Promise<void> {
+  const user = await getServerUser();
+  const userProject = await getProjectForUser(user, projectId);
+
+  if (!userProject) {
+    throw new Error("Project not found");
+  }
+
+  await updateComputedColumn(queryId, columnName, column);
+
+  revalidateQueryCache(queryId, projectId);
+}

packages/app/src/app/(app)/projects/[projectId]/data/queries/[queryId]/layout.tsx

@@ -3,10 +3,7 @@ import { getProjectForUser } from "@/lib/dal/projects";
 import { parseStringParam } from "@/lib/routing";
 import { notFound } from "next/navigation";
 
-import { QueryToggleButton } from "@/components/data/query/query-toggle-button";
-import { QueryNameInput } from "@/components/data/query/query-name-input";
-import { QuerySaveButton } from "@/components/data/query/query-save-button";
-import { BreadcrumbSetter } from "@/components/data/breadcrumb-setter";
+import { QueryLayoutClient } from "@/components/data/query/query-layout-client";
 
 import { isDefinitionConfigured } from "@/components/data/query/helpers";
 import { getQueryForProject } from "@/lib/dal/queries";
@@ -30,36 +27,14 @@ export default async function Layout({ params, children, modal }: Props) {
   const definitionConfigured = isDefinitionConfigured(query);
 
   return (
-    <div className="flex h-full flex-col">
-      {/* Header with name input, breadcrumbs, and toggle button */}
-      <div className="flex items-center justify-between px-6 py-4">
-        <div className="flex items-center gap-4">
-          <QueryNameInput query={query} />
-          <BreadcrumbSetter
-            breadcrumbs={[
-              {
-                label: "Queries",
-                href: `/projects/${projectId}/data/queries`,
-              },
-              {
-                label: query.name,
-                href: `/projects/${projectId}/data/queries/${queryId}/data`,
-              },
-            ]}
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <QuerySaveButton projectId={projectId} queryId={queryId} />
-
-          <QueryToggleButton
-            projectId={projectId}
-            queryId={queryId}
-            definitionConfigured={definitionConfigured}
-          />
-        </div>
-      </div>
+    <QueryLayoutClient
+      projectId={projectId}
+      queryId={queryId}
+      query={query}
+      definitionConfigured={definitionConfigured}
+      modal={modal}
+    >
       {children}
-      {modal}
-    </div>
+    </QueryLayoutClient>
   );
 }