Some nodes are now visible.

server/crdt.py

@@ -1,6 +1,8 @@
-'''CRDT is used to synchronize workspace state for backend and frontend(s).'''
+"""CRDT is used to synchronize workspace state for backend and frontend(s)."""
+
 import asyncio
 import contextlib
+import enum
 import fastapi
 import os.path
 import pycrdt
@@ -10,33 +12,39 @@ import pycrdt_websocket.ystore
 
 router = fastapi.APIRouter()
 
+
 def ws_exception_handler(exception, log):
-    print('exception', exception)
+    print("exception", exception)
     log.exception(exception)
     return True
 
+
 class WebsocketServer(pycrdt_websocket.WebsocketServer):
     async def init_room(self, name):
-        ystore = pycrdt_websocket.ystore.FileYStore(f'crdt_data/{name}.crdt')
+        ystore = pycrdt_websocket.ystore.FileYStore(f"crdt_data/{name}.crdt")
         ydoc = pycrdt.Doc()
-        ydoc['workspace'] = ws = pycrdt.Map()
+        ydoc["workspace"] = ws = pycrdt.Map()
         # Replay updates from the store.
         try:
-            for update, timestamp in [(item[0], item[-1]) async for item in ystore.read()]:
+            for update, timestamp in [
+                (item[0], item[-1]) async for item in ystore.read()
+            ]:
                 ydoc.apply_update(update)
         except pycrdt_websocket.ystore.YDocNotFound:
             pass
-        if 'nodes' not in ws:
-            ws['nodes'] = pycrdt.Array()
-        if 'edges' not in ws:
-            ws['edges'] = pycrdt.Array()
-        if 'env' not in ws:
-            ws['env'] = 'unset'
+        if "nodes" not in ws:
+            ws["nodes"] = pycrdt.Array()
+        if "edges" not in ws:
+            ws["edges"] = pycrdt.Array()
+        if "env" not in ws:
+            ws["env"] = "unset"
             try_to_load_workspace(ws, name)
         room = pycrdt_websocket.YRoom(ystore=ystore, ydoc=ydoc)
         room.ws = ws
+
         def on_change(changes):
             asyncio.create_task(workspace_changed(changes, ws))
+
         ws.observe_deep(on_change)
         return room
 
@@ -47,10 +55,16 @@ class WebsocketServer(pycrdt_websocket.WebsocketServer):
         await self.start_room(room)
         return room
 
-websocket_server = WebsocketServer(exception_handler=ws_exception_handler, auto_clean_rooms=False)
+
+websocket_server = WebsocketServer(
+    # exception_handler=ws_exception_handler,
+    auto_clean_rooms=False,
+)
 asgi_server = pycrdt_websocket.ASGIServer(websocket_server)
 
 last_ws_input = None
+
+
 def clean_input(ws_pyd):
     for node in ws_pyd.nodes:
         node.data.display = None
@@ -60,6 +74,7 @@ def clean_input(ws_pyd):
             for key in list(node.model_extra.keys()):
                 delattr(node, key)
 
+
 def crdt_update(crdt_obj, python_obj, boxes=set()):
     if isinstance(python_obj, dict):
         for key, value in python_obj.items():
@@ -73,6 +88,8 @@ def crdt_update(crdt_obj, python_obj, boxes=set()):
                 if crdt_obj.get(key) is None:
                     crdt_obj[key] = pycrdt.Array()
                 crdt_update(crdt_obj[key], value, boxes)
+            elif isinstance(value, enum.Enum):
+                crdt_obj[key] = str(value)
             else:
                 crdt_obj[key] = value
     elif isinstance(python_obj, list):
@@ -91,41 +108,47 @@ def crdt_update(crdt_obj, python_obj, boxes=set()):
                 else:
                     crdt_obj[i] = value
     else:
-        raise ValueError('Invalid type:', python_obj)
+        raise ValueError("Invalid type:", python_obj)
 
 
 def try_to_load_workspace(ws, name):
     from . import workspace
-    json_path = f'data/{name}'
+
+    json_path = f"data/{name}"
     if os.path.exists(json_path):
         ws_pyd = workspace.load(json_path)
-        crdt_update(ws, ws_pyd.model_dump(), boxes={'display'})
+        crdt_update(ws, ws_pyd.model_dump(), boxes={"display"})
+
 
 async def workspace_changed(e, ws_crdt):
     global last_ws_input
     from . import workspace
+
     ws_pyd = workspace.Workspace.model_validate(ws_crdt.to_py())
     clean_input(ws_pyd)
     if ws_pyd == last_ws_input:
         return
     last_ws_input = ws_pyd.model_copy(deep=True)
     await workspace.execute(ws_pyd)
