feat: add custom editor / visualizer to vscode extension

.eslintignore

@@ -12,3 +12,11 @@
 /packages/safe-ds-eda/consts.config.ts
 /packages/safe-ds-eda/vite.config.ts
 /packages/safe-ds-eda/types/*.d.ts
+
+/packages/safe-ds-editor/svelte.config.js
+/packages/safe-ds-editor/vite.config.js
+/packages/safe-ds-editor/tailwind.config.ts
+/packages/safe-ds-editor/postcss.config.js
+/packages/safe-ds-editor/**/*.d.ts
+/packages/safe-ds-editor/migrationTools/**
+/packages/safe-ds-editor/src/tailwind.css

.eslintrc.cjs

@@ -25,5 +25,12 @@ module.exports = {
                 'import/no-unresolved': 'off',
             },
         },
+        {
+            files: ['packages/safe-ds-editor/src/**'],
+            rules: {
+                'import/no-default-export': 'off',
+                'no-console': 'off',
+            },
+        },
     ],
 };

.gitignore

@@ -5,6 +5,8 @@
 # VSCode
 .vscode/**/*
 !.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/settings.json
 
 # Compilation/build outputs
 build/
@@ -14,6 +16,7 @@ dist-ssr/
 generated/
 !**/tests/resources/generation/**/generated/
 lib/
+!packages/safe-ds-editor/src/lib/
 out/
 *.tsbuildinfo
 *.vsix

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["svelte.svelte-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
+}

packages/safe-ds-editor/.prettierrc.json

@@ -0,0 +1,27 @@
+{
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "quoteProps": "as-needed",
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always",
+    "requirePragma": false,
+    "insertPragma": false,
+    "proseWrap": "preserve",
+    "htmlWhitespaceSensitivity": "css",
+    "vueIndentScriptAndStyle": true,
+    "endOfLine": "lf",
+    "embeddedLanguageFormatting": "auto",
+    "overrides": [
+        {
+            "files": ["*.yaml", "*.yml"],
+            "options": { "tabWidth": 2 }
+        }
+    ],
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
+}

packages/safe-ds-editor/components.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "https://shadcn-svelte.com/schema.json",
+    "style": "new-york",
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "src/global.css",
+        "baseColor": "slate"
+    },
+    "aliases": {
+        "components": "$src/components",
+        "utils": "$pages/utils"
+    },
+    "typescript": true
+}

packages/safe-ds-editor/migrationTools/copyToExtension.js

@@ -0,0 +1,25 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const sourceDir = path.join(__dirname, '..', 'dist');
+const distDir = path.join(__dirname, '..', '..', 'safe-ds-vscode', 'dist');
+const targetDir = path.join(distDir, 'custom-editor');
+
+console.log(`Removing old files from <safe-ds-vscode>...`);
+fs.ensureDirSync(distDir);
+fs.emptyDirSync(targetDir);
+
+console.log(`Copying webview from <safe-ds-editor> to <safe-ds-vscode>...`);
+fs.copy(sourceDir, targetDir, { overwrite: true })
+    .then(() => console.log('Done'))
+    .catch((err) => {
+        console.error('Error during copying:', err);
+        process.exit(1);
+    });
+
+// npm run watch script: "watch": "concurrently -n Vite,Nodemon -c blue,red \"vite build --watch\" \"npx nodemon --quiet --watch dist migrationTools/copyToExtension.js\"",

packages/safe-ds-editor/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@safe-ds/custom-editor",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build && node migrationTools/copyToExtension.js",
+        "watch": "concurrently -n Vite,Nodemon -c blue,red \"vite build --watch\" \"npx nodemon --quiet --watch dist migrationTools/copyToExtension.js\"",
+        "preview": "vite preview",
+        "check": "svelte-check --tsconfig ./tsconfig.json",
+        "clean": "shx rm -rf dist",
+        "build:clean": "npm run clean && npm run build",
+        "copyToExtension": "node migrationTools/copyToExtension.js"
+    },
+    "devDependencies": {
+        "@magidoc/plugin-svelte-marked": "^6.1.0",
+        "@safe-ds/lang": ">=0.3.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.2",
+        "@tsconfig/svelte": "^5.0.2",
+        "autoprefixer": "^10.4.17",
+        "bits-ui": "^0.21.16",
+        "clsx": "^2.1.0",
+        "concurrently": "^8.2.2",
+        "fs-extra": "^11.2.0",
+        "nodemon": "^3.0.3",
+        "postcss": "^8.4.33",
+        "prettier-plugin-svelte": "^3.2.1",
+        "prettier-plugin-tailwindcss": "^0.5.11",
+        "radix-icons-svelte": "^1.2.1",
+        "svelte": "^4.2.9",
+        "svelte-check": "^3.6.3",
+        "svelte-preprocess": "^5.1.3",
+        "svelte-radix": "^1.1.1",
+        "svelte-svg": "^0.0.7",
+        "tailwind-merge": "^2.2.1",
+        "tailwind-variants": "^0.1.20",
+        "tailwindcss": "^3.4.1",
+        "terser": "^5.28.1",
+        "tslib": "^2.6.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.12"
+    },
+    "dependencies": {
+        "@xyflow/svelte": "^0.1.13",
+        "elkjs": "^0.9.3",
+        "flatten": "^1.0.3",
+        "marked": "^14.0.0",
+        "paneforge": "^0.0.5"
+    },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "^4.24.2"
+    }
+}

