feat: webview for the graphical editor

.eslintignore

@@ -12,3 +12,8 @@
 /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/postcss.config.js
+/packages/safe-ds-editor/vite.config.js
+/packages/safe-ds-editor/tailwind.config.ts
+/packages/safe-ds-editor/types/**/*.d.ts
+/packages/safe-ds-editor/svelte.config.js

.eslintrc.cjs

@@ -25,5 +25,16 @@ module.exports = {
                 'import/no-unresolved': 'off',
             },
         },
+        {
+            files: ['packages/safe-ds-editor/src/**/*.css'],
+            rules: {
+                'at-rule-no-unknown': [
+                    0,
+                    {
+                        ignoreAtRules: ['tailwind', 'apply', 'layer'],
+                    },
+                ],
+            },
+        },
     ],
 };

package.json

@@ -37,6 +37,7 @@
     "prettier": "@lars-reimann/prettier-config-svelte",
     "dependencies": {
         "@safe-ds/eda": "^0.0.0",
+        "@safe-ds/lang": "workspace:*",
         "vite": "^5.4.14"
     }
 }

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/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@safe-ds/graphical-editor",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "watch": "vite build --watch",
+        "preview": "vite preview",
+        "check": "svelte-check --tsconfig ./tsconfig.json",
+        "clean": "shx rm -rf dist",
+        "build:clean": "npm run clean && npm run build"
+    },
+    "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
+    );
+}

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

@@ -0,0 +1,39 @@
+package evaluation
+
+pipeline titanicSimple {
+
+    val rawDataset = Table.fromCsvFile("./titanic-simple-train.csv");
+
+    val _boxplot = rawDataset.plot.boxPlots();
+    val _scatterplot = rawDataset.plot.scatterPlot(
+        "Age",
+        ["Survived"]
+    );
+
+    val reducedDataset = rawDataset.removeColumnsExcept(
+        ["PassengerId", "Age", "Survived"]
+    );
+
+    val imputer = SimpleImputer(
+        SimpleImputer.Strategy.Median,
+        ["Age"]
+    );
+    _, val filledDataset = imputer.fitAndTransform(reducedDataset);
+
+    val discretizer = Discretizer(
+        3,
+        ["Age"]
+    );
+    _, val binnedDataset = discretizer.fitAndTransform(filledDataset);
+
+    val trainDataset = binnedDataset.toTabularDataset(
+        "Survived",
+        ["PassengerId"]
+    );
+    val randomForest = RandomForestClassifier(500).fit(trainDataset);
+
+    val testDataset = Table.fromCsvFile("./titanic-simple-test.csv");
+
+    val result = randomForest.predict(testDataset).toTable();
+    result.toCsvFile("./result.csv");
+}

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

@@ -0,0 +1,20 @@
+package smallTest
+
+pipeline smallTest {
+    val path = "beginner_classification/train.csv";
+    val labeledImages = Table.fromCsvFile(path);
+    val subsetImages = labeledImages.sliceRows(0, 5000);
+    val train, val validate = subsetImages.splitRows(0.8);
+
+    val modelUntrained = SupportVectorClassifier(2.0);
+    val modelTrained = modelUntrained.fit(
+        train.toTabularDataset(targetName = "target")
+    );
+    val _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("output/beginner_classification.csv");
+}

packages/safe-ds-editor/src/assets/README.md

@@ -0,0 +1,24 @@
+# Problem mit .svg Dateien
+
+Bei der Verwendung von .svg Dateien besteht das Problem, dass es sich hier um assets handelt, die, wenn sie auf die typische Art und Weise in den Webview mit eingebunden werden würden, vom Extension Prozess signiert werden müssten.
+
+## Lösungsansatz
+
+Die svgs werden als .svelte Dateien abgespeichert und als Komponenten behandelt. Diese werden dann über eine zentrale Komponente zugänglich gemacht, um dynamisch die korrekte SVG Komponente auswählen zu können.
+
+## Verwendung
+
+Diese Komponente muss mit dem Namen der SVG Komponente konfiguriert werden.
+
+```svelte
+<script lang="ts">
+    import CategoryIcon from 'assets/category/categoryIcon.svelte'
+</script>
+
+<div>
+    <CategoryIcon name={"Svg Name"}>
+</div>
+```
+
+## Theming
+Beim Hinzufügen neuer SVG's ist darauf zu achten, dass das bisher verwendete Theming beibehalten wird. So wird die Farbe via stroke-color definiert. Es sind daher alle hardkodierten Benennungen von stroke-color zu entfernen. Sollte ein SVG eine fill Farbe verwenden, so muss diese auf "currentColor" gesetzt werden. Auf diese Weise gleicht sich die fill-color automatisch der stroke-color an. Es muss außerdem className als prop übergeben werden um das externe Styling zu ermöglichen.