​

Frontend Code Reference

The front-end is a SvelteKit single-page application that lives entirely under frontend/. Vite handles development bundling and production builds. This document examines the most important components and patterns.

​

1. Editor Integration

​

1.1 lib/components/MonacoEditor.svelte

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

  export let value = "";
  export let language = "python";
  export let theme = "vs-dark";
  let editor: monaco.editor.IStandaloneCodeEditor;

  onMount(() => {
    editor = monaco.editor.create(editorContainer, {
      value,
      language,
      theme,
      automaticLayout: true,
      minimap: { enabled: false }
    });
  });
  onDestroy(() => editor?.dispose());
</script>
<div bind:this={editorContainer} class="w-full h-full" />

Highlights:

• Uses automaticLayout to handle resize events from the split-pane container.
• Exposes value via two-way binding to parent components.
• Language changes trigger monaco.editor.setModelLanguage for syntax highlighting.

​

1.2 Python Completions

lib/pythonLanguageFeatures.ts registers statically defined snippets. Example:

monaco.languages.registerCompletionItemProvider("python", {
  provideCompletionItems() {
    return {
      suggestions: [
        {
          label: "pl.scan_parquet",
          kind: monaco.languages.CompletionItemKind.Function,
          insertText: "pl.scan_parquet(\"${1:path}\")",
          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
        }
      ]
    };
  }
});

​

2. Workspace Layout (Route +page.svelte)

The default route / hosts the entire workspace. Key reactive variables:

let tabs: Tab[] = [homeTab];  // each { name, language, value, output, dirty }
let activeTab = 0;
let datasets: DatasetMeta[] = [];

Drag-and-drop reordering is implemented via native HTML5 DnD (handleDragStart, handleDragOver), avoiding external libraries.

Execution flow:

1. User presses ⌘↵ or clicks Run.
2. executeCode() builds payload { code, language } and calls api.fetchApi("/execute", …).
3. Response stdout is appended to tabs[activeTab].output.
4. saveCodeVersion() persists snapshot when execution completes.

​

3. Dataset Management Components

​

3.1 DataImportModal.svelte

Handles drag-drop as well as file picker. Prior to upload, it checks existence via HEAD /api/check-file.

const checkFileExists = async (fileName: string) => {
  const res = await fetchApi(`/check-file?filename=${fileName}`);
  return res.status === 200;
};

If a file collision occurs, the user is prompted to overwrite.

​

3.2 DataframeView.svelte

• Paginated table rendering using native <table> (no DataTables dependency).
• Automatically right-aligns numeric columns via isNumeric() helper.
• Fetches data via GET /api/dataset/data with offset/limit props.

​

4. Version History Component

VersionHistory.svelte consumes GET /api/list-versions/<tab> and lazy-loads file contents only when the accordion row is expanded (loadVersion). It dispatches a loadVersion custom event; the parent RightSidebar listens and replaces the active tab’s code buffer.

​

5. Global Stores

• navigation.ts – Contains hasUnsavedChanges used for ConfirmNavigationModal.
• editorStore.ts – Ring-buffer of recently closed tabs (createClosedTabsStore). Enables Restore Tab (⌘⇧T) functionality.

​

6. Styling

Tailwind is configured via tailwind.config.ts with JIT mode. PostCSS plugins (postcss.config.js) ensure vendor prefixing.

​

7. Hotkeys Cheat-Sheet

Implemented inside +page.svelte::handleKeyboardShortcut:

​

8. Extending the Front-End

• Theme Switcher – Bind editor.updateOptions({ theme }) to a store and persist user preference.
• Multi-cursor Execution – Evaluate only selected text by reading editor.getSelection().
• Real-time Logs – Hook WebSocket output to an OutputPane.svelte component.

​

Conclusion

The SvelteKit front-end is concise (~3 500 LoC including templates) yet feature-rich thanks to strong composition and reactivity patterns. Combined with the Monaco editor, it delivers a desktop-grade coding experience directly in the browser.