[[TOC]]
- Kenza Amara
- Steffen Backmann
- Rushan Wang
Construct an interactive tool where users can get familiar and play with explainability methods on GNN models for graph or node classification. Moreover, multiple explanations could be provided for a single instance to observe how the scores vary.
- Domain experts in Medicine\Biology
- Decision makers
- ML developers and ML experts
MUTAG (https://nrvis.com/download/data/labeled/Mutag.zip)
- Users can specify their need for the explanations.
- Users can select the molecule they want to explain.
- Display the loss accuracy, balance accuracy, and F1 score for the GNN model.
- Users can choose the explainability method based on the score ranking of all the methods.
- Display the Fidelity+ score and Fidelity- score of the explainability method (summary score and input score).
- Users can interact with the explanation, e.g., add and remove edges.
├── README.md
├── report.pdf
├── backend-project
│ ├── env_backend.yml
│ ├── README.md
│ ├── setup.py # main app
│ ├── pyproject.toml
│ ├── src
│ │ ├── dummy_server
│ │ │ ├── router
│ │ │ │ ├── routes.py
│ │ │ │ ├── app.py
│ │ │ │ └── __init__.py
│ │ │ └── resources
│ │ │ ├── utils
│ │ │ │ ├── eval_utils.py
│ │ │ │ ├── gen_utils.py
│ │ │ │ └── __init__.py
│ │ │ ├── embedding_data.py
│ │ │ ├── evaluate.py
│ │ │ ├── model.py
│ │ │ ├── mol_data.py
│ │ │ ├── mol_dataset.py
│ │ │ ├── process_mask.py
│ │ │ ├── scatter_data.py
│ │ │ ├── visualize_mol.py
│ │ │ └── __init__.py
│ │ └── __init__.py
│ ├── data
│ │ ├── masks
│ │ │ ├── basicgnnexplainer
│ │ │ │ ├── mask_mutag_gat_basicgnnexplainer_model.json
│ │ │ │ └── mask_mutag_gat_basicgnnexplainer_phenomenon.json
│ │ │ ├── gnnexplainer
│ │ │ │ ├── mask_mutag_gat_gnnexplainer_model.json
│ │ │ │ └── mask_mutag_gat_gnnexplainer_phenomenon.json
│ │ │ ├── gradcam
│ │ │ │ ├── mask_mutag_gat_gradcam_model.json
│ │ │ │ └── mask_mutag_gat_gradcam_phenomenon.json
│ │ │ ├── ig
│ │ │ │ ├── mask_mutag_gat_ig_model.json
│ │ │ │ └── mask_mutag_gat_ig_model.json
│ │ │ ├── occlusion
│ │ │ │ ├── mask_mutag_gat_ig_model.json
│ │ │ │ └── mask_mutag_gat_ig_model.json
│ │ │ ├── pgmexplainer
│ │ │ │ ├── mask_mutag_gat_pgmexplainer_model.json
│ │ │ │ └── mask_mutag_gat_pgmexplainer_phenomenon.json
│ │ │ ├── sa
│ │ │ │ ├── mask_mutag_gat_sa_model.json
│ │ │ │ └── mask_mutag_gat_sa_phenomenon.json
│ │ ├── mutag
│ │ │ ├── processed
│ │ │ │ ├── data.pt
│ │ │ │ ├── pre_filter.pt
│ │ │ │ └── pre_transform.pt
│ │ │ ├── raw
│ │ │ │ ├── MUTAG_A.txt
│ │ │ │ ├── MUTAG_edge_labels.txt
│ │ │ │ ├── MUTAG_graph_indicator.txt
│ │ │ │ ├── MUTAG_graph_labels.txt
│ │ │ │ ├── MUTAG_node_labels.txt
│ │ │ │ └── README.txt
│ │ ├── dataset_blobs.csv
│ │ ├── dataset_circles.csv
│ │ ├── dataset_moons.csv
│ │ ├── embeddings.csv
│ │ ├── generate_data.py # script to create data
│ │ └── process.py
│ ├── model
│ │ ├── mutag
│ │ │ ├── gat_3l_cpu_best.pth
│ │ │ ├── gat_3l_cpu_latest.pth
│ │ │ ├── gat_3l_cpu_scores.json
│ └── MANIFEST.in
├── react-frontend
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.css
│ │ ├── App.test.tsx
│ │ ├── App.tsx
│ │ ├── router
│ │ │ ├── resources
│ │ │ │ └── data.ts
│ │ │ └── apiClient.ts
│ │ ├── components
│ │ │ ├── DataChoice.tsx
│ │ │ ├── Graph.tsx
│ │ │ ├── GraphInit.tsx
│ │ │ ├── MaskProperties.tsx
│ │ │ ├── ModalPopup.tsx
│ │ │ ├── ModalPopup.css
│ │ │ ├── ScatterPlot.css
│ │ │ ├── ScatterPlot.tsx
│ │ │ ├── Scores.tsx
│ │ │ ├── Slider.css
│ │ │ ├── Slider.tsx
│ │ │ └── utils.ts
│ │ ├── index.css
│ │ ├── index.tsx
│ │ ├── logo.svg
│ │ ├── react-app-env.d.ts
│ │ ├── reportWebVitals.ts
│ │ ├── setupTests.ts
│ │ └── types
│ │ ├── margin.ts
│ │ └── data.ts
│ ├── tsconfig.json
│ └── public
│ ├── robot.txt
│ ├── manifest.json
│ ├── logo512.png
│ ├── logo192.png
│ ├── index.html
│ └── favicon.ico
└── Dockerfile- clone the repository;
- open a new terminal instance;
- move to the folder where the project has been downloaded using the command
cd; - open the folder called "b2-gnn-explainer"; To run the backend
- open the backend folder called "backend-project";
- create a virtual environment using the command
conda create -n nameOfTheEnvironment; - activate the virtual environment run the command
conda activate nameOfTheEnvironment; - install the requirements from the txt file using the command
conda env update -n nameOfTheEnvironment --file env_backend.yml(This may take a while); - install the backend with the command
pip install .; - start the backend with the command
start-server; To run the frontend - open a new terminal instance and once again go to the folder called "b2-gnn-explainer"
- open the frontend folder called "react-frontend";
- start the front end by using the following two commands
npm install,npm start; If all the steps have been successfully executed a new browser window will open automatically.
Document here the major milestones of your code and future planned steps.\
-
Week 1 (21st March - 27th March)
- Familiarization with the GitLab repository
- Added new backend endpoint for the future Overview of the application: #0e77e896
-
Week 2 (28th March - 03rd April) - Milestone II
- Add the mutag data to the repo: #992c6319
- Added a graph visualization script for the molecules: #d5e68e27
- Added a backend endpoint for the MUTAG dataset: #5605d58b
- Implemented a transformation function that transforms a Pytorch Data object into a JSON object: #707807d3
- Changed the frontend so that the MUTAG data in the backend is retrieved and upon user request the toxicity of a chosen molecule is displayed: #30e43cda
-
Week 3 - 5 (04th April - 24th April) - Milestone III
- Visualize the molecules as embedded data points in terms of a scatter plot that opens as a pop-up window, display information about a specific molecule when hovering about it and make it choosable: #8db3a2b0
- Convert the frontend sketches into a static frontend: #7ebc9c61
-
Week 6 & 7 (25th April - 08th May) - Milestone IV
-
Week 8 - 10 (09th May - 29th May) - Milestone V
-
Week 11 & 12 (30th May - 15th June) - Finalization
- Finalize application by reordering the dashboard layout, fixing alignment issues and small initialization bugs: #4e7809cd
The week was mainly dedicated to familiarize ourselves with the GitLab repository and the development workflow and creating the initial README. Also an API endpoint was added that will serve as the overview for the application. An open challenge is to determine what exactly should be implemented for Backend milestone, a question that will be discussed in the open office hour in Week 2.
It was communicated that the main focus of the backend deliverable is to add the data as an API endpoint and show that we can access it in the application. Thus, the MUTAG dataset was added and a simple query in the frontend that just displays the molecule's toxicity was implemented. Challenges were to understand how exactly the communication between the Flask-Python backend and the React frontend works and to get used to the React syntax and programming style. Additionally, the mutag data, which was processed as a Pytorch Data object, had to be made JSON compatible.
The work was focused on implementing the steps for the third milestone. This meant first and foremost to convert the application sketches into an (until here) static frontend. Next to building the general structure and inserting the basic components, the greatest challenge here was to implement the possibility to display the molecules in the embedded space and make them choosable. First we needed to find a 2-D representation of the molecules. For this we used PCA and added this as the embeddings.csv file. While the scatter plot functionality could largely be reused from the 'dummy-fullstack' project, we needed to find a way to implement a modal pop-up window in React and to display the necesary molecule information when hovering over them.
These two weeks were dedicated for the most part to including the ML-Model eplainer results and connecting them to the frontend in that way that the results are retrieved with dynamic filters (i.e. the explainer method, the focus, the mask nature, the mask transformation and the selected molecule). Also, the work was about visualizing the molecules as a graph structure and connect it respectively so that the selected molecule is displayed in the application. This includes correctly displaying the different atoms, displaying the compounds between them as edges and make the edges that are relevant for the explanation stand out. Furthermore, we added interactivity elements, that is users (domain experts) can click on a graph edge and modify its weight if they think, and edge should be included in the network (or not). This change is then propagated and the graph is recomputed.
The two main tasks for these three weeks were: 1. Add a Graph history, that is keep state of the modifications introduced by the user and allow an undo, redo and reset option in order to let the user go back and forth with their edits. 2. While most functionalities are implemented for the application, it does not look and feel super intuitive yet. So it should be extended with descriptions and guide the user through the steps that make up a typical interaction. This will have to be further completed in the last weeks until the project submission on 15th June.
Tags:
- Week 1: Week 1 Tag
- Week 2 (Milestone II): Week 2 Tag
- Week 3 - 5 (Milestone III): Week 3 - 5 Tag
- Week 6 & 7 (Milestone IV): Week 6 & 7 Tag
- Week 8 - 10 (Milestone V): Week 8 - 10 Tag
- Final Submission: Final Submission Tag