packages/safe-ds-editor/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/safe-ds-editor/samples/complex-titanic.sds

@@ -0,0 +1,162 @@
+package evaluation
+
+pipeline ensemblingStacking {
+// Bug -> Indentation of Comment is wrong
+
+    val trainDataPre1 = Table.fromCsvFile("./train.csv");
+    val testDataPre1 = Table.fromCsvFile("./test.csv");
+
+    val _t1Heatmap = trainDataPre1.plot.correlationHeatmap();
+    val _t1Boxplot = testDataPre1.plot.boxPlots();
+
+    val imputerEmpty = SimpleImputer(
+        SimpleImputer.Strategy.Constant(""),
+        "Cabin"
+    );
+
+    _, val trainDataPre = imputerEmpty.fitAndTransform(trainDataPre1);
+    _, val testDataPre = imputerEmpty.fitAndTransform(testDataPre1);
+
+
+    val trainName = trainDataPre.getColumn("Name").rename("Name_length");
+    val testName = testDataPre.getColumn("Name").rename("Name_length");
+
+    val trainNameLength = trainName.transform((cell) -> cell.str.length());
+    val testNameLength = testName.transform((cell) -> cell.str.length());
+
+    val trainCabin = trainDataPre.getColumn("Cabin").rename("Cabin_length");
+    val testCabin = testDataPre.getColumn("Cabin").rename("Cabin_length");
+
+    val trainHasCabin = trainCabin.transform((cell) -> cell.str.length() > 0);
+    val testHasCabin = testCabin.transform((cell) -> cell.str.length() > 0);
+
+// Bug -> multiple entries in array lack auto complete
+    val trainDataNoTransform = trainDataPre.addColumns(
+        [trainNameLength, trainHasCabin]
+    );
+    val testDataNoTransform = testDataPre.addColumns(
+        [testNameLength, testHasCabin]
+    );
+
+    val trainDataT1 = trainDataNoTransform.addComputedColumn("FamilySize", (row) -> row["SibSp"] + row["Parch"]);
+    val testDataT1 = testDataNoTransform.addComputedColumn("FamilySize", (row) -> row["SibSp"] + row["Parch"]);
+
+    val trainDataT2 = trainDataT1.addComputedColumn("IsAlone", (row) -> row["FamilySize"] == 1);
+    val testDataT2 = testDataT1.addComputedColumn("IsAlone", (row) -> row["FamilySize"] == 1);
+
+    val _t2Heatmap = trainDataT2.plot.correlationHeatmap();
+    val _t2Boxplot = testDataT2.plot.boxPlots();
+
+    val imputerEmbark = SimpleImputer(
+        SimpleImputer.Strategy.Constant("S"),
+        "Embarked"
+    );
+    _, val trainDataT3 = imputerEmbark.fitAndTransform(trainDataT2);
+    _, val testDataT3 = imputerEmbark.fitAndTransform(testDataT2);
+
+    val imputerFare = SimpleImputer(
+        SimpleImputer.Strategy.Median,
+        ["Fare", "Age"]
+    );
+    _, val trainDataT4 = imputerFare.fitAndTransform(trainDataT3);
+    _, val testDataT4 = imputerFare.fitAndTransform(testDataT3);
+
+    val discretizerFare = Discretizer(
+        4,
+        ["Fare"]
+    );
+    _, val trainDataT5 = discretizerFare.fitAndTransform(trainDataT4);
+    _, val testDataT5 = discretizerFare.fitAndTransform(testDataT4);
+
+    val discretizerAge = Discretizer(
+        5,
+        ["Age"]
+    );
+    _, val trainDataT6 = discretizerAge.fitAndTransform(trainDataT5);
+    _, val testDataT6 = discretizerAge.fitAndTransform(testDataT5);
+
+    val _t6Heatmap = trainDataT6.plot.correlationHeatmap();
+    val _t6Boxplot = testDataT6.plot.boxPlots();
+
+    val trainDataT7 = trainDataT6.addComputedColumn("Rare", (row) {
+        yield rareTitleDetected = row["Name"].str.contains("Lady") or row["Name"].str.contains("Countess") or row["Name"].str.contains("Capt") or row["Name"].str.contains("Col") or row["Name"].str.contains("Don") or row["Name"].str.contains("Dr") or row["Name"].str.contains("Major") or row["Name"].str.contains("Rev") or row["Name"].str.contains("Sir") or row["Name"].str.contains("Jonkheer") or row["Name"].str.contains("Dona");
+    });
+    val testDataT7 = testDataT6.addComputedColumn("Rare", (row) {
+        yield rareTitleDetected = row["Name"].str.contains("Lady") or row["Name"].str.contains("Countess") or row["Name"].str.contains("Capt") or row["Name"].str.contains("Col") or row["Name"].str.contains("Don") or row["Name"].str.contains("Dr") or row["Name"].str.contains("Major") or row["Name"].str.contains("Rev") or row["Name"].str.contains("Sir") or row["Name"].str.contains("Jonkheer") or row["Name"].str.contains("Dona");
+    });
+
+    val subsetTrain = trainDataT7.removeColumnsExcept(
+        ["Sex", "Embarked"]
+    );
+    val subsetTest = testDataT7.removeColumnsExcept(
+        ["Sex", "Embarked"]
+    );
+    val combinedSex = subsetTrain.addTableAsRows(subsetTest);
+
+    val labelEncoderSex = LabelEncoder("Sex").fit(combinedSex);
+    val trainDataT8 = labelEncoderSex.transform(trainDataT7);
+    val testDataT8 = labelEncoderSex.transform(testDataT7);
+
+    val labelEncoderEmbarked = LabelEncoder("Embarked").fit(combinedSex);
+    val trainDataT9 = labelEncoderEmbarked.transform(trainDataT8);
+    val testDataT9 = labelEncoderEmbarked.transform(testDataT8);
+
+    val trainDataT10 = trainDataT9.removeColumns(
+        ["Ticket", "Cabin", "SibSp"]
+    );
+    val testDataT10 = testDataT9.removeColumns(
+        ["Ticket", "Cabin", "SibSp"]
+    );
+
+    val _t10Heatmap = trainDataT10.plot.correlationHeatmap();
+    val _t10Boxplot = trainDataT10.plot.boxPlots();
+
+    val trainTagged = trainDataT10.toTabularDataset(
+        "Survived",
+        ["PassengerId"]
+    );
+
+    val rf = RandomForestClassifier(500).fit(trainTagged);
+    val ab = AdaBoostClassifier(maxLearnerCount = 500, learningRate = 0.75).fit(trainTagged);
+    val gb = GradientBoostingClassifier(500).fit(trainTagged);
+    val svm = SupportVectorClassifier(
+        0.025,
+        kernel = SupportVectorClassifier.Kernel.Linear
+    ).fit(trainTagged);
+
+    val _rfAccuracy = rf.accuracy(testDataT10);
+    val _abAccuracy = ab.accuracy(testDataT10);
+    val _gbAccuracy = gb.accuracy(testDataT10);
+    val _svmAccuracy = svm.accuracy(testDataT10);
+
+    val rfResult = rf.predict(testDataT10).toTable().removeColumnsExcept(
+        ["PassengerId", "Survived"]
+    ).renameColumn("Survived", "Survived_RF");
+    val abResult = rf.predict(testDataT10).toTable().removeColumnsExcept(
+        ["PassengerId", "Survived"]
+    ).renameColumn("Survived", "Survived_AB");
+    val gbResult = rf.predict(testDataT10).toTable().removeColumnsExcept(
+        ["PassengerId", "Survived"]
+    ).renameColumn("Survived", "Survived_GB");
+    val svmResult = rf.predict(testDataT10).toTable().removeColumnsExcept(
+        ["PassengerId", "Survived"]
+    ).renameColumn("Survived", "Survived_SVM");
+
+    val collection = rfResult.join(
+        abResult,
+        "PassengerId",
+        "PassengerId"
+    ).join(
+        gbResult,
+        "PassengerId",
+        "PassengerId"
+    ).join(
+        svmResult,
+        "PassengerId",
+        "PassengerId"
+    );
+
+    collection.toCsvFile("./result.csv");
+    trainDataT10.toCsvFile("./trainDataset.csv");
+    testDataT10.toCsvFile("./testDataset.csv");
+}

packages/safe-ds-editor/samples/segment_test.sds

@@ -0,0 +1,33 @@
+package segmentTest
+
+segment doStuff(
+    inputPath: String,
+    ouputPath: String,
+    sliceSize: Int
+) -> (score: Float) {
+    val labeledImages = Table.fromCsvFile(inputPath);
+    val subsetImages = labeledImages.sliceRows(0, sliceSize);
+    val train, val validate = subsetImages.splitRows(0.8);
+
+    val modelUntrained = SupportVectorClassifier();
+    val modelTrained = modelUntrained.fit(
+        train.toTabularDataset(targetName = "target")
+    );
+    yield score = modelTrained.accuracy(validate);
+
+    val testdata = Table.fromCsvFile("beginner_classification/test.csv");
+    val testdataTransformed = testdata.transformColumn("pixel0", (row) -> row.add(1));
+    val resultTable = modelTrained.predict(testdataTransformed);
+
+    resultTable.toTable().toCsvFile(ouputPath);
+}
+
+pipeline smallTest {
+
+    val path = "beginner_classification/train.csv";
+    val score = doStuff(
+        path,
+        "output/beginner_classification.csv",
+        5000
+    );
+}