refactor code, change readme

FUB-HCC · Sep 15, 2021 · f65602d · f65602d
1 parent 14e7278
commit f65602d
Show file tree

Hide file tree

Showing 46 changed files with 21,587 additions and 10,337 deletions.
diff --git a/.eslintcache b/.eslintcache
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,6 +22,10 @@
     "rules": {
         // note you must disable the base rule as it can report incorrect errors
         "no-use-before-define": "off",
-        "@typescript-eslint/no-use-before-define": ["error"]
+        "@typescript-eslint/no-use-before-define": ["error"],
+        "camelcase": "off",
+        "@typescript-eslint/camelcase": ["off"],
+        "eqeqeq": "warn",
+        "space-before-function-paren": "off"
       }
 }
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Grant Custer
+Copyright (c) 2021 Daniel Stachnik
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,10 +1,18 @@
-Code for an interactive [UMAP](https://github.com/lmcinnes/umap) visualization of the MNIST data set. Demo at [https://grantcuster.github.io/umap-explorer/](https://grantcuster.github.io/umap-explorer/). You can read more about the demo in [the about section](https://grantcuster.github.io/umap-explorer/#about).
+# Interactive Visualization Interface for Text Exploration and Annotation
+
+This project was created for my bachelor thesis. It builds on top of the (UMAP Explorer)[https://github.com/GrantCuster/umap-explorer] and was used as a prototype to elicit explanation needs of users. To find out more, check out the (thesis)[thesis/thesis_main.pdf].
 
 ## A rough guide to the code
 
-The demo app is a React app. It uses a `src/Data.js` to fetch the data and `src/Layout.js` to handle the layout of the page. The three.js visualization code is in `src/Projection.js`. The texture atlases are in the public folder as images. I also included the iPython notebook files I used to generate the texture atlases (`making_mnist_images.ipynb`) and to download the UMAP embeddings (`plot_mnist_example.ipynb`).
+![uml class diagram](uml/components.png)
+
+The demo app is a React app. It uses `src/Data.js` to fetch the data and `src/Layout.js` to handle the layout of the page. The three.js visualization code is in `src/Projection.js`. The data is available as json files in the `public` folder. The data was created using a text processing pipeline developed at HCI lab of FU Berlin.
+
+## Running the demo page
+
+Open defo10.github.io/interface-for-text-exploration-and-annotation
 
-## Running the app
+## Running the app locally
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/plot_mnist_example.ipynb b/plot_mnist_example.ipynb
diff --git a/src/About.js b/src/About.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/App.js → src/App.tsx b/src/App.js → src/App.tsx
diff --git a/src/Content.js b/src/Content.js
diff --git a/src/Data.tsx b/src/Data.tsx
@@ -1,4 +1,5 @@
-import { constants } from 'buffer'
+// this class is responsible for loading all data
+// and parsing it into the right format
 import * as d3 from 'd3'
 import * as _ from 'lodash'
 import lunr from 'lunr'
@@ -192,10 +193,10 @@ export default class Data extends Component<any, State> {
   pushToDataChanged (newData: DataChanged) {
     const alreadyExisting = _.find(this.state.dataChanged, ['i', newData.i])
     const newDataChanged = _.without(this.state.dataChanged, alreadyExisting)
-    if (!(
-      alreadyExisting && alreadyExisting.oldLabel.label_kmedoids == newData.newLabel.label_kmedoids || // if users reverts change, skip
-      !alreadyExisting && newData.oldLabel.label_kmedoids == newData.newLabel.label_kmedoids // if wasnt changed before but has no change either, skip
-    )) newDataChanged.push(newData)
+
+    const userRevertedChange = alreadyExisting && alreadyExisting.oldLabel.label_kmedoids == newData.newLabel.label_kmedoids
+    const noChange = !alreadyExisting && newData.oldLabel.label_kmedoids == newData.newLabel.label_kmedoids
+    if (!userRevertedChange || noChange) newDataChanged.push(newData)
 
     // if new cluster, set clusters
     if (!this.state.clusters[newData.newLabel.label_kmedoids]) {
@@ -505,6 +506,7 @@ export default class Data extends Component<any, State> {
 
       const distances = coordinates.map(
         (coord) => {
+          // eslint-disable-next-line array-callback-return
           if (this.state.labels?.[coord.index].label_kmedoids != label) return
           // is of same cluster:
           const sqrd_eucl_dist = Math.sqrt(Math.pow(coord.x - medoid_pos.x, 2) + Math.pow(coord.y - medoid_pos.y, 2))