monaco-editor library removed and replaced with codemirror. Package h…

…as been removed from system in its entirety. Upgrade to v15/etc looks stable

frontend/app/api/batchedupload/[schema]/[[...slugs]]/route.ts

@@ -4,10 +4,7 @@ import { FailedMeasurementsRDS } from '@/config/sqlrdsdefinitions/core';
 import connectionmanager from '@/config/connectionmanager';
 import { format } from 'mysql2/promise';
 
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ schema: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ schema: string; slugs?: string[] }> }) {
   const params = await props.params;
   let errorRows: FailedMeasurementsRDS[] = await request.json();
   const schema = params.schema;

frontend/app/api/bulkcrud/route.ts

@@ -7,7 +7,7 @@ import ConnectionManager from '@/config/connectionmanager';
 import { Plot } from '@/config/sqlrdsdefinitions/zones';
 import { OrgCensus } from '@/config/sqlrdsdefinitions/timekeeping';
 
-export async function POST(request: NextRequest, { params }: { params: { dataType: string; slugs?: string[] } }) {
+export async function POST(request: NextRequest) {
   const body = await request.json();
   const dataType: string = body.gridType;
   const schema: string = body.schema;

frontend/app/api/catalog/[firstName]/[lastName]/route.ts

@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { HTTPResponses } from '@/config/macros';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ firstName: string; lastName: string }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ firstName: string; lastName: string }> }) {
   const params = await props.params;
   const { firstName, lastName } = params;
   if (!firstName || !lastName) throw new Error('no first or last name provided!');

frontend/app/api/changelog/overview/[changelogType]/[[...options]]/route.ts

@@ -3,10 +3,7 @@ import { HTTPResponses } from '@/config/macros';
 import MapperFactory from '@/config/datamapper';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ changelogType: string; options?: string[] }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ changelogType: string; options?: string[] }> }) {
   const params = await props.params;
   const schema = request.nextUrl.searchParams.get('schema');
   if (!schema) throw new Error('schema not found');

frontend/app/api/cmprevalidation/[dataType]/[[...slugs]]/route.ts

@@ -4,10 +4,7 @@ import ConnectionManager from '@/config/connectionmanager';
 
 // datatype: table name
 // expecting 1) schema 2) plotID 3) plotCensusNumber
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs || !params.dataType) throw new Error('missing slugs');
   const [schema, plotID, plotCensusNumber] = params.slugs;

frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts

@@ -136,10 +136,7 @@ export async function GET(
 }
 
 // required dynamic parameters: dataType (fixed),[ schema, gridID value] -> slugs
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID, _plotIDParam, censusIDParam] = params.slugs;
@@ -204,10 +201,7 @@ export async function POST(
 }
 
 // slugs: schema, gridID