-    for nc, np in zip(ws_crdt['nodes'], ws_pyd.nodes):
-        if 'data' not in nc:
-            nc['data'] = pycrdt.Map()
+    for nc, np in zip(ws_crdt["nodes"], ws_pyd.nodes):
+        if "data" not in nc:
+            nc["data"] = pycrdt.Map()
         # Display is added as an opaque Box.
-        nc['data']['display'] = np.data.display
-        nc['data']['error'] = np.data.error
+        nc["data"]["display"] = np.data.display
+        nc["data"]["error"] = np.data.error
+
 
 @contextlib.asynccontextmanager
 async def lifespan(app):
     async with websocket_server:
         yield
 
+
 def sanitize_path(path):
     return os.path.relpath(os.path.normpath(os.path.join("/", path)), "/")
 
+
 @router.websocket("/ws/crdt/{room_name}")
 async def crdt_websocket(websocket: fastapi.WebSocket, room_name: str):
     room_name = sanitize_path(room_name)
-    await asgi_server({'path': room_name}, websocket._receive, websocket._send)
+    await asgi_server({"path": room_name}, websocket._receive, websocket._send)

web/app/globals.css

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-} */
-
 body {
   color: var(--foreground);
   background: var(--background);
@@ -23,14 +11,15 @@ body {
 .top-bar {
   display: flex;
   justify-content: space-between;
-  background: oklch(30% 0.13 230);
-  color: white;
+  align-items: center;
 }
 .ws-name {
   font-size: 1.5em;
+  flex: 1;
+  color: white;
 }
-.ws-name img {
-  height: 1.5em;
+.top-bar .logo img {
+  height: 2em;
   vertical-align: middle;
   margin: 4px;
 }
@@ -45,7 +34,87 @@ body {
   align-items: center;
 }
 .tools a {
-  color: oklch(75% 0.13 230);
   font-size: 1.5em;
   padding: 0 10px;
 }
+.error {
+  background: #ffdddd;
+  padding: 8px;
+  font-size: 12px;
+}
+.title-icon {
+  margin-left: 5px;
+  float: right;
+}
+.node-container {
+  padding: 8px;
+  position: relative;
+}
+.lynxkite-node {
+  box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  background: white;
+}
+.expanded .lynxkite-node {
+  overflow-y: auto;
+  height: 100%;
+}
+.lynxkite-node .title {
+  /* background: oklch(75% 0.2 55); */
+  font-weight: bold;
+  padding: 8px;
+}
+.handle-name {
+  font-size: 10px;
+  color: black;
+  letter-spacing: 0.05em;
+  text-align: right;
+  white-space: nowrap;
+  position: absolute;
+  top: -5px;
+  backdrop-filter: blur(10px);
+  padding: 2px 8px;
+  border-radius: 4px;
+  visibility: hidden;
+}
+.left .handle-name {
+  right: 20px;
+}
+.right .handle-name {
+  left: 20px;
+}
+.top .handle-name,
+.bottom .handle-name {
+  top: -5px;
+  left: 5px;
+  backdrop-filter: none;
+}
+.node-container:hover .handle-name {
+  visibility: visible;
+}
+.node-resizer {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  cursor: nwse-resize;
+}
+.lynxkite-node {
+.param {
+  padding: 4px 8px 4px 8px;
+  display: block;
+}
+.param-name {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  margin-left: 10px;
+  width: fit-content;
+  padding: 2px 8px;
+  border-radius: 4px 4px 0 0;
+  ;
+}
+.collapsed-param {
+  min-height: 20px;
+  line-height: 10px;
+}
+}

web/app/layout.tsx

@@ -1,21 +1,9 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "LynxKite MM",
+  description: "From Lynx Analytics",
 };
 
 export default function RootLayout({
@@ -26,7 +14,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`antialiased`}
       >
         {children}
       </body>

web/app/workspace/EnvironmentSelector.tsx

@@ -1,12 +1,15 @@
 export default function EnvironmentSelector(props: { options: string[], value: string, onChange: (val: string) => void }) {
   return (
-    <select className="form-select form-select-sm"
-      value={props.value}
-      onChange={(evt) => props.onChange(evt.currentTarget.value)}
-    >
-      {props.options.map(option =>
-        <option key={option} value={option}>{option}</option>
-      )}
-    </select>
+    <>
+      <select className="select w-full max-w-xs"
+        name="workspace-env"
+        value={props.value}
+        onChange={(evt) => props.onChange(evt.currentTarget.value)}
+      >
+        {props.options.map(option =>
+          <option key={option} value={option}>{option}</option>
+        )}
+      </select>
+    </>
   );
 }

web/app/workspace/page.tsx

@@ -1,224 +1,7 @@
 'use client';
-import useSWR from 'swr';
 import { useMemo } from "react";
-import {
-  ReactFlow,
-  useNodesState,
-  useEdgesState,
-  Controls,
-  MiniMap,
-  MarkerType,
-  useReactFlow,
-  type XYPosition,
-  type Node,
-  type Edge,
-  type Connection,
-  type NodeTypes,
-} from '@xyflow/React';
-// @ts-ignore
-import ArrowBack from '~icons/tabler/arrow-back.jsx';
-// @ts-ignore
-import Backspace from '~icons/tabler/backspace.jsx';
-// @ts-ignore
-import Atom from '~icons/tabler/atom.jsx';
-// import NodeWithParams from './NodeWithParams';
-// import NodeWithVisualization from './NodeWithVisualization';
-// import NodeWithImage from './NodeWithImage';
-// import NodeWithTableView from './NodeWithTableView';
-// import NodeWithSubFlow from './NodeWithSubFlow';
-// import NodeWithArea from './NodeWithArea';
-// import NodeSearch from './NodeSearch';
-import EnvironmentSelector from './EnvironmentSelector';
-import '@xyflow/react/dist/style.css';
+import dynamic from 'next/dynamic';
 
-export default function Home() {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-
-  let path = '';
-
-  // const { screenToFlowPosition } = useReactFlow();
-  // const queryClient = useQueryClient();
-  // const backendWorkspace = useQuery(['workspace', path], async () => {
-  //   const res = await fetch(`/api/load?path=${path}`);
-  //   return res.json();
-  // }, { staleTime: 10000, retry: false });
-  // const mutation = useMutation(async (update) => {
-  //   const res = await fetch('/api/save', {
-  //     method: 'POST',
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //     },
-  //     body: JSON.stringify(update),
-  //   });
-  //   return await res.json();
-  // }, {
-  //   onSuccess: data => queryClient.setQueryData(['workspace', path], data),
-  // });
-
-  // const nodeTypes: NodeTypes = {
-  //   basic: NodeWithParams,
-  //   visualization: NodeWithVisualization,
-  //   image: NodeWithImage,
-  //   table_view: NodeWithTableView,
-  //   sub_flow: NodeWithSubFlow,
-  //   area: NodeWithArea,
-  // };
-
-  // const nodes = writable<Node[]>([]);
-  // const edges = writable<Edge[]>([]);
-  // let doNotSave = true;
-  // $: if ($backendWorkspace.isSuccess) {
-  //   doNotSave = true; // Change is coming from the backend.
-  //   nodes.set(JSON.parse(JSON.stringify($backendWorkspace.data?.nodes || [])));
-  //   edges.set(JSON.parse(JSON.stringify($backendWorkspace.data?.edges || [])));
-  //   doNotSave = false;
-  // }
-
-  // function closeNodeSearch() {
-  //   nodeSearchSettings = undefined;
-  // }
-  // function toggleNodeSearch({ detail: { event } }) {
-  //   if (nodeSearchSettings) {
-  //     closeNodeSearch();
-  //     return;
-  //   }
-  //   event.preventDefault();
-  //   nodeSearchSettings = {
-  //     pos: { x: event.clientX, y: event.clientY },
-  //     boxes: $catalog.data[$backendWorkspace.data?.env],
-  //   };
-  // }
-  // function addNode(e) {
-  //   const meta = { ...e.detail };
-  //   nodes.update((n) => {
-  //     const node = {
-  //       type: meta.type,
-  //       data: {
-  //         meta: meta,
-  //         title: meta.name,
-  //         params: Object.fromEntries(
-  //           Object.values(meta.params).map((p) => [p.name, p.default])),
-  //       },
-  //     };
-  //     node.position = screenToFlowPosition({ x: nodeSearchSettings.pos.x, y: nodeSearchSettings.pos.y });
-  //     const title = node.data.title;
-  //     let i = 1;
-  //     node.id = `${title} ${i}`;
-  //     while (n.find((x) => x.id === node.id)) {
-  //       i += 1;
-  //       node.id = `${title} ${i}`;
-  //     }
-  //     node.parentId = nodeSearchSettings.parentId;
-  //     if (node.parentId) {
-  //       node.extent = 'parent';
-  //       const parent = n.find((x) => x.id === node.parentId);
-  //       node.position = { x: node.position.x - parent.position.x, y: node.position.y - parent.position.y };
-  //     }
-  //     return [...n, node]
-  //   });
-  //   closeNodeSearch();
-  // }
-  const fetcher = (resource: string, init?: RequestInit) => fetch(resource, init).then(res => res.json());
-  const catalog = useSWR('/api/catalog', fetcher);
-
-  // let nodeSearchSettings: {
-  //   pos: XYPosition,
-  //   boxes: any[],
-  //   parentId: string,
-  // };
-
-  // const graph = derived([nodes, edges], ([nodes, edges]) => ({ nodes, edges }));
-  // // Like JSON.stringify, but with keys sorted.
-  // function orderedJSON(obj: any) {
-  //   const allKeys = new Set();
-  //   JSON.stringify(obj, (key, value) => (allKeys.add(key), value));
-  //   return JSON.stringify(obj, Array.from(allKeys).sort());
-  // }
-  // graph.subscribe(async (g) => {
-  //   if (doNotSave) return;
-  //   const dragging = g.nodes.find((n) => n.dragging);
-  //   if (dragging) return;
-  //   const resizing = g.nodes.find((n) => n.data?.beingResized);
-  //   if (resizing) return;
-  //   scheduleSave(g);
-  // });
-  // let saveTimeout;
-  // function scheduleSave(g) {
-  //   // A slight delay, so we don't send a million requests when a node is resized, for example.
-  //   clearTimeout(saveTimeout);
-  //   saveTimeout = setTimeout(() => save(g), 500);
-  // }
-  // function save(g) {
-  //   g = JSON.parse(JSON.stringify(g));
-  //   for (const node of g.nodes) {
-  //     delete node.measured;
-  //     delete node.selected;
-  //     delete node.dragging;
-  //     delete node.beingResized;
-  //   }
-  //   for (const node of g.edges) {
-  //     delete node.markerEnd;
-  //     delete node.selected;
-  //   }
-  //   g.env = $backendWorkspace.data?.env;
-  //   const ws = orderedJSON(g);
-  //   const bd = orderedJSON($backendWorkspace.data);
-  //   if (ws === bd) return;
-  //   console.log('changed', JSON.stringify(diff(g, $backendWorkspace.data), null, 2));
-  //   $mutation.mutate({ path, ws: g });
-  // }
-  // function nodeClick(e) {
-  //   const node = e.detail.node;
-  //   const meta = node.data.meta;
-  //   if (!meta) return;
-  //   const sub_nodes = meta.sub_nodes;
-  //   if (!sub_nodes) return;
-  //   const event = e.detail.event;
-  //   if (event.target.classList.contains('title')) return;
-  //   nodeSearchSettings = {
-  //     pos: { x: event.clientX, y: event.clientY },
-  //     boxes: sub_nodes,
-  //     parentId: node.id,
-  //   };
-  // }
-  // $: parentDir = path.split('/').slice(0, -1).join('/');
-
-  const nodeTypes = useMemo(() => ({}), []);
-  return (
-
-    <div className="page">
-      <div className="top-bar">
-        <div className="ws-name">
-          <a href=""><img src="/favicon.ico" /></a>
-          {path}
-        </div>
-        <div className="tools">
-          <EnvironmentSelector
-            options={Object.keys(catalog.data || {})}
-            value={'asd'}
-            onChange={(env) => 1}
-          />
-          <a href=""><Atom /></a>
-          <a href=""><Backspace /></a>
-          <a href="#dir?path={parentDir}"><ArrowBack /></a>
-        </div>
-      </div>
-      <div style={{ height: "100%", width: '100vw' }}>
-        <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} fitView
-          proOptions={{ hideAttribution: true }}
-          maxZoom={3}
-          minZoom={0.3}
-          defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
-        >
-          <Controls />
-          <MiniMap />
-          {/* {#if nodeSearchSettings}
-          <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} on:cancel={closeNodeSearch} on:add={addNode} />
-          {/if} */}
-        </ReactFlow>
-      </div>
-    </div>
-
-  );
-}
+export default dynamic(() => import('./Workspace'), {
+  ssr: false,
+});

web/package-lock.json

@@ -6932,6 +6932,111 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.3.tgz",
+      "integrity": "sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.3.tgz",
+      "integrity": "sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.3.tgz",
+      "integrity": "sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.3.tgz",
+      "integrity": "sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.3.tgz",
+      "integrity": "sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.3.tgz",
+      "integrity": "sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.3.tgz",
+      "integrity": "sha512-VNAz+HN4OGgvZs6MOoVfnn41kBzT+M+tB+OK4cww6DNyWS6wKaDpaAm/qLeOUbnMh0oVx1+mg0uoYARF69dJyA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

web/tailwind.config.js

@@ -1,8 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  darkMode: 'selector',
+  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {},
   },
   plugins: [require('daisyui')],
+  daisyui: {
+    themes: [
+      {
+        lynxkite: {
+          primary: 'oklch(75% 0.2 55)',
+          secondary: 'oklch(75% 0.13 230)',
+          accent: 'oklch(55% 0.25 320)',
+          neutral: 'oklch(35% 0.1 240)',
+          'base-100': '#ffffff',
+        },
+      },
+    ],
+  },
 };

web/tsconfig.json

@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "noImplicitAny": false,
     "plugins": [
       {
         "name": "next"