biolab · markotoplak · Dec 18, 2023 · Dec 8, 2023 · Dec 8, 2023 · Dec 18, 2023
diff --git a/config.json b/config.json
@@ -1,6 +1,10 @@
 {
   "version": "3.36.1",
   "menu": [
+    {
+      "name": "Screenshots",
+      "url": "/screenshots/"
+    },
     {
       "name": "Examples",
       "url": "/examples/"

diff --git a/pages/screenshots/index.tsx b/pages/screenshots/index.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import styled from "styled-components";
+import { readFileSync } from "fs";
+import matter from "gray-matter";
+import getAllMdFilesInDir from "@utils/getAllMdFilesInDir";
+import Image from "@components/Image/Image";
+import getOptimizedImageAttributes, {
+  ImageProps,
+} from "@utils/images/getOptimizedImageAttributes";
+import path from "path";
+import MainLayout from "@components/UiKit/MainLayout";
+import device from "@styles/utils/breakpoints";
+import ImageGallery from "@components/ImageGallery/ImageGallery";
+import sortByWeight from "@utils/sortByWeight";
+
+interface IScreenshots {
+  title: string;
+  image: ImageProps;
+  thumbnailImage: ImageProps;
+  weight: number;
+}
+
+export async function getStaticProps() {
+  const examplesMdFiles = getAllMdFilesInDir("public/screenshots");
+
+  const screenshots: IScreenshots[] = [];
+
+  for (const file of examplesMdFiles) {
+    const dirInPublic = path.dirname(path.relative("public", file));
+    const mdFile = readFileSync(file, "utf-8");
+    const { data: frontmatter } = matter(mdFile);
+
+    screenshots.push({
+      ...frontmatter,
+      image: getOptimizedImageAttributes(
+        path.join(path.sep, dirInPublic, frontmatter.image),
+      ) as ImageProps,
+      thumbnailImage: getOptimizedImageAttributes(
+        path.join(path.sep, dirInPublic, frontmatter.thumbnailImage),
+      ) as ImageProps,
+    } as IScreenshots);
+  }
+
+  return {
+    props: {
+      screenshots: sortByWeight(screenshots),
+    },
+  };
+}
+
+export default function Examples({
+  screenshots,
+}: {
+  screenshots: IScreenshots[];
+}) {
+  return (
+    <MainLayout title="Screenshots">
+      <ImageGallery selector="[data-gallery]">
+        <StyledListWrapper>
+          {screenshots.map(({ title, image, thumbnailImage }) => (
+            <Item key={title}>
+              <a href={image.src} data-gallery>
+                <Image
+                  key={thumbnailImage.src}
+                  {...thumbnailImage}
+                  alt={title}
+                />
+              </a>
+
+              <h2>{title}</h2>
+            </Item>
+          ))}
+        </StyledListWrapper>
+      </ImageGallery>
+    </MainLayout>
+  );
+}
+
+const StyledListWrapper = styled.ul`
+  display: grid;
+  gap: 62px;
+  grid-template-columns: auto auto auto;
+  padding-top: 30px;
+  border-top: 1px solid ${({ theme }) => theme.borderColor};
+
+  @media ${device.M} {
+    grid-template-columns: auto auto;
+    gap: 48px;
+  }
+
+  @media ${device.XS} {
+    grid-template-columns: auto;
+    gap: 48px;
+  }
+`;
+
+const Item = styled.li`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  h2 {
+    text-align: center;
+    font-weight: 600;
+    margin-top: auto;
+    font-size: 18px;
+
+    @media ${device.M} {
+      font-size: 16px;
+      grid-template-columns: auto auto;
+      gap: 48px;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+`;
+
+const ItemImage = styled.div`
+  flex: 30;
+
+  img {
+    width: 100%;
+  }
+`;
diff --git a/public/screenshots/box-plot.png b/public/screenshots/box-plot.png
diff --git a/public/screenshots/box-plot.thumb.png b/public/screenshots/box-plot.thumb.png
diff --git a/public/screenshots/box_plot_displays_basic_statistics.md b/public/screenshots/box_plot_displays_basic_statistics.md
@@ -0,0 +1,6 @@
+---
+image: "box-plot.png"
+thumbnailImage: "box-plot.thumb.png"
+title: "Box plot displays basic statistics of attributes."
+weight: "60"
+---
diff --git a/public/screenshots/calibration-plot.png b/public/screenshots/calibration-plot.png
diff --git a/public/screenshots/calibration-plot.thumb.png b/public/screenshots/calibration-plot.thumb.png
diff --git a/public/screenshots/cn2.png b/public/screenshots/cn2.png
diff --git a/public/screenshots/cn2.thumb.png b/public/screenshots/cn2.thumb.png
diff --git a/public/screenshots/cn2_rule_induction.md b/public/screenshots/cn2_rule_induction.md
@@ -0,0 +1,6 @@
+---
+image: "cn2.png"
+thumbnailImage: "cn2.thumb.png"
+title: "CN2 rule induction."
+weight: "250"
+---
diff --git a/public/screenshots/concatenate.png b/public/screenshots/concatenate.png
diff --git a/public/screenshots/concatenate.thumb.png b/public/screenshots/concatenate.thumb.png
diff --git a/public/screenshots/cross_validated_calibration_plot.md b/public/screenshots/cross_validated_calibration_plot.md
@@ -0,0 +1,6 @@
+---
+image: "calibration-plot.png"
+thumbnailImage: "calibration-plot.thumb.png"
+title: "Cross-validated calibration plot."
+weight: "160"
+---
diff --git a/public/screenshots/cross_validation_and_scoring_of_classifiers.md b/public/screenshots/cross_validation_and_scoring_of_classifiers.md
@@ -0,0 +1,6 @@
+---
+image: "evaluation.png"
+thumbnailImage: "evaluation.thumb.png"
+title: "Cross-validated calibration plot."
+weight: "200"
+---
diff --git a/public/screenshots/data_can_contain_references_to_images.md b/public/screenshots/data_can_contain_references_to_images.md
@@ -0,0 +1,6 @@
+---
+image: "image-viewer.png"
+thumbnailImage: "image-viewer.thumb.png"
+title: "Data can contain references to images."
+weight: "100"
+---
diff --git a/public/screenshots/data_preprocessing_embedded_within.md b/public/screenshots/data_preprocessing_embedded_within.md
@@ -0,0 +1,6 @@
+---
+image: "pca-evaluation.png"
+thumbnailImage: "pca-evaluation.thumb.png"
+title: "Data preprocessing embedded within a learning algorithm."
+weight: "170"
+---
diff --git a/public/screenshots/data_selection_in_scatter_plot.md b/public/screenshots/data_selection_in_scatter_plot.md
@@ -0,0 +1,6 @@
+---
+image: "explorative-analysis.png"
+thumbnailImage: "explorative-analysis.thumb.png"
+title: "Data selection in Scatter Plot is visualised in a Box Plot."
+weight: "30"
+---
diff --git a/public/screenshots/evaluation.png b/public/screenshots/evaluation.png
diff --git a/public/screenshots/evaluation.thumb.png b/public/screenshots/evaluation.thumb.png
diff --git a/public/screenshots/explorative-analysis.png b/public/screenshots/explorative-analysis.png
diff --git a/public/screenshots/explorative-analysis.thumb.png b/public/screenshots/explorative-analysis.thumb.png
diff --git a/public/screenshots/explorative_analysis_with_classification.md b/public/screenshots/explorative_analysis_with_classification.md
@@ -0,0 +1,6 @@
+---
+image: "tree-explorative.png"
+thumbnailImage: "tree-explorative.thumb.png"
+title: "Explorative analysis with classification trees."
+weight: "90"
+---
diff --git a/public/screenshots/feature_scoring_for_finding_interesting.md b/public/screenshots/feature_scoring_for_finding_interesting.md
@@ -0,0 +1,6 @@
+---
+image: "rank.png"
+thumbnailImage: "rank.thumb.png"
+title: "Feature scoring for finding interesting data projections."
+weight: "180"
+---
diff --git a/public/screenshots/file.png b/public/screenshots/file.png
diff --git a/public/screenshots/file.thumb.png b/public/screenshots/file.thumb.png
diff --git a/public/screenshots/finding_common_misclassifications_of_three.md b/public/screenshots/finding_common_misclassifications_of_three.md
@@ -0,0 +1,6 @@
+---
+image: "venn-misclassified.png"
+thumbnailImage: "venn-misclassified.thumb.png"
+title: "Finding common misclassifications of three predictive models."
+weight: "220"
+---
diff --git a/public/screenshots/gradient-descent.png b/public/screenshots/gradient-descent.png
diff --git a/public/screenshots/gradient-descent.thumb.png b/public/screenshots/gradient-descent.thumb.png
diff --git a/public/screenshots/heat-map.png b/public/screenshots/heat-map.png
diff --git a/public/screenshots/heat-map.thumb.png b/public/screenshots/heat-map.thumb.png
diff --git a/public/screenshots/heatmap_visualisation.md b/public/screenshots/heatmap_visualisation.md
@@ -0,0 +1,6 @@
+---
+image: "heat-map.png"
+thumbnailImage: "heat-map.thumb.png"
+title: "Heatmap visualisation."
+weight: "80"
+---
diff --git a/public/screenshots/hierarchial_clustering_supports_interactive.md b/public/screenshots/hierarchial_clustering_supports_interactive.md
@@ -0,0 +1,6 @@
+---
+image: "hierarchical-clustering.png"
+thumbnailImage: "hierarchical-clustering.thumb.png"
+title: "Hierarchial clustering supports interactive cluster selection."
+weight: "110"
+---
diff --git a/public/screenshots/hierarchical-clustering.png b/public/screenshots/hierarchical-clustering.png
diff --git a/public/screenshots/hierarchical-clustering.thumb.png b/public/screenshots/hierarchical-clustering.thumb.png
diff --git a/public/screenshots/image-analytics.png b/public/screenshots/image-analytics.png
diff --git a/public/screenshots/image-analytics.thumb.png b/public/screenshots/image-analytics.thumb.png
diff --git a/public/screenshots/image-viewer.png b/public/screenshots/image-viewer.png
diff --git a/public/screenshots/image-viewer.thumb.png b/public/screenshots/image-viewer.thumb.png
diff --git a/public/screenshots/image_analytics_with_deep_network_embedding.md b/public/screenshots/image_analytics_with_deep_network_embedding.md
@@ -0,0 +1,6 @@
+---
+image: "image-analytics.png"
+thumbnailImage: "image-analytics.thumb.png"
+title: "Image analytics with deep-network embedding."
+weight: "300"
+---
diff --git a/public/screenshots/interactive_gradient_descent.md b/public/screenshots/interactive_gradient_descent.md
@@ -0,0 +1,6 @@
+---
+image: "gradient-descent.png"
+thumbnailImage: "gradient-descent.thumb.png"
+title: "Interactive gradient descent."
+weight: "270"
+---
diff --git a/public/screenshots/intersection_of_misclassified_data_and_data.md b/public/screenshots/intersection_of_misclassified_data_and_data.md
@@ -0,0 +1,6 @@
+---
+image: "silhouette.png"
+thumbnailImage: "silhouette.thumb.png"
+title: "Intersection of misclassified data and data with low silhouette score."
+weight: "240"
+---
diff --git a/public/screenshots/join_two_data_sets.md b/public/screenshots/join_two_data_sets.md
@@ -0,0 +1,6 @@
+---
+image: "concatenate.png"
+thumbnailImage: "concatenate.thumb.png"
+title: "Join two data sets."
+weight: "50"
+---
diff --git a/public/screenshots/k-means.png b/public/screenshots/k-means.png
diff --git a/public/screenshots/k-means.thumb.png b/public/screenshots/k-means.thumb.png
diff --git a/public/screenshots/load_and_edit_your_data.md b/public/screenshots/load_and_edit_your_data.md
@@ -0,0 +1,6 @@
+---
+image: "file.png"
+thumbnailImage: "file.thumb.png"
+title: "Load and edit your data in the File widget."
+weight: "10"
+---
diff --git a/public/screenshots/mds.png b/public/screenshots/mds.png
diff --git a/public/screenshots/mds.thumb.png b/public/screenshots/mds.thumb.png
diff --git a/public/screenshots/misclassifications.png b/public/screenshots/misclassifications.png
diff --git a/public/screenshots/misclassifications.thumb.png b/public/screenshots/misclassifications.thumb.png
diff --git a/public/screenshots/model-based-scoring.png b/public/screenshots/model-based-scoring.png
diff --git a/public/screenshots/model-based-scoring.thumb.png b/public/screenshots/model-based-scoring.thumb.png
diff --git a/public/screenshots/model_based_feature_scoring.md b/public/screenshots/model_based_feature_scoring.md
@@ -0,0 +1,6 @@
+---
+image: "model-based-scoring.png"
+thumbnailImage: "model-based-scoring.thumb.png"
+title: "Model-based feature scoring."
+weight: "190"
+---
diff --git a/public/screenshots/model_testing_and_scoring_on_a_separate_test_data_set.md b/public/screenshots/model_testing_and_scoring_on_a_separate_test_data_set.md
@@ -0,0 +1,6 @@
+---
+image: "test-train.png"
+thumbnailImage: "test-train.thumb.png"
+title: "Model testing and scoring on a separate test data set."
+weight: "230"
+---
diff --git a/public/screenshots/multidimensional_scaling_of_zoo_data_set_reveals.md b/public/screenshots/multidimensional_scaling_of_zoo_data_set_reveals.md
@@ -0,0 +1,6 @@
+---
+image: "mds.png"
+thumbnailImage: "mds.thumb.png"
+title: "Multidimensional scaling of Zoo data set reveals phylogeny groups."
+weight: "130"
+---
diff --git a/public/screenshots/orange_can_suggest_which.md b/public/screenshots/orange_can_suggest_which.md
@@ -0,0 +1,6 @@
+---
+image: "suggestion.png"
+thumbnailImage: "suggestion.thumb.png"
+title: "Orange can suggest which widget to add to the workflow."
+weight: "40"
+---
diff --git a/public/screenshots/paint-data.png b/public/screenshots/paint-data.png
diff --git a/public/screenshots/paint-data.thumb.png b/public/screenshots/paint-data.thumb.png
diff --git a/public/screenshots/paint_a_two_dimensional.md b/public/screenshots/paint_a_two_dimensional.md
@@ -0,0 +1,6 @@
+---
+image: "paint-data.png"
+thumbnailImage: "paint-data.thumb.png"
+title: "Paint a two-dimensional data set."
+weight: "20"
+---
diff --git a/public/screenshots/pca-evaluation.png b/public/screenshots/pca-evaluation.png
diff --git a/public/screenshots/pca-evaluation.thumb.png b/public/screenshots/pca-evaluation.thumb.png
diff --git a/public/screenshots/pca.png b/public/screenshots/pca.png
diff --git a/public/screenshots/pca.thumb.png b/public/screenshots/pca.thumb.png
diff --git a/public/screenshots/playing_with_paint_data_and.md b/public/screenshots/playing_with_paint_data_and.md
@@ -0,0 +1,6 @@
+---
+image: "k-means.png"
+thumbnailImage: "k-means.thumb.png"
+title: "Playing with Paint Data and an automatic selection of clusters in k-Means."
+weight: "120"
+---
diff --git a/public/screenshots/polynomial-regression.png b/public/screenshots/polynomial-regression.png
diff --git a/public/screenshots/polynomial-regression.thumb.png b/public/screenshots/polynomial-regression.thumb.png
diff --git a/public/screenshots/predicting_text_categories.md b/public/screenshots/predicting_text_categories.md
@@ -0,0 +1,6 @@
+---
+image: "text-predictions.png"
+thumbnailImage: "text-predictions.thumb.png"
+title: "Predicting text categories."
+weight: "280"
+---
diff --git a/public/screenshots/principal_component_analysis_with_scree_diagram.md b/public/screenshots/principal_component_analysis_with_scree_diagram.md
@@ -0,0 +1,6 @@
+---
+image: "pca.png"
+thumbnailImage: "pca.thumb.png"
+title: "Principal component analysis with scree diagram."
+weight: "140"
+---
diff --git a/public/screenshots/rank.png b/public/screenshots/rank.png
diff --git a/public/screenshots/rank.thumb.png b/public/screenshots/rank.thumb.png
diff --git a/public/screenshots/roc.md b/public/screenshots/roc.md
@@ -0,0 +1,6 @@
+---
+image: "roc.png"
+thumbnailImage: "roc.thumb.png"
+title: "Receiver operating characteristics (ROC) analysis."
+weight: "150"
+---
diff --git a/public/screenshots/roc.png b/public/screenshots/roc.png
diff --git a/public/screenshots/roc.thumb.png b/public/screenshots/roc.thumb.png
diff --git a/public/screenshots/showcase_for_approximation_by_regression_tree.md b/public/screenshots/showcase_for_approximation_by_regression_tree.md
@@ -0,0 +1,6 @@
+---
+image: "polynomial-regression.png"
+thumbnailImage: "polynomial-regression.thumb.png"
+title: "Showcase for approximation by regression tree."
+weight: "260"
+---
diff --git a/public/screenshots/sieve-diagram.png b/public/screenshots/sieve-diagram.png
diff --git a/public/screenshots/sieve-diagram.thumb.png b/public/screenshots/sieve-diagram.thumb.png
diff --git a/public/screenshots/sieve_diagram_on_titanic_data_set.md b/public/screenshots/sieve_diagram_on_titanic_data_set.md
@@ -0,0 +1,6 @@
+---
+image: "sieve-diagram.png"
+thumbnailImage: "sieve-diagram.thumb.png"
+title: "Sieve diagram on Titanic data set."
+weight: "70"
+---
diff --git a/public/screenshots/silhouette.png b/public/screenshots/silhouette.png
diff --git a/public/screenshots/silhouette.thumb.png b/public/screenshots/silhouette.thumb.png
diff --git a/public/screenshots/suggestion.png b/public/screenshots/suggestion.png
diff --git a/public/screenshots/suggestion.thumb.png b/public/screenshots/suggestion.thumb.png
diff --git a/public/screenshots/test-train.png b/public/screenshots/test-train.png
diff --git a/public/screenshots/test-train.thumb.png b/public/screenshots/test-train.thumb.png
diff --git a/public/screenshots/text-predictions.png b/public/screenshots/text-predictions.png
diff --git a/public/screenshots/text-predictions.thumb.png b/public/screenshots/text-predictions.thumb.png
diff --git a/public/screenshots/text-topics.png b/public/screenshots/text-topics.png
diff --git a/public/screenshots/text-topics.thumb.png b/public/screenshots/text-topics.thumb.png
diff --git a/public/screenshots/topic_modelling_of_recent_tweets.md b/public/screenshots/topic_modelling_of_recent_tweets.md
@@ -0,0 +1,6 @@
+---
+image: "text-topics.png"
+thumbnailImage: "text-topics.thumb.png"
+title: "Topic modelling of recent tweets."
+weight: "290"
+---
diff --git a/public/screenshots/tree-explorative.png b/public/screenshots/tree-explorative.png
diff --git a/public/screenshots/tree-explorative.thumb.png b/public/screenshots/tree-explorative.thumb.png
diff --git a/public/screenshots/venn-misclassified.png b/public/screenshots/venn-misclassified.png
diff --git a/public/screenshots/venn-misclassified.thumb.png b/public/screenshots/venn-misclassified.thumb.png
diff --git a/public/screenshots/visualizing_misclassifications.md b/public/screenshots/visualizing_misclassifications.md
@@ -0,0 +1,6 @@
+---
+image: "misclassifications.png"
+thumbnailImage: "misclassifications.thumb.png"
+title: "Visualizing misclassifications."
+weight: "210"
+---
diff --git a/utils/sortByWeight.tsx b/utils/sortByWeight.tsx
@@ -0,0 +1,7 @@
+export default function sortByWeight(items: any[]) {
+  if (!Array.isArray(items)) {
+    throw new Error("Item is not an array");
+  }
+
+  return items.sort((a, b) => (a.weight || 99999) - (b.weight || 99999));
+}