-export async function PATCH(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function PATCH(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
@@ -345,10 +339,7 @@ export async function PATCH(
 
 // slugs: schema, gridID
 // body: full data row, only need first item from it this time though
-export async function DELETE(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function DELETE(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;

frontend/app/api/fixeddatafilter/[dataType]/[[...slugs]]/route.ts

@@ -373,10 +373,7 @@ export async function POST(
 }
 
 // slugs: schema, gridID
-export async function PATCH(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function PATCH(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
@@ -437,10 +434,7 @@ export async function PATCH(
 
 // slugs: schema, gridID
 // body: full data row, only need first item from it this time though
-export async function DELETE(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function DELETE(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;

frontend/app/api/formdownload/[dataType]/[[...slugs]]/route.ts

@@ -34,10 +34,7 @@ const buildSearchStub = (columns: string[], quickFilter: string[], alias?: strin
     .join(' OR ');
 };
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   const { dataType, slugs } = params;
   if (!dataType || !slugs) throw new Error('data type or slugs not provided');

frontend/app/api/formvalidation/[dataType]/[[...slugs]]/route.ts

@@ -7,10 +7,7 @@ import ConnectionManager from '@/config/connectionmanager';
 // slugs: schema, columnName, value ONLY
 // needs to match dynamic format established by other slug routes!
 // refit to match entire rows, using dataType convention to determine what columns need testing?
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   // simple dynamic validation to confirm table input values:
   if (!params.slugs || params.slugs.length !== 3) throw new Error('slugs missing -- formvalidation');

frontend/app/api/postvalidationbyquery/[schema]/[plotID]/[censusID]/[queryID]/route.ts

@@ -3,10 +3,7 @@ import { HTTPResponses } from '@/config/macros';
 import moment from 'moment';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ schema: string; plotID: string; censusID: string; queryID: string }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ schema: string; plotID: string; censusID: string; queryID: string }> }) {
   const params = await props.params;
   const { schema } = params;
   const plotID = parseInt(params.plotID);

frontend/app/api/refreshviews/[view]/[schema]/route.ts

@@ -2,10 +2,7 @@ import { HTTPResponses } from '@/config/macros';
 import { NextRequest, NextResponse } from 'next/server';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function POST(
-  _request: NextRequest,
-  props: { params: Promise<{ view: string; schema: string }> }
-) {
+export async function POST(_request: NextRequest, props: { params: Promise<{ view: string; schema: string }> }) {
   const params = await props.params;
   if (!params.schema || params.schema === 'undefined' || !params.view || params.view === 'undefined' || !params) throw new Error('schema not provided');
   const { view, schema } = params;

frontend/app/api/rollover/[dataType]/[[...slugs]]/route.ts

@@ -9,10 +9,7 @@ import ConnectionManager from '@/config/connectionmanager';
  * @param params - The route parameters, including the `dataType` (either 'quadrats' or 'personnel') and the `slugs` (an array containing the schema, plotID, sourceCensusID, and newCensusID).
  * @returns A NextResponse with a success message or an error message, along with the appropriate HTTP status code.
  */
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, plotID, sourceCensusID, newCensusID] = params.slugs;

frontend/app/api/specieslimits/[plotID]/[plotCensusNumber]/route.ts

@@ -4,10 +4,7 @@ import { HTTPResponses } from '@/config/macros';
 import ConnectionManager from '@/config/connectionmanager';
 
 // pulls everything
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ plotID: string; plotCensusNumber: string }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ plotID: string; plotCensusNumber: string }> }) {
   const params = await props.params;
   const schema = request.nextUrl.searchParams.get('schema');
   if (!schema) throw new Error('Schema not provided');

frontend/app/api/validations/procedures/[validationType]/route.ts

@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { runValidation } from '@/components/processors/processorhelperfunctions';
 import { HTTPResponses } from '@/config/macros';
 
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ validationType: string }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ validationType: string }> }) {
   const params = await props.params;
   try {
     if (!params.validationType) throw new Error('validationProcedureName not provided');

frontend/app/contexts/listselectionprovider.tsx

@@ -1,6 +1,6 @@
 // ListSelectionProvider.tsx
 'use client';
-import React, { createContext, Dispatch, useContext, useReducer } from 'react';
+import React, { createContext, Dispatch, Reducer, useContext, useReducer } from 'react';
 import { createEnhancedDispatch, EnhancedDispatch, genericLoadReducer, LoadAction } from '@/config/macros/contextreducers';
 import { PlotRDS, QuadratRDS, SitesRDS } from '@/config/sqlrdsdefinitions/zones';
 import { OrgCensus } from '@/config/sqlrdsdefinitions/timekeeping';
@@ -19,13 +19,18 @@ export const SiteListDispatchContext = createContext<EnhancedDispatch<SitesRDS[]
 export const FirstLoadDispatchContext = createContext<Dispatch<{ firstLoad: boolean }> | undefined>(undefined);
 
 export function ListSelectionProvider({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [plotList, plotListDispatch] = useReducer<React.Reducer<PlotRDS[] | undefined, LoadAction<PlotRDS[]>>>(genericLoadReducer, []);
+  const plotListReducer: Reducer<PlotRDS[] | undefined, LoadAction<PlotRDS[]>> = genericLoadReducer<PlotRDS[]>;
+  const orgCensusListReducer: Reducer<OrgCensus[] | undefined, LoadAction<OrgCensus[]>> = genericLoadReducer<OrgCensus[]>;
+  const quadratListReducer: Reducer<QuadratRDS[] | undefined, LoadAction<QuadratRDS[]>> = genericLoadReducer<QuadratRDS[]>;
+  const siteListReducer: Reducer<SitesRDS[] | undefined, LoadAction<SitesRDS[]>> = genericLoadReducer<SitesRDS[]>;
 
-  const [orgCensusList, orgCensusListDispatch] = useReducer<React.Reducer<OrgCensus[] | undefined, LoadAction<OrgCensus[]>>>(genericLoadReducer, []);
+  const [plotList, plotListDispatch] = useReducer(plotListReducer, []);
 
-  const [quadratList, quadratListDispatch] = useReducer<React.Reducer<QuadratRDS[] | undefined, LoadAction<QuadratRDS[]>>>(genericLoadReducer, []);
+  const [orgCensusList, orgCensusListDispatch] = useReducer(orgCensusListReducer, []);
 
-  const [siteList, siteListDispatch] = useReducer<React.Reducer<SitesRDS[] | undefined, LoadAction<SitesRDS[]>>>(genericLoadReducer, []);
+  const [quadratList, quadratListDispatch] = useReducer(quadratListReducer, []);
+
+  const [siteList, siteListDispatch] = useReducer(siteListReducer, []);
 
   const [firstLoad, firstLoadDispatch] = useReducer(firstLoadReducer, true);
 

frontend/components/client/codeeditor.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { Dispatch, SetStateAction, useRef } from 'react';
+import { Box } from '@mui/joy';
+import { useCodeMirror } from '@uiw/react-codemirror';
+import { basicSetup } from 'codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
+
+type CodeEditorProps = {
+  value: string;
+  setValue: Dispatch<SetStateAction<string>> | undefined;
+  schemaDetails?: { table_name: string; column_name: string }[];
+  height?: string | number;
+  isDarkMode?: boolean;
+  readOnly?: boolean;
+};
+
+const CodeEditor: React.FC<CodeEditorProps> = ({ value, setValue, schemaDetails = [], height = '60vh', isDarkMode = false, readOnly = false }) => {
+  const editorContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // Autocomplete Suggestions
+  const autocompleteExtension = autocompletion({
+    override: [
+      (context: CompletionContext) => {
+        const word = context.matchBefore(/\w*/);
+        if (!word || word.from === word.to) return null;
+
+        const suggestions = [
+          ...Array.from(new Set(schemaDetails.map(row => row.table_name))).map(table => ({
+            label: table,
+            type: 'keyword',
+            detail: 'Table',
+            apply: table
+          })),
+          ...schemaDetails.map(({ table_name, column_name }) => ({
+            label: `${table_name}.${column_name}`,
+            type: 'property',
+            detail: `Column from ${table_name}`,
+            apply: `${table_name}.${column_name}`
+          }))
+        ];
+
+        return {
+          from: word.from,
+          options: suggestions
+        };
+      }
+    ]
+  });
+
+  // Initialize CodeMirror
+  useCodeMirror({
+    container: editorContainerRef.current,
+    value,
+    height: height.toString(),
+    extensions: [basicSetup, sql(), autocompleteExtension],
+    theme: isDarkMode ? 'dark' : 'light',
+    onChange: setValue,
+    readOnly
+  });
+
+  return <Box ref={editorContainerRef} sx={{ width: '100%', height: '100%' }} />;
+};
+
+export default CodeEditor;