first commit

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,29 @@
+# Use an official Node.js runtime as a parent image
+FROM node:20 AS build
+
+# Set the working directory in the container
+WORKDIR /app
+
+RUN chown node:node /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+USER node
+COPY --chown=node:node package.json package-lock.json* ./
+# Install project dependencies
+RUN npm install
+
+#RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Build the React app
+RUN npm run build
+
+# Expose the application port (optional, adjust as needed)
+EXPOSE 3000
+
+# Start the React app
+CMD ["npm", "start"]

Makefile

@@ -0,0 +1,16 @@
+docker_run:
+	docker run --env REACT_APP_API_ENDPOINT=$$REACT_APP_API_ENDPOINT --restart=always -d -p 8080:80 --name $$FRONT_CONTAINER_NAME $$FRONT_IMAGE_NAME
+
+docker_build:
+	docker build --build-arg REACT_APP_API_ENDPOINT=$$REACT_APP_API_ENDPOINT -t $$FRONT_IMAGE_NAME .
+
+docker_tag:
+	docker tag $$FRONT_IMAGE_NAME $$CONTAINER_REGISTRY_URL/$$FRONT_IMAGE_NAME:latest
+
+docker_push:
+	docker push $$CONTAINER_REGISTRY_URL/$$FRONT_IMAGE_NAME:latest
+
+#http://localhost:8080:80
+
+registry__login:
+	docker login $$CONTAINER_REGISTRY_URL -u nologin --password $$SCW_SECRET_KEY

README.md

@@ -1,10 +1,62 @@
 ---
 title: Citeo Plastic
-emoji: 🐢
-colorFrom: red
-colorTo: red
+emoji: 🥤
+colorFrom: green
+colorTo: yellow
 sdk: docker
 pinned: false
+app_port: 3000
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+# BunkaTopics web app
+
+This project was made to show the results of [BunkaTopics](https://github.com/charlesdedampierre/BunkaTopics).
+Bunkatopics is a Topic Modeling Visualisation, Frame Analysis & Retrieval Augmented Generation (RAG) package that leverages LLMs
+It is built around React and D3.js and made to work with the `api` in the same repository
+
+## Usage
+
+- Please copy `env.model` to `.env` before starting the server
+- `make docker_build`
+- `make docker_run`
+
+## Developping
+
+In the project directory, you can run a development server:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### Remove react-scripts helper : `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

biome.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c5fa2ccdb7f58147dbdfae6df3bae62aad7e1d7de68db374164c3daa8d3bb2b
+size 299

env.model

@@ -0,0 +1,2 @@
+# Copy this file to .env before starting the server
+REACT_APP_API_ENDPOINT=local

nginx-configuration.conf

@@ -0,0 +1,19 @@
+# Expires map
+map $sent_http_content_type $expires {
+    default                    off;
+    text/html                  epoch;
+    text/css                   max;
+    application/json           max;
+    application/javascript     max;
+    ~image/                    max;
+}
+server {
+  listen 80;
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  expires $expires;
+  gzip  on;
+}

package-lock.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9600d2ccc1c6e3e589c7fb0f3b2215f4f8343f1f691a579d6b41a35f5ce31c14
+size 748728

package.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:afa3399b70fb324486fc2414cde05ed8cfc59dff7168ae60005c7f1e86128d42
+size 1754

public/bunka_docs.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:824444f75585a00aa468725a3e2249dd288cd8eef6372f4c0a9eb2c179dc99d6
+size 20834382

public/bunka_topics.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:047bc713ecfdcc3c2be4f5ca532128f5fbcdf97e92a2dc549c1fee114774a7a0
+size 4521691

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Bunka Topics Beta</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:155a92d563cb3eb3f919f78690a64df620baa3412712f322791fb19f29d1500e
+size 532

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/App.css

@@ -0,0 +1,58 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.scatter-plot-and-text-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.scatter-plot-container {
+  flex: 1;
+  /* This makes it flexible and takes remaining space */
+  /* Add some margin to push it down slightly */
+  /* Add other styling for scatter-plot-container as needed */
+}
+
+.text-container {
+  flex: 1;
+  /* This makes it flexible and takes remaining space */
+  /* Add other styling for text-container as needed */
+}

src/App.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Bourdieu from "./Bourdieu";
+import DocsView from "./DocsView";
+import DropdownMenu from "./DropdownMenu";
+import MapView from "./Map";
+import TreemapView from "./TreemapView";
+import { TopicsProvider } from "./UploadFileContext";
+
+function App() {
+  const [selectedView, setSelectedView] = useState("map"); // Default to 'map'
+
+  return (
+    <div className="App">
+      <div className="main-display">
+        <div className="top-right" id="top-banner">
+          <a href="https://github.com/charlesdedampierre/BunkaTopics" target="_blank" rel="noopener noreferrer" className="linkedin-icon">
+            <img src="/github_logo.png" alt="LinkedIn" />
+          </a>
+          <img src="/bunka_logo.png" alt="Bunka Logo" className="bunka-logo" />
+          <DropdownMenu onSelectView={setSelectedView} selectedView={selectedView} />
+        </div>
+        <TopicsProvider onSelectView={setSelectedView} selectedView={selectedView}>
+          {selectedView === "map" ? (
+            <MapView />
+          ) : selectedView === "docs" ? (
+            <DocsView />
+          ) : selectedView === "treemap" ? (
+            /**
+             * Hidden view for the moment
+             */
+            <TreemapView />
+          ) : selectedView === "bourdieu" ? (
+            <Bourdieu />
+          ) : (
+            <MapView />
+          )}
+        </TopicsProvider>
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/App.test.jsx

@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Bourdieu.jsx

@@ -0,0 +1,486 @@
+import * as d3 from "d3";
+import * as d3Contour from "d3-contour";
+import { Backdrop, CircularProgress, Box, Button } from "@mui/material";
+import Typography from '@mui/material/Typography';
+import RepeatIcon from '@mui/icons-material/Repeat';
+import React, { useEffect, useRef, useState, useContext } from "react";
+import TextContainer, { topicsSizeFraction }  from "./TextContainer";
+import { TopicsContext } from "./UploadFileContext";
+import QueryView from "./QueryView";
+import HelpIcon from '@mui/icons-material/Help';
+import { HtmlTooltip } from "./Map";
+
+const bunkaDocs = "bunka_bourdieu_docs.json";
+const bunkaTopics = "bunka_bourdieu_topics.json";
+const bunkaQuery = "bunka_bourdieu_query.json";
+const { REACT_APP_API_ENDPOINT } = process.env;
+
+function Bourdieu() {
+  const [selectedDocument, setSelectedDocument] = useState(null);
+  const [mapLoading, setMapLoading] = useState(false);
+  const [topicsCentroids, setTopicsCentroids] = useState([])
+
+  const { bourdieuData: apiData, isLoading: isFileProcessing } = useContext(TopicsContext);
+
+  const svgRef = useRef(null);
+  const scatterPlotContainerRef = useRef(null);
+  // Set the SVG height to match your map's desired height
+  const svgHeight = window.innerHeight - document.getElementById("top-banner").clientHeight - 50;
+  const svgWidth = window.innerWidth * 0.70; // Set the svg container height to match the layout
+  
+  const createScatterPlot = (docsData, topicsData, queryData) => {
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 50,
+      left: 50,
+    };
+    const plotWidth = svgWidth;
+    const plotHeight = svgHeight;
+
+    d3.select(svgRef.current).selectAll("*").remove();
+
+    const svg = d3
+      .select(svgRef.current)
+      .attr("width", "100%")
+      .attr("height", svgHeight);
+
+    /**
+     * SVG canvas group on which transforms apply.
+     */
+    const g = svg.append("g").classed("canvas", true);
+    
+    /**
+     * Setup Zoom.
+     */
+    const zoom = d3.zoom()
+      .scaleExtent([1, 3])
+      .translateExtent([[0,0], [plotWidth, plotHeight]])
+      .on("zoom", function ({ transform }) {
+        g.attr(
+          "transform",
+          `translate(${transform.x ?? 0}, ${transform.y ?? 0}) scale(${transform.k ?? 1})`
+        );
+        // props.setTransform?.({
+        //   x: transform.x,
+        //   y: transform.y,
+        //   k: transform.k
+        // })
+      });
+    
+    /**
+     * Initial zoom.
+    */
+    svg.call(zoom);
+    // const defaultTransform = { k: 1 };
+    // const initialTransform = defaultTransform?.k != null
+    //   ? new ZoomTransform(
+    //     defaultTransform.k ?? 1,
+    //     defaultTransform.x ?? 0,
+    //     defaultTransform.y ?? 0
+    //   )
+    //   : d3.zoomIdentity;
+    // svg.call(zoom.transform, initialTransform);
+
+    // Axes
+    const dimensionX = { idLeft: queryData.x_left_words[0], idRight: queryData.x_right_words[0] };
+    const dimensionY = { idLeft: queryData.y_bottom_words[0], idRight: queryData.y_top_words[0] };
+
+    const xMin = d3.min(docsData, (d) => d.x);
+    const xMax = d3.max(docsData, (d) => d.x);
+    const yMin = d3.min(docsData, (d) => d.y);
+    const yMax = d3.max(docsData, (d) => d.y);
+    const maxDomainValue = Math.max(xMax, -xMin, yMax, -yMin);
+
+    var xScale = d3.scaleLinear()
+      .domain([-maxDomainValue, maxDomainValue])
+      .range([ 0, plotWidth ]);
+    var yScale = d3.scaleLinear()
+      .domain([-maxDomainValue, maxDomainValue])
+      .range([ plotHeight, 0 ]);
+
+    const axes = d3.create("svg:g").classed("axes", true);
+    svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'arrowhead-right')
+      .attr('refX', 5)
+      .attr('refY', 5)
+      .attr('markerWidth', 10)
+      .attr('markerHeight', 10)
+      .append('path')
+      .attr('d', 'M 0 0 L 5 5 L 0 10')
+      .attr('stroke', 'grey')
+      .attr('stroke-width', 1)
+      .attr('fill', 'none');
+    svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'arrowhead-left')
+      .attr('refX', 0)
+      .attr('refY', 5)
+      .attr('markerWidth', 10)
+      .attr('markerHeight', 10)
+      .append('path')
+      .attr('d', 'M 5 0 L 0 5 L 5 10')
+      .attr('stroke', 'grey')
+      .attr('stroke-width', 1)
+      .attr('fill', 'none');
+    svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'arrowhead-top')
+      .attr('refX', 5)
+      .attr('refY', 0)
+      .attr('markerWidth', 10)
+      .attr('markerHeight', 10)
+      .append('path')
+      .attr('d', 'M 0 5 L 5 0 L 10 5')
+      .attr('stroke', 'grey')
+      .attr('stroke-width', 1)
+      .attr('fill', 'none');
+    svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'arrowhead-bottom')
+      .attr('refX', 5)
+      .attr('refY', 5)
+      .attr('markerWidth', 10)
+      .attr('markerHeight', 10)
+      .append('path')
+      .attr('d', 'M 0 0 L 5 5 L 10 0')
+      .attr('stroke', 'grey')
+      .attr('stroke-width', 1)
+      .attr('fill', 'none');
+    // X axis
+    axes.append("g")
+      .attr("transform", `translate(0,${plotHeight / 2})`)
+      .call(
+        d3.axisBottom(xScale)
+          .tickSizeInner(0)
+          .tickSizeOuter(0)
+          .tickPadding(10)
+      )
+        .attr("class", "axis xAxis")
+        .datum({ dimension: dimensionX })
+        .select('path.domain')
+          .attr("marker-start", "url(#arrowhead-left)")
+          .attr("marker-end", "url(#arrowhead-right)");
+    // Y axis
+    axes.append("g")
+      .attr("transform", `translate(${plotWidth / 2},0)`)
+      .call(
+        d3.axisRight(yScale)
+          .tickSizeInner(0)
+          .tickSizeOuter(0)
+          .tickPadding(10)
+      )
+        .attr("class", "axis yAxis")
+        .datum({ dimension: dimensionY })
+        .select('path.domain')
+          .attr("marker-end", "url(#arrowhead-top)")
+          .attr("marker-start", "url(#arrowhead-bottom)");
+    // Style the tick texts
+    axes.selectAll(".tick text")
+      .style("fill", "blue") // Color of the text
+      .style("font-weight", "bold");
+
+    // Show only first and last ticks
+    axes.selectAll(".xAxis .tick text")
+      .style('text-anchor', "middle")
+      .attr('transform', (d, i, nodes) => (i === 0 || i === nodes.length - 1) ? "rotate(-90)" : "")
+      .attr("visibility", (d, i, nodes) => (i === 0 || i === nodes.length - 1) ? "visible" : "hidden");
+    axes.selectAll(".yAxis .tick text")
+      .style('text-anchor', "start")
+      .attr("visibility", (d, i, nodes) => (i === 0 || i === nodes.length - 1) ? "visible" : "hidden");
+    axes.selectAll(".xAxis .tick text")
+      .text((d, i, nodes) => {
+        if (i === 0) {
+          return dimensionX.idLeft; // Custom text for the first tick
+        } else if (i === nodes.length - 1) {
+          return dimensionX.idRight;  // Custom text for the last tick
+        }
+        return d; // Default text for all other ticks
+      });
+    axes.selectAll(".yAxis .tick text")
+      .text((d, i, nodes) => {
+        if (i === 0) {
+          return dimensionY.idLeft; // Custom text for the first tick
+        } else if (i === nodes.length - 1) {
+          return dimensionY.idRight;;  // Custom text for the last tick
+        }
+        return d; // Default text for all other ticks
+      });
+    /**
+     * Draw Bourdieu map contents
+     */
+    const contourData = d3Contour
+      .contourDensity()
+      .x((d) => xScale(-d.x))
+      .y((d) => yScale(d.y))
+      .size([plotWidth, plotHeight])
+      .bandwidth(30)(docsData);
+
+    const contourLineColor = "rgb(94, 163, 252)";
+
+    g
+      .selectAll("path.contour")
+      .data(contourData)
+      .enter()
+      .append("path")
+      .attr("class", "contour")
+      .attr("d", d3.geoPath())
+      .style("fill", "none")
+      .style("stroke", contourLineColor)
+      .style("stroke-width", 1);
+
+    const centroids = topicsData.filter((d) => d.x_centroid && d.y_centroid);
+    setTopicsCentroids(centroids);
+
+    g
+      .selectAll("circle.topic-centroid")
+      .data(centroids)
+      .enter()
+      .append("circle")
+      .attr("class", "topic-centroid")
+      .attr("cx", (d) => xScale(-d.x_centroid))
+      .attr("cy", (d) => yScale(d.y_centroid))
+      .attr("r", 8)
+      .style("fill", "red")
+      .style("stroke", "black")
+      .style("stroke-width", 2)
+      .on("click", (event, d) => {
+        setSelectedDocument(d);
+      });
+
+    g
+      .selectAll("text.topic-label")
+      .data(centroids)
+      .enter()
+      .append("text")
+      .attr("class", "topic-label")
+      .attr("x", (d) => xScale(-d.x_centroid))
+      .attr("y", (d) => yScale(d.y_centroid) - 12)
+      .text((d) => d.name)
+      .style("text-anchor", "middle");
+
+    const convexHullData = topicsData.filter((d) => d.convex_hull);
+    for (const d of convexHullData) {
+      const hull = d.convex_hull;
+      if (hull) {
+        const hullPoints = hull.x_coordinates.map((x, i) => [xScale(-x), yScale(hull.y_coordinates[i])]);
+
+        g
+          .append("path")
+          .datum(d3.polygonHull(hullPoints))
+          .attr("class", "convex-hull-polygon")
+          .attr("d", (dAttr) => `M${dAttr.join("L")}Z`)
+          .style("fill", "none")
+          .style("stroke", "rgba(255, 255, 255, 0.5)")
+          .style("stroke-width", 2);
+      }
+    }
+    const xGreaterThanZeroAndYGreaterThanZero = docsData.filter((d) => d.x > 0 && d.y > 0).length;
+    const xLessThanZeroAndYGreaterThanZero = docsData.filter((d) => d.x < 0 && d.y > 0).length;
+    const xGreaterThanZeroAndYLessThanZero = docsData.filter((d) => d.x > 0 && d.y < 0).length;
+    const xLessThanZeroAndYLessThanZero = docsData.filter((d) => d.x < 0 && d.y < 0).length;
+
+    // Calculate the total number of documents
+    const totalDocuments = docsData.length;
+
+    // Calculate the percentages
+    const percentageXGreaterThanZeroAndYGreaterThanZero = (xGreaterThanZeroAndYGreaterThanZero / totalDocuments) * 100;
+    const percentageXLessThanZeroAndYGreaterThanZero = (xLessThanZeroAndYGreaterThanZero / totalDocuments) * 100;
+    const percentageXGreaterThanZeroAndYLessThanZero = (xGreaterThanZeroAndYLessThanZero / totalDocuments) * 100;
+    const percentageXLessThanZeroAndYLessThanZero = (xLessThanZeroAndYLessThanZero / totalDocuments) * 100;
+
+    // Add labels to display percentages in the squares
+    // const squareSize = 300; // Adjust this based on your map's layout
+    // const labelOffsetX = 10; // Adjust these offsets as needed
+    // const labelOffsetY = 20;
+
+    // Calculate the maximum X and Y coordinates
+
+    // Calculate the midpoints for the squares
+    const xMid = -d3.max(docsData, (d) => d.x) / 2;
+    const yMid = d3.max(docsData, (d) => d.y) / 2;
+
+    // Labels for X > 0 and Y > 0 square
+    g
+      .append("text")
+      .attr("x", xScale(xMid))
+      .attr("y", yScale(yMid))
+      .text(`${percentageXGreaterThanZeroAndYGreaterThanZero.toFixed(0)}%`) // Remove the prefix
+      .style("text-anchor", "middle")
+      .style("fill", "dark") // Change the text color to blue
+      .style("font-size", "100px") // Adjust the font size
+      .style("opacity", 0.1); // Adjust the opacity (0.7 means slightly transparent)
+
+    // Labels for X < 0 and Y > 0 square
+    g
+      .append("text")
+      .attr("x", xScale(-xMid))
+      .attr("y", yScale(yMid))
+      .text(`${percentageXLessThanZeroAndYGreaterThanZero.toFixed(0)}%`) // Remove the prefix
+      .style("text-anchor", "middle")
+      .style("fill", "dark") // Change the text color to light blue
+      .style("font-size", "100px") // Adjust the font size
+      .style("opacity", 0.1); // Adjust the opacity (0.05 means slightly transparent)
+
+    // Labels for X > 0 and Y < 0 square
+    g
+      .append("text")
+      .attr("x", xScale(xMid))
+      .attr("y", yScale(-yMid))
+      .text(`${percentageXGreaterThanZeroAndYLessThanZero.toFixed(0)}%`) // Remove the prefix
+      .style("text-anchor", "middle")
+      .style("fill", "dark") // Change the text color to light blue
+      .style("font-size", "100px") // Adjust the font size
+      .style("opacity", 0.1); // Adjust the opacity (0.05 means slightly transparent)
+
+    // Labels for X > 0 and Y < 0 square
+    g
+      .append("text")
+      .attr("x", xScale(-xMid))
+      .attr("y", yScale(-yMid))
+      .text(`${percentageXLessThanZeroAndYLessThanZero.toFixed(0)}%`) // Remove the prefix
+      .style("text-anchor", "middle")
+      .style("fill", "dark") // Change the text color to light blue
+      .style("font-size", "100px") // Adjust the font size
+      .style("opacity", 0.1); // Adjust the opacity (0.05 means slightly transparent)
+
+    const topicsPolygons = g
+      .selectAll("polygon.topic-polygon")
+      .data(centroids)
+      .enter()
+      .append("polygon")
+      .attr("class", "topic-polygon")
+      .attr("points", (d) => {
+        const hull = d.convex_hull;
+        if (hull) {
+          const hullPoints = hull.x_coordinates.map((x, i) => [xScale(-x), yScale(hull.y_coordinates[i])]);
+          return hullPoints.map((point) => point.join(",")).join(" ");
+        }
+      })
+      .style("fill", "transparent")
+      .style("stroke", "transparent")
+      .style("stroke-width", 2);
+
+    let currentlyClickedPolygon = null;
+
+    /**
+     * Render Axes
+     */
+    g.append(() => axes.node())
+
+    topicsPolygons.on("click", (event, d) => {
+      // Reset the fill color of the previously clicked polygon to transparent light grey
+      if (currentlyClickedPolygon !== null) {
+        currentlyClickedPolygon.style("fill", "transparent");
+        currentlyClickedPolygon.style("stroke", "transparent");
+      }
+
+      // Set the fill color of the clicked polygon to transparent light grey and add a red border
+      const clickedPolygon = d3.select(event.target);
+      clickedPolygon.style("fill", "rgba(200, 200, 200, 0.4)");
+      clickedPolygon.style("stroke", "red");
+
+      currentlyClickedPolygon = clickedPolygon;
+      if (d.top_doc_content) {
+        // Render the TextContainer component with topic details
+        setSelectedDocument(d);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
+      setMapLoading(true);
+      // Fetch the JSON data locally
+      fetch(`/${bunkaDocs}`)
+        .then((response) => response.json())
+        .then((docsData) => {
+          // Fetch the local topics data and merge it with the existing data
+          fetch(`/${bunkaTopics}`)
+            .then((response) => response.json())
+            .then((topicsData) => {
+              fetch(`/${bunkaQuery}`)
+                .then((response) => response.json())
+                .then((queryData) => {
+                  // Call the function to create the scatter plot after data is loaded
+                  createScatterPlot(docsData, topicsData, queryData);
+                })
+                .catch((error) => {
+                  console.error("Error fetching bourdieu query data:", error);
+                })
+                .finally(() => {
+                  setMapLoading(false);  
+                });
+            })
+            .catch((error) => {
+              console.error("Error fetching topics data:", error);
+            })
+            .finally(() => {
+              setMapLoading(false);  
+            });
+        })
+        .catch((error) => {
+          console.error("Error fetching documents data:", error);
+        })
+        .finally(() => {
+          setMapLoading(false);  
+        });
+    } else {
+      // Call the function to create the scatter plot with the data provided by TopicsContext
+      createScatterPlot(apiData.docs, apiData.topics, apiData.query);
+    }
+  }, [apiData]);
+   
+  const mapDescription = "This map is generated by projecting documents onto a two-dimensional space, where the axes are defined by the user. Two documents are positioned close to each other if they share a similar relationship with the axes. The documents themselves are not directly represented on the map; rather, they are aggregated into clusters. Each cluster represents a group of documents that exhibit similarities.";
+   
+  return (
+    <div className="json-display">
+      {(isFileProcessing || mapLoading) ? (
+        <Backdrop open={isFileProcessing || mapLoading} style={{ zIndex: 9999 }}>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      ) : (
+        <div className="scatter-plot-and-text-container">
+          <div className="scatter-plot-container" ref={scatterPlotContainerRef}>
+          <HtmlTooltip
+            title={
+              <React.Fragment>
+                <Typography color="inherit">{mapDescription}</Typography>
+              </React.Fragment>
+            }
+            followCursor
+            >
+              <HelpIcon style={{
+                position: "relative",
+                top: 10,
+                left: 40,
+                border: "none"
+              }}/>
+            </HtmlTooltip>
+            <svg ref={svgRef} />
+          </div>
+          
+          <div className="text-container">
+          {selectedDocument !== null ? (
+            <>
+              <Box sx={{ marginBottom: "1em" }}>
+                <Button sx={{ width: "100%" }} component="label" variant="outlined" startIcon={<RepeatIcon />} onClick={() => setSelectedDocument(null)}>
+                  Upload another CSV file
+                </Button>
+              </Box>
+              <TextContainer topicName={selectedDocument.name} topicSizeFraction={topicsSizeFraction(topicsCentroids, selectedDocument.size)} content={selectedDocument.top_doc_content} />
+            </>
+            ) : <QueryView />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Bourdieu;

src/DocsView.jsx

@@ -0,0 +1,135 @@
+import { Backdrop, Box, Button, CircularProgress, Container, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import React, { useContext, useEffect, useState } from "react";
+import { TopicsContext } from "./UploadFileContext";
+
+const bunkaDocs = "bunka_docs.json";
+const bunkaTopics = "bunka_topics.json";
+const { REACT_APP_API_ENDPOINT } = process.env;
+
+function DocsView() {
+  const [docs, setDocs] = useState(null);
+  const [topics, setTopics] = useState(null);
+  const { data: apiData, isLoading } = useContext(TopicsContext);
+
+  useEffect(() => {
+    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
+      // Fetch the JSON data locally
+      fetch(`/${bunkaDocs}`)
+        .then((response) => response.json())
+        .then((localData) => {
+          setDocs(localData);
+          // Fetch the topics data and merge it with the existing data
+          fetch(`/${bunkaTopics}`)
+            .then((response) => response.json())
+            .then((topicsData) => {
+              // Set the topics data with the existing data
+              setTopics(topicsData);
+            })
+            .catch((error) => {
+              console.error("Error fetching topics data:", error);
+            });
+        })
+        .catch((error) => {
+          console.error("Error fetching JSON data:", error);
+        });
+    } else {
+      // Call the function to create the scatter plot with the data provided by TopicsContext
+      setDocs(apiData.docs);
+      setTopics(apiData.topics);
+    }
+  }, [apiData]);
+
+  const docsWithTopics =
+    docs && topics
+      ? docs.map((doc) => ({
+          ...doc,
+          topic_name: topics.find((topic) => topic.topic_id === doc.topic_id)?.name || "Unknown",
+        }))
+      : [];
+
+  const downloadCSV = () => {
+    // Create a CSV content string from the data
+    const csvContent = `data:text/csv;charset=utf-8,${[
+      ["Doc ID", "Topic ID", "Topic Name", "Content"], // CSV header
+      ...docsWithTopics.map((doc) => [doc.doc_id, doc.topic_id, doc.topic_name, doc.content]), // CSV data
+    ]
+      .map((row) => row.map((cell) => `"${cell}"`).join(",")) // Wrap cells in double quotes
+      .join("\n")}`; // Join rows with newline
+
+    // Create a Blob containing the CSV data
+    const blob = new Blob([csvContent], { type: "text/csv" });
+
+    // Create a download URL for the Blob
+    const url = URL.createObjectURL(blob);
+
+    // Create a temporary anchor element to trigger the download
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "docs.csv"; // Set the filename for the downloaded file
+    a.click();
+
+    // Revoke the URL to free up resources
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Container fixed>
+      <div className="docs-view">
+        <h2>Data</h2>
+        {isLoading ? (
+          <Backdrop open={isLoading} style={{ zIndex: 9999 }}>
+            <CircularProgress color="primary" />
+          </Backdrop>
+        ) : (
+          <div>
+            <Button variant="contained" color="primary" onClick={downloadCSV} sx={{ marginBottom: "1em" }}>
+              Download CSV
+            </Button>
+            <Box
+              sx={{
+                height: "1000px", // Set the height of the table
+                overflow: "auto", // Add scroll functionality
+              }}
+            >
+              <TableContainer component={Paper}>
+                <Table>
+                  <TableHead
+                    sx={{
+                      backgroundColor: "lightblue", // Set background color
+                      position: "sticky", // Make the header sticky
+                      top: 0, // Stick to the top
+                    }}
+                  >
+                    <TableRow>
+                      <TableCell>Doc ID</TableCell>
+                      <TableCell>Topic ID</TableCell>
+                      <TableCell>Topic Name</TableCell>
+                      <TableCell>Content</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {docsWithTopics.map((doc, index) => (
+                      <TableRow
+                        key={doc.doc_id}
+                        sx={{
+                          borderBottom: "1px solid lightblue", // Add light blue border
+                        }}
+                      >
+                        <TableCell>{doc.doc_id}</TableCell>
+                        <TableCell>{doc.topic_id}</TableCell>
+                        <TableCell>{doc.topic_name}</TableCell>
+                        <TableCell>{doc.content}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Box>
+          </div>
+        )}
+      </div>
+    </Container>
+  );
+}
+
+export default DocsView;

src/DropdownMenu.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+
+export const LABELS = {
+  map: "Map View",
+  bourdieu: "Bourdieu View",
+  docs: "Data"
+};
+
+function DropdownMenu({ onSelectView, selectedView }) {
+  const handleSelectView = (event) => {
+    if (onSelectView) onSelectView(`${event.target.value}`);
+  };
+
+  return (
+    <FormControl variant="outlined" className="dropdown-menu" sx={{ minWidth: "200px", marginTop: "1em" }}>
+      <InputLabel htmlFor="view-select">Select a View</InputLabel>
+      <Select
+        label="Select a View"
+        value={selectedView}
+        onChange={handleSelectView}
+        inputProps={{
+          name: "view-select",
+          id: "view-select",
+        }}
+      >
+        <MenuItem value="map">{LABELS.map}</MenuItem>
+        {/* <MenuItem value="bourdieu">{LABELS.bourdieu}</MenuItem> */}
+        <MenuItem value="docs">{LABELS.docs}</MenuItem>
+      </Select>
+    </FormControl>
+  );
+}
+
+DropdownMenu.propTypes = {
+  onSelectView: PropTypes.func.isRequired,
+  selectedView: PropTypes.string.isRequired,
+};
+
+export default DropdownMenu;

src/Map.jsx

@@ -0,0 +1,357 @@
+import { Backdrop, CircularProgress, Button, Box } from "@mui/material";
+import HelpIcon from '@mui/icons-material/Help';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import RepeatIcon from '@mui/icons-material/Repeat';
+import { styled } from '@mui/material/styles';
+
+import * as d3 from "d3";
+import * as d3Contour from "d3-contour";
+import React, { useContext, useEffect, useRef, useState } from "react";
+
+import TextContainer, { topicsSizeFraction } from "./TextContainer";
+import { TopicsContext } from "./UploadFileContext";
+import QueryView from "./QueryView";
+
+const bunkaDocs = "bunka_docs.json";
+const bunkaTopics = "bunka_topics.json";
+const { REACT_APP_API_ENDPOINT } = "local";
+
+/**
+ * Generic tooltip
+ */
+export const HtmlTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.popper}`]: {
+    backgroundColor: '#fff',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+  },
+}));
+
+function MapView() {
+  const [selectedDocument, setSelectedDocument] = useState(null);
+  const [mapLoading, setMapLoading] = useState(false);
+  const [topicsCentroids, setTopicsCentroids] = useState([])
+
+  const { data: apiData, isLoading: isFileProcessing } = useContext(TopicsContext);
+
+
+  const svgRef = useRef(null);
+  const scatterPlotContainerRef = useRef(null);
+  const createScatterPlot = (data) => {
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 50,
+      left: 50,
+    };
+    const plotWidth = window.innerWidth * 0.6;
+    const plotHeight = window.innerHeight - document.getElementById("top-banner").clientHeight - 50; // Adjust the height as desired
+
+    d3.select(svgRef.current).selectAll("*").remove();
+
+    const svg = d3
+      .select(svgRef.current)
+      .attr("width", "100%")
+      .attr("height", plotHeight);
+    /**
+    * SVG canvas group on which transforms apply.
+    */
+    const g = svg.append("g")
+      .classed("canvas", true)
+      .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    /**
+    * TODO Zoom.
+    */
+    const zoom = d3.zoom()
+      .scaleExtent([1, 3])
+      .translateExtent([[0, 0], [1000, 1000]])
+      .on("zoom", function ({ transform }) {
+        g.attr(
+          "transform",
+          `translate(${transform.x ?? 0}, ${transform.y ?? 0}) scale(${transform.k ?? 1})`
+        )
+        //positionLabels()
+        // props.setTransform?.({
+        //   x: transform.x,
+        //   y: transform.y,
+        //   k: transform.k
+        // })
+      });
+    svg.call(zoom);
+
+    const xMin = d3.min(data, (d) => d.x);
+    const xMax = d3.max(data, (d) => d.x);
+    const yMin = d3.min(data, (d) => d.y);
+    const yMax = d3.max(data, (d) => d.y);
+
+    const xScale = d3
+      .scaleLinear()
+      .domain([xMin, xMax]) // Use the full range of your data
+      .range([0, plotWidth]);
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([yMin, yMax]) // Use the full range of your data
+      .range([plotHeight, 0]);
+
+    // Add contours
+    const contourData = d3Contour
+      .contourDensity()
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y))
+      .size([plotWidth, plotHeight])
+      .bandwidth(5)(
+        // Adjust the bandwidth as needed
+        data,
+      );
+
+    // Define a color scale for the contours to add visual depth and appeal
+    const colorScale = d3.scaleSequential(d3.interpolateTurbo) // Using d3.interpolateTurbo for vibrant colors
+      .domain([0, d3.max(contourData, d => d.value)]); // Dynamically set the domain based on data density
+
+
+    // Define a custom color for the contour lines
+
+    const contourLineColor = "rgb(94, 163, 252)";
+
+    // Append the contour path to the SVG with a custom color
+    g
+      .selectAll("path.contour")
+      .data(contourData)
+      .enter()
+      .append("path")
+      .attr("class", "contour")
+      .attr("d", d3.geoPath())
+      .style("fill", "lightgreen")
+      .attr("fill", d => colorScale(d.value)) // Apply color based on data density
+
+      .style("stroke", contourLineColor) // Set the contour line color to the custom color
+      .style("stroke-width", 1);
+
+    const centroids = data.filter((d) => d.x_centroid && d.y_centroid);
+    setTopicsCentroids(centroids);
+
+    g
+      .selectAll("circle.topic-centroid")
+      .data(centroids)
+      .enter()
+      .append("circle")
+      .attr("class", "topic-centroid")
+      .attr("cx", (d) => xScale(d.x_centroid))
+      .attr("cy", (d) => yScale(d.y_centroid))
+      .attr("r", 8) // Adjust the radius as needed
+      .style("fill", "red") // Adjust the fill color as needed
+      .style("stroke", "black")
+      .style("stroke-width", 2)
+      .on("click", (event, d) => {
+        // Show the content and topic name of the clicked topic centroid in the text container
+        setSelectedDocument(d);
+      });
+
+
+
+    // Add text labels for topic names
+    g
+      .selectAll("rect.topic-label-background")
+      .data(centroids)
+      .enter()
+      .append("rect")
+      .attr("class", "topic-label-background")
+      .attr("x", (d) => {
+        // Calculate the width of the text
+        const first10Words = d.name.split(' ').slice(0, 8).join(' ');
+        const textLength = first10Words.length * 8; // Adjust the multiplier for width as needed
+
+        // Calculate the x position to center the box
+        return xScale(d.x_centroid) - textLength / 2;
+      }) // Center the box horizontally
+      .attr("y", (d) => yScale(d.y_centroid) - 20) // Adjust the y position
+      .attr("width", (d) => {
+        // Compute the width based on the text's length
+        const first10Words = d.name.split(' ').slice(0, 8).join(' ');
+        const textLength = first10Words.length * 8; // Adjust the multiplier for width as needed
+        return textLength;
+      })
+      .attr("height", 30) // Set the height of the white box
+      .style("fill", "white") // Set the white fill color
+      .style("stroke", "grey") // Set the blue border color
+      .style("stroke-width", 2); // Set the border width
+
+    // Add text labels in black within the white boxes
+    g
+      .selectAll("text.topic-label-text")
+      .data(centroids)
+      .enter()
+      .append("text")
+      .attr("class", "topic-label-text")
+      .attr("x", (d) => xScale(d.x_centroid))
+      .attr("y", (d) => yScale(d.y_centroid) + 4) // Adjust the vertical position
+      .text((d) => {
+        const first10Words = d.name.split(' ').slice(0, 8).join(' ');
+        return first10Words;
+      }) // Use the first 10 words
+      .style("text-anchor", "middle") // Center-align the text
+      .style("fill", "black"); // Set the text color
+
+    const convexHullData = data.filter((d) => d.convex_hull);
+
+    for (const d of convexHullData) {
+      const hull = d.convex_hull;
+      const hullPoints = hull.x_coordinates.map((x, i) => [xScale(x), yScale(hull.y_coordinates[i])]);
+
+      g
+        .append("path")
+        .datum(d3.polygonHull(hullPoints))
+        .attr("class", "convex-hull-polygon")
+        .attr("d", (d1) => `M${d1.join("L")}Z`)
+        .style("fill", "none")
+        .style("stroke", "rgba(255, 255, 255, 0.5)") // White with 50% transparency
+        .style("stroke-width", 2);
+    }
+
+    // Add polygons for topics. Delete if no clicking on polygons
+    const topicsPolygons = g
+      .selectAll("polygon.topic-polygon")
+      .data(centroids)
+      .enter()
+      .append("polygon")
+      .attr("class", "topic-polygon")
+      .attr("points", (d) => {
+        const hull = d.convex_hull;
+        const hullPoints = hull.x_coordinates.map((x, i) => [xScale(x), yScale(hull.y_coordinates[i])]);
+        return hullPoints.map((point) => point.join(",")).join(" ");
+      })
+      .style("fill", "transparent")
+      .style("stroke", "transparent")
+      .style("stroke-width", 2); // Adjust the border width as needed
+
+    let currentlyClickedPolygon = null;
+
+    function clickFirstPolygon() {
+      // Simulate a click event on the first polygon
+      const firstPolygon = d3.select(topicsPolygons.nodes()[0]);
+      firstPolygon.node().dispatchEvent(new Event("click"));
+    }
+
+
+    topicsPolygons.on("click", (event, d) => {
+      // Reset the fill color of the previously clicked polygon to transparent light grey
+      if (currentlyClickedPolygon !== null) {
+        currentlyClickedPolygon.style("fill", "transparent");
+        currentlyClickedPolygon.style("stroke", "transparent");
+      }
+
+      // Set the fill color of the clicked polygon to transparent light grey and add a red border
+      const clickedPolygon = d3.select(event.target);
+      clickedPolygon.style("fill", "rgba(200, 200, 200, 0.4)");
+      clickedPolygon.style("stroke", "red");
+
+      currentlyClickedPolygon = clickedPolygon;
+
+
+      // Display the topic name and content from top_doc_content with a scroll system
+      if (d.top_doc_content) {
+        // Render the TextContainer component with topic details
+        setSelectedDocument(d);
+      }
+    });
+
+    clickFirstPolygon();
+
+  };
+
+  useEffect(() => {
+    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
+      setMapLoading(true);
+      // Fetch the JSON data locally
+      fetch(`/${bunkaDocs}`)
+        .then((response) => response.json())
+        .then((localData) => {
+          // Fetch the local topics data and merge it with the existing data
+          fetch(`/${bunkaTopics}`)
+            .then((response) => response.json())
+            .then((topicsData) => {
+              // Merge the topics data with the existing data
+              const mergedData = localData.concat(topicsData);
+
+              // Call the function to create the scatter plot after data is loaded
+              createScatterPlot(mergedData);
+            })
+            .catch((error) => {
+              console.error("Error fetching topics data:", error);
+            })
+            .finally(() => {
+              setMapLoading(false);
+            });
+        })
+        .catch((error) => {
+          console.error("Error fetching JSON data:", error);
+        })
+        .finally(() => {
+          setMapLoading(false);
+        });
+    } else {
+      // Call the function to create the scatter plot with the data provided by TopicsContext
+      createScatterPlot(apiData.docs.concat(apiData.topics));
+    }
+
+    // After the data is loaded, set the default topic
+    if (apiData && apiData.topics && apiData.topics.length > 0) {
+      // Set the default topic to the first topic in the list
+      setSelectedDocument(apiData.topics[0]);
+    }
+  }, [apiData]);
+
+
+  const mapDescription = "This map is created by embedding documents in a two-dimensional space. Two documents are close to each other if they share similar semantic features, such as vocabulary, expressions, and language. The documents are not directly represented on the map; instead, they are grouped into clusters. A cluster is a set of documents that share similarities. A cluster  is automatically described by a few words that best describes it.";
+
+  return (
+    <div className="json-display">
+      {(isFileProcessing || mapLoading) ? (
+        <Backdrop open={isFileProcessing || mapLoading} style={{ zIndex: 9999 }}>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      ) : (
+        <div className="scatter-plot-and-text-container">
+          <div className="scatter-plot-container" ref={scatterPlotContainerRef}>
+            <HtmlTooltip
+              title={
+                <React.Fragment>
+                  <Typography color="inherit">{mapDescription}</Typography>
+                </React.Fragment>
+              }
+              followCursor
+            >
+              <HelpIcon style={{
+                position: "relative",
+                top: 10,
+                left: 40,
+                border: "none"
+              }} />
+            </HtmlTooltip>
+            <svg ref={svgRef} />
+          </div>
+          <div className="text-container">
+            {selectedDocument ? (
+              <TextContainer
+                topicName={selectedDocument.name}
+                topicSizeFraction={topicsSizeFraction(topicsCentroids, selectedDocument.size)}
+                content={selectedDocument.top_doc_content}
+              />
+            ) : (
+              // Display a default view or null if no document is selected
+              null
+            )}
+          </div>
+
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MapView;

src/Map_original.jsx

@@ -0,0 +1,334 @@
+import { Backdrop, CircularProgress, Button, Box } from "@mui/material";
+import HelpIcon from '@mui/icons-material/Help';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import RepeatIcon from '@mui/icons-material/Repeat';
+import { styled } from '@mui/material/styles';
+
+import * as d3 from "d3";
+import * as d3Contour from "d3-contour";
+import React, { useContext, useEffect, useRef, useState } from "react";
+
+import TextContainer, { topicsSizeFraction } from "./TextContainer";
+import { TopicsContext } from "./UploadFileContext";
+import QueryView from "./QueryView";
+
+const bunkaDocs = "bunka_docs.json";
+const bunkaTopics = "bunka_topics.json";
+const { REACT_APP_API_ENDPOINT } = process.env;
+
+/**
+ * Generic tooltip
+ */
+export const HtmlTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.popper}`]: {
+    backgroundColor: '#fff',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+  },
+}));
+
+function MapView() {
+  const [selectedDocument, setSelectedDocument] = useState(null);
+  const [mapLoading, setMapLoading] = useState(false);
+  const [topicsCentroids, setTopicsCentroids] = useState([])
+
+  const { data: apiData, isLoading: isFileProcessing } = useContext(TopicsContext);
+
+  const svgRef = useRef(null);
+  const scatterPlotContainerRef = useRef(null);
+  const createScatterPlot = (data) => {
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 50,
+      left: 50,
+    };
+    const plotWidth = window.innerWidth * 0.6;
+    const plotHeight = window.innerHeight - document.getElementById("top-banner").clientHeight - 50; // Adjust the height as desired
+
+    d3.select(svgRef.current).selectAll("*").remove();
+
+    const svg = d3
+      .select(svgRef.current)
+      .attr("width", "100%")
+      .attr("height", plotHeight);
+    /**
+    * SVG canvas group on which transforms apply.
+    */
+    const g = svg.append("g")
+      .classed("canvas", true)
+      .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    /**
+    * TODO Zoom.
+    */
+    const zoom = d3.zoom()
+      .scaleExtent([1, 3])
+      .translateExtent([[0, 0], [1000, 1000]])
+      .on("zoom", function ({ transform }) {
+        g.attr(
+          "transform",
+          `translate(${transform.x ?? 0}, ${transform.y ?? 0}) scale(${transform.k ?? 1})`
+        )
+        //positionLabels()
+        // props.setTransform?.({
+        //   x: transform.x,
+        //   y: transform.y,
+        //   k: transform.k
+        // })
+      });
+    svg.call(zoom);
+
+    /**
+     * Initial zoom.
+     */
+    // const defaultTransform = { k: 1 };
+    // const initialTransform = defaultTransform?.k != null
+    //   ? new ZoomTransform(
+    //     defaultTransform.k ?? 1,
+    //     defaultTransform.x ?? 0,
+    //     defaultTransform.y ?? 0
+    //   )
+    //   : d3.zoomIdentity;
+    // svg.call(zoom.transform, initialTransform);
+
+    const xMin = d3.min(data, (d) => d.x);
+    const xMax = d3.max(data, (d) => d.x);
+    const yMin = d3.min(data, (d) => d.y);
+    const yMax = d3.max(data, (d) => d.y);
+
+    const xScale = d3
+      .scaleLinear()
+      .domain([xMin, xMax]) // Use the full range of your data
+      .range([0, plotWidth]);
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([yMin, yMax]) // Use the full range of your data
+      .range([plotHeight, 0]);
+
+    // Add contours
+    const contourData = d3Contour
+      .contourDensity()
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y))
+      .size([plotWidth, plotHeight])
+      .bandwidth(30)(
+        // Adjust the bandwidth as needed
+        data,
+      );
+
+    // Define a custom color for the contour lines
+
+    const contourLineColor = "rgb(94, 163, 252)";
+
+    // Append the contour path to the SVG with a custom color
+    g
+      .selectAll("path.contour")
+      .data(contourData)
+      .enter()
+      .append("path")
+      .attr("class", "contour")
+      .attr("d", d3.geoPath())
+      .style("fill", "none")
+      .style("stroke", contourLineColor) // Set the contour line color to the custom color
+      .style("stroke-width", 1);
+
+    /*
+    const circles = svg.selectAll('circle')
+    .data(data)
+    .enter()
+    .append('circle')
+    .attr('cx', (d) => xScale(d.x))
+    .attr('cy', (d) => yScale(d.y))
+    .attr('r', 5)
+    .style('fill', 'lightblue')
+    .on('click', (event, d) => {
+        // Show the content and topic name of the clicked point in the text container
+        setSelectedDocument(d);
+        // Change the color to pink on click
+        circles.style('fill', (pointData) => (pointData === d) ? 'pink' : 'lightblue');
+    });
+    */
+
+    const centroids = data.filter((d) => d.x_centroid && d.y_centroid);
+    setTopicsCentroids(centroids);
+
+    g
+      .selectAll("circle.topic-centroid")
+      .data(centroids)
+      .enter()
+      .append("circle")
+      .attr("class", "topic-centroid")
+      .attr("cx", (d) => xScale(d.x_centroid))
+      .attr("cy", (d) => yScale(d.y_centroid))
+      .attr("r", 8) // Adjust the radius as needed
+      .style("fill", "red") // Adjust the fill color as needed
+      .style("stroke", "black")
+      .style("stroke-width", 2)
+      .on("click", (event, d) => {
+        // Show the content and topic name of the clicked topic centroid in the text container
+        setSelectedDocument(d);
+      });
+
+    // Add text labels for topic names
+    g
+      .selectAll("text.topic-label")
+      .data(centroids)
+      .enter()
+      .append("text")
+      .attr("class", "topic-label")
+      .attr("x", (d) => xScale(d.x_centroid))
+      .attr("y", (d) => yScale(d.y_centroid) - 12) // Adjust the vertical position
+      .text((d) => d.name) // Use the 'name' property for topic names
+      .style("text-anchor", "middle"); // Center-align the text
+
+    const convexHullData = data.filter((d) => d.convex_hull);
+
+    for (const d of convexHullData) {
+      const hull = d.convex_hull;
+      const hullPoints = hull.x_coordinates.map((x, i) => [xScale(x), yScale(hull.y_coordinates[i])]);
+
+      g
+        .append("path")
+        .datum(d3.polygonHull(hullPoints))
+        .attr("class", "convex-hull-polygon")
+        .attr("d", (d1) => `M${d1.join("L")}Z`)
+        .style("fill", "none")
+        .style("stroke", "rgba(255, 255, 255, 0.5)") // White with 50% transparency
+        .style("stroke-width", 2);
+    }
+
+    // Add polygons for topics. Delete if no clicking on polygons
+    const topicsPolygons = g
+      .selectAll("polygon.topic-polygon")
+      .data(centroids)
+      .enter()
+      .append("polygon")
+      .attr("class", "topic-polygon")
+      .attr("points", (d) => {
+        const hull = d.convex_hull;
+        const hullPoints = hull.x_coordinates.map((x, i) => [xScale(x), yScale(hull.y_coordinates[i])]);
+        return hullPoints.map((point) => point.join(",")).join(" ");
+      })
+      .style("fill", "transparent")
+      .style("stroke", "transparent")
+      .style("stroke-width", 2); // Adjust the border width as needed
+
+    let currentlyClickedPolygon = null;
+
+    topicsPolygons.on("click", (event, d) => {
+      // Reset the fill color of the previously clicked polygon to transparent light grey
+      if (currentlyClickedPolygon !== null) {
+        currentlyClickedPolygon.style("fill", "transparent");
+        currentlyClickedPolygon.style("stroke", "transparent");
+      }
+
+      // Set the fill color of the clicked polygon to transparent light grey and add a red border
+      const clickedPolygon = d3.select(event.target);
+      clickedPolygon.style("fill", "rgba(200, 200, 200, 0.4)");
+      clickedPolygon.style("stroke", "red");
+
+      currentlyClickedPolygon = clickedPolygon;
+
+      // Display the topic name and content from top_doc_content with a scroll system
+      if (d.top_doc_content) {
+        // Render the TextContainer component with topic details
+        setSelectedDocument(d);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
+      setMapLoading(true);
+      // Fetch the JSON data locally
+      fetch(`/${bunkaDocs}`)
+        .then((response) => response.json())
+        .then((localData) => {
+          // Fetch the local topics data and merge it with the existing data
+          fetch(`/${bunkaTopics}`)
+            .then((response) => response.json())
+            .then((topicsData) => {
+              // Merge the topics data with the existing data
+              const mergedData = localData.concat(topicsData);
+
+              // Call the function to create the scatter plot after data is loaded
+              createScatterPlot(mergedData);
+            })
+            .catch((error) => {
+              console.error("Error fetching topics data:", error);
+            })
+            .finally(() => {
+              setMapLoading(false);
+            });
+        })
+        .catch((error) => {
+          console.error("Error fetching JSON data:", error);
+        })
+        .finally(() => {
+          setMapLoading(false);
+        });
+    } else {
+      // Call the function to create the scatter plot with the data provided by TopicsContext
+      createScatterPlot(apiData.docs.concat(apiData.topics));
+    }
+
+    // After the data is loaded, set the default topic
+    if (apiData && apiData.topics && apiData.topics.length > 0) {
+      // Set the default topic to the first topic in the list
+      setSelectedDocument(apiData.topics[0]);
+    }
+  }, [apiData]);
+
+
+  const mapDescription = "This map is created by embedding documents in a two-dimensional space. Two documents are close to each other if they share similar semantic features, such as vocabulary, expressions, and language. The documents are not directly represented on the map; instead, they are grouped into clusters. A cluster is a set of documents that share similarities. A cluster  is automatically described by a few words that best describes it.";
+
+  return (
+    <div className="json-display">
+      {(isFileProcessing || mapLoading) ? (
+        <Backdrop open={isFileProcessing || mapLoading} style={{ zIndex: 9999 }}>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      ) : (
+        <div className="scatter-plot-and-text-container">
+          <div className="scatter-plot-container" ref={scatterPlotContainerRef}>
+            <HtmlTooltip
+              title={
+                <React.Fragment>
+                  <Typography color="inherit">{mapDescription}</Typography>
+                </React.Fragment>
+              }
+              followCursor
+            >
+              <HelpIcon style={{
+                position: "relative",
+                top: 10,
+                left: 40,
+                border: "none"
+              }} />
+            </HtmlTooltip>
+            <svg ref={svgRef} />
+          </div>
+          <div className="text-container" >
+            {selectedDocument !== null ? (
+              <>
+                {/* <Box sx={{ marginBottom: "1em" }}>
+                  <Button sx={{ width: "100%" }} component="label" variant="outlined" startIcon={<RepeatIcon />} onClick={() => setSelectedDocument(null)}>
+                    Upload another CSV file
+                  </Button>
+                </Box> */}
+                <TextContainer topicName={selectedDocument.name} topicSizeFraction={topicsSizeFraction(topicsCentroids, selectedDocument.size)} content={selectedDocument.top_doc_content} />
+              </>
+            ) : <QueryView />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MapView;

src/QueryView.jsx

@@ -0,0 +1,295 @@
+import ScheduleSendIcon from '@mui/icons-material/ScheduleSend';
+import {
+  Backdrop, // Import Backdrop component
+  Box,
+  Button,
+  CircularProgress, // Import CircularProgress component
+  Container,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  RadioGroup,
+  Radio,
+  FormControlLabel,
+  FormLabel,
+  Alert
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import Papa from "papaparse";
+import React, { useContext, useState, useCallback } from "react";
+import { TopicsContext } from "./UploadFileContext";
+
+const VisuallyHiddenInput = styled("input")({
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  overflow: "hidden",
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  whiteSpace: "nowrap",
+  width: 1,
+});
+
+function QueryView() {
+  const [fileData, setFileData] = useState([]);
+  const [selectedColumn, setSelectedColumn] = useState("");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedColumnData, setSelectedColumnData] = useState([]);
+  const [openSelector, setOpenSelector] = React.useState(false);
+  const [xLeftWord, setXLeftWord] = useState("past");
+  const [xRightWord, setXRightWord] = useState("future");
+  const [yTopWord, setYTopWord] = useState("positive");
+  const [yBottomWord, setYBottomWord] = useState("negative");
+  const [radiusSize, setRadiusSize] = useState(0.5);
+  const [nClusters, setNClusters] = useState(15);
+  const [minCountTerms, setMinCountTerms] = useState(1);
+  const [nameLength, setNameLength] = useState(3);
+  const [cleanTopics, setCleanTopics] = useState(false);
+  const [language, setLanguage] = useState("english");
+  const { uploadFile, isLoading, selectedView, refreshBourdieuQuery } = useContext(TopicsContext);
+  const [fileDataTooLong, setFileDataTooLong] = useState(false);
+  const [fileDataError, setFileDataError] = useState(null);
+
+  /**
+   * Column name selector handler
+   */
+  const handleClose = () => {
+    setOpenSelector(false);
+  };
+
+  const handleOpen = () => {
+    setOpenSelector(true);
+  };
+
+  /**
+   * Parse the CSV and take a sample to display the preview
+   * @param {*} file 
+   * @param {*} sampleSize 
+   * @returns 
+   */
+  const parseCSVFile = (file, sampleSize = 100) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const csvData = e.target.result;
+        const lines = csvData.split("\n");
+
+        setFileDataTooLong(lines.length > 10000);
+        // Take a sample of the first 500 lines to display preview
+        const sampleLines = lines.slice(0, sampleSize).join("\n");
+
+        Papa.parse(sampleLines, {
+          complete: (result) => {
+            resolve(result.data);
+          },
+          error: (parseError) => {
+            reject(parseError.message);
+          },
+        });
+      };
+      reader.readAsText(file);
+    });
+
+  /**
+   * Handler the file selection ui workflow
+   * @param {Event} e 
+   * @returns 
+   */
+  const handleFileChange = async (e) => {
+    const file = e.target.files[0];
+    setSelectedFile(file);
+
+    if (!file) return;
+    // prepare data for the preview Table
+    try {
+      const parsedData = await parseCSVFile(file);
+      setFileData(parsedData);
+      setSelectedColumn(""); // Clear the selected column when a new file is uploaded
+      if (fileDataTooLong === false) {
+        handleOpen();
+      }
+      else {
+        handleClose();
+      }
+    } catch (exc) {
+      setFileDataError("Error parsing the CSV file, please check your file before uploading");
+      console.error("Error parsing CSV:", exc);
+    }
+  };
+
+  const handleColumnSelect = (e) => {
+    const columnName = e.target.value;
+    setSelectedColumn(columnName);
+
+    // Extract the content of the selected column
+    const columnIndex = fileData[0].indexOf(columnName);
+    const columnData = fileData.slice(1).map((row) => row[columnIndex]);
+
+    setSelectedColumnData(columnData);
+  };
+
+  /**
+   * Launch the upload and processing
+   */
+  const handleProcessTopics = async () => {
+    // Return if no column selected
+    if (selectedColumnData.length === 0) return;
+
+    if (selectedFile && !isLoading) {
+      uploadFile(selectedFile, {
+        nClusters,
+        selectedColumn,
+        selectedView,
+        xLeftWord,
+        xRightWord,
+        yTopWord,
+        yBottomWord,
+        radiusSize,
+        nameLength,
+        minCountTerms,
+        language,
+        cleanTopics
+      });
+    }
+  };
+
+  const handleRefreshQuery = useCallback(async () => {
+    if (!isLoading) {
+      await refreshBourdieuQuery({
+        topic_param: {
+          n_clusters: nClusters,
+          name_lenght: nameLength,
+          min_count_terms: minCountTerms,
+          language: language,
+          clean_topics: cleanTopics
+        },
+        bourdieu_query: {
+          x_left_words: xLeftWord.split(","),
+          x_right_words: xRightWord.split(","),
+          y_top_words: yTopWord.split(","),
+          y_bottom_words: yBottomWord.split(","),
+          radius_size: radiusSize,
+        }
+      });
+    }
+  });
+
+  const openTableContainer = selectedColumnData.length > 0 && fileData.length > 0 && fileData.length <= 10000 && fileDataTooLong === false && fileDataError == null;
+
+  return (
+    <Container component="form">
+      {selectedView === "map" && (
+        <>
+          <Box marginBottom={2}>
+            <Button component="label" variant="outlined" endIcon={<ScheduleSendIcon />}>
+              Upload a CSV (max 10 000 lines) and queue processing
+              <VisuallyHiddenInput type="file" onChange={handleFileChange} required />
+            </Button>
+          </Box>
+          <Box marginBottom={2}>
+            <FormControl variant="outlined" fullWidth>
+              <InputLabel>Select a Column</InputLabel>
+              <Select value={selectedColumn} onChange={handleColumnSelect} onClose={handleClose} onOpen={handleOpen} open={openSelector}>
+                {fileData[0]?.map((header, index) => (
+                  <MenuItem key={`${header}`} value={header}>
+                    {header}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+        </>
+      )}
+      {isLoading ? (
+        <Backdrop open={isLoading} style={{ zIndex: 9999 }}>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      ) : (
+        // Content when not loading
+        <div>
+          {openTableContainer && (
+            <TableContainer component={Paper} style={{ maxHeight: "400px", overflowY: "auto" }}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>{selectedColumn}</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {selectedColumnData.map((cell, index) => (
+                    <TableRow key={`table-${index}`}>
+                      <TableCell>{cell}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+          {fileDataTooLong && (
+            <Alert severity="error">CSV must have less than 10 000 lines (this is a demo)</Alert>
+          )}
+          {fileDataError && (
+            <Alert severity="error">CSV must have less than 10 000 lines (this is a demo)</Alert>
+          )}
+          {selectedView === "bourdieu" && (
+            <Box marginTop={2} display="flex" alignItems="center" flexDirection="column">
+              <FormControl variant="outlined">
+                <TextField required id="input-bourdieu-xl" sx={{ marginBottom: "0.5em" }} label="X left words (comma separated)" variant="outlined" onChange={e => setXLeftWord(e.target.value)} value={xLeftWord} />
+                <TextField required id="input-bourdieu-xr" sx={{ marginBottom: "1em" }} label="X right words (comma separated)" variant="outlined" onChange={e => setXRightWord(e.target.value)} value={xRightWord} />
+                <TextField required id="input-bourdieu-yt" sx={{ marginBottom: "1em" }} label="Y top words (comma separated)" variant="outlined" onChange={e => setYTopWord(e.target.value)} value={yTopWord} />
+                <TextField required id="input-bourdieu-yb" sx={{ marginBottom: "1em" }} label="Y bottom words (comma separated)" variant="outlined" onChange={e => setYBottomWord(e.target.value)} value={yBottomWord} />
+                <TextField required id="input-bourdieu-radius" sx={{ marginBottom: "1em" }} label="Radius Size" variant="outlined" onChange={e => setRadiusSize(e.target.value)} value={radiusSize} />
+                <TextField required id="input-map-nclusters" sx={{ marginBottom: "1em" }} label="N° Clusters" variant="outlined" onChange={e => setNClusters(e.target.value)} value={nClusters} />
+                <TextField required id="input-map-namelength" sx={{ marginBottom: "1em" }} label="Name length" variant="outlined" onChange={e => setNameLength(e.target.value)} value={nameLength} />
+                <TextField required id="input-map-mincountterms" sx={{ marginBottom: "1em" }} label="Min Count Terms" variant="outlined" onChange={e => setMinCountTerms(e.target.value)} value={minCountTerms} />
+                <RadioGroup required name="cleantopics-radio-group" defaultValue={cleanTopics} onChange={e => setCleanTopics(e.target.value)} variant="outlined" sx={{ marginBottom: "1em" }} disabled>
+                  <FormLabel id="clean-topics-group-label">Clean Topics</FormLabel>
+                  <FormControlLabel value={true} label="Yes" control={<Radio />} disabled />
+                  <FormControlLabel value={false} label="No" control={<Radio />} disabled />
+                </RadioGroup>
+              </FormControl>
+              <Button variant="contained" color="primary" onClick={handleRefreshQuery} disabled={isLoading || fileDataTooLong === true || fileDataError !== null}>
+                {isLoading ? "Processing..." : "Refresh Bourdieu Axes"}
+              </Button>
+            </Box>
+          )}
+          {selectedView === "map" && (
+            <Box marginTop={2} display="flex" alignItems="center" flexDirection="column">
+              <Button variant="contained" color="primary" onClick={handleProcessTopics} disabled={selectedColumnData.length === 0 || isLoading || fileDataTooLong === true || fileDataError !== null}>
+                {isLoading ? "Processing..." : "Process Topics"}
+              </Button>
+              <FormControl variant="outlined" sx={{ marginTop: "1em", marginLeft: "1em" }}>
+                <TextField required id="input-map-nclusters" sx={{ marginBottom: "1em" }} label="N° Clusters" variant="outlined" onChange={e => setNClusters(e.target.value)} value={nClusters} />
+                <TextField required id="input-map-namelength" sx={{ marginBottom: "1em" }} label="Name length" variant="outlined" onChange={e => setNameLength(e.target.value)} value={nameLength} />
+                <TextField required id="input-map-mincountterms" sx={{ marginBottom: "1em" }} label="Min Count Terms" variant="outlined" onChange={e => setMinCountTerms(e.target.value)} value={minCountTerms} />
+                <RadioGroup required name="cleantopics-radio-group" defaultValue={cleanTopics} onChange={e => setCleanTopics(e.target.value)} variant="outlined" sx={{ marginBottom: "1em" }} disabled>
+                  <FormLabel id="clean-topics-group-label">Clean Topics</FormLabel>
+                  <FormControlLabel value={true} label="Yes" control={<Radio />} disabled />
+                  <FormControlLabel value={false} label="No" control={<Radio />} disabled />
+                </RadioGroup>
+                <RadioGroup required name="language-radio-group" defaultValue={language} onChange={e => setLanguage(e.target.value)} variant="outlined" sx={{ marginBottom: "1em" }}>
+                  <FormLabel id="language-group-label">Language</FormLabel>
+                  <FormControlLabel value="french" label="fr" control={<Radio />} />
+                  <FormControlLabel value="english" label="en" control={<Radio />} />
+                </RadioGroup>
+              </FormControl>
+            </Box>
+          )}
+        </div>
+      )}
+    </Container>
+  );
+}
+
+export default QueryView;

src/TextContainer.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import DescriptionIcon from '@mui/icons-material/Description';
+import TextField from "@mui/material/TextField";
+
+export const topicsSizeFraction = (topicsCentroids, topicSize) => {
+  const totalSize = topicsCentroids.reduce((sum, topic) => sum + topic.size, 0);
+  return Math.round((topicSize / totalSize) * 100);
+}
+
+
+
+function TextContainer({ topicName, topicSizeFraction, content }) {
+  const [selectedDocument, setSelectedDocument] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredContent, setFilteredContent] = useState([]);
+
+  useEffect(() => {
+    // Update the filtered content based on the search query
+    if (searchQuery.trim() === "") {
+      setFilteredContent(content);
+    } else {
+      const filtered = content.filter((doc) =>
+        doc.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      setFilteredContent(filtered);
+    }
+
+    // Automatically select the first document when search results change
+    setSelectedDocument(0);
+  }, [searchQuery, content]);
+
+  const handleDocumentClick = (docIndex) => {
+    setSelectedDocument(docIndex);
+  };
+
+  return (
+    <div id="topic-box-container">
+      <Box className="topic-box">
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            background: "rgb(94, 163, 252)",
+            padding: "8px",
+            color: "white",
+            textAlign: "center",
+            borderRadius: "20px", // Make it rounder
+            margin: "0 auto", // Center horizontally
+            width: "80%", // Adjust the width as needed
+          }}
+        >
+          <Typography variant="h6" style={{ marginBottom: "8px" }}>
+            {topicName}
+          </Typography>
+
+
+        </Box>
+        <Typography
+          variant="h5"
+          style={{
+            marginBottom: "20px",
+            marginTop: "20px",
+            textAlign: "center",
+          }}
+        >
+          {topicSizeFraction}% of the Territory
+        </Typography>
+        <TextField
+          label="Search"
+          variant="outlined"
+          fullWidth
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <Paper elevation={3} style={{ maxHeight: "70vh", overflowY: "auto" }}>
+          <List>
+            {filteredContent.map((doc, index) => (
+              <ListItem
+                button
+                key={`textcontainerdoc-${index}`}
+                onClick={() => handleDocumentClick(index)}
+                selected={selectedDocument === index}
+              >
+                <ListItemIcon>
+                  <DescriptionIcon /> {/* Display a document icon */}
+                </ListItemIcon>
+                <ListItemText primary={<span style={{ fontSize: "14px" }}>{doc}</span>} />
+              </ListItem>
+            ))}
+          </List>
+        </Paper>
+        <Box
+          style={{
+            marginTop: "20px",
+            padding: "8px",
+            width: "80%", // Adjust the width as needed
+            margin: "0 auto", // Center horizontally
+          }}
+        >
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+TextContainer.propTypes = {
+  topicName: PropTypes.string.isRequired,
+  topicSizeFraction: PropTypes.number.isRequired,
+  content: PropTypes.array.isRequired,
+};
+
+export default TextContainer;

src/TreemapView.jsx

@@ -0,0 +1,124 @@
+import { Backdrop, CircularProgress, List, ListItem, Paper, Typography } from "@mui/material";
+import * as d3 from "d3";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { TopicsContext } from "./UploadFileContext";
+
+const bunkaTopics = "bunka_topics.json";
+const { REACT_APP_API_ENDPOINT } = process.env;
+
+function TreemapView() {
+  const svgRef = useRef(null);
+  const [selectedTopic, setSelectedTopic] = useState({ name: "", content: [] });
+  const { data: apiData, isLoading } = useContext(TopicsContext);
+
+  const createTreemap = useCallback((data) => {
+    const width = window.innerWidth * 0.6; // Adjust the width for the treemap
+    const height = 800; // Adjust the height as needed
+
+    const svg = d3.select(svgRef.current).attr("width", width).attr("height", height);
+
+    const root = d3.hierarchy({ children: data }).sum((d) => d.size);
+
+    const treemapLayout = d3.treemap().size([width, height]).padding(1).round(true);
+
+    treemapLayout(root);
+
+    const cell = svg
+      .selectAll("g")
+      .data(root.leaves())
+      .enter()
+      .append("g")
+      .attr("transform", (d) => `translate(${d.x0},${d.y0})`)
+      .on("click", (event, d) => {
+        const topicName = d.data.name;
+        const topicContent = d.data.top_doc_content || [];
+
+        setSelectedTopic({ name: topicName, content: topicContent });
+      });
+
+    cell
+      .append("rect")
+      .attr("width", (d) => d.x1 - d.x0)
+      .attr("height", (d) => d.y1 - d.y0)
+      .style("fill", "lightblue")
+      .style("stroke", "blue");
+
+    cell
+      .append("text")
+      .selectAll("tspan")
+      .data((d) => {
+        const text = d.data.name.split(/(?=[A-Z][^A-Z])/g); // Split topic name on capital letters
+        return text;
+      })
+      .enter()
+      .append("tspan")
+      .attr("x", 3)
+      .attr("y", (d, i) => 13 + i * 10)
+      .text((d) => d);
+
+    svg.selectAll("text").attr("font-size", 13).attr("fill", "black");
+  }, []);
+
+  useEffect(() => {
+    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {
+      // Fetch the JSON data locally
+      fetch(`/${bunkaTopics}`)
+        .then((response) => response.json())
+        .then((localData) => {
+          createTreemap(localData);
+        })
+        .catch((error) => {
+          console.error("Error fetching JSON data:", error);
+        });
+    } else {
+      // Call the function with the data provided by TopicsContext
+      createTreemap(apiData.topics);
+    }
+  }, [apiData, createTreemap]);
+
+  return (
+    <div>
+      <h2>Treemap View</h2>
+      {isLoading ? (
+        <Backdrop open={isLoading} style={{ zIndex: 9999 }}>
+          <CircularProgress color="primary" />
+        </Backdrop>
+      ) : (
+        <div style={{ display: "flex" }}>
+          <svg ref={svgRef} style={{ marginRight: "20px" }} />
+          <div
+            style={{
+              width: window.innerWidth * 0.25,
+              maxHeight: "800px",
+              overflowY: "auto",
+            }}
+          >
+            <Paper>
+              <Typography
+                variant="h4"
+                style={{
+                  position: "sticky",
+                  top: 0,
+                  backgroundColor: "white",
+                  color: "blue",
+                }}
+              >
+                {selectedTopic.name}
+              </Typography>
+              {selectedTopic.content.map((doc, index) => (
+                <List key={doc.id}>
+                  <ListItem>
+                    <Typography variant="h5">{doc}</Typography>
+                  </ListItem>
+                </List>
+              ))}
+              {selectedTopic.content.length === 0 && <Typography variant="h4">Click on a Square.</Typography>}
+            </Paper>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TreemapView;

src/UploadFileContext.css

@@ -0,0 +1,31 @@
+/* CSS for Error Message */
+.errorMessage {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  z-index: 1000;
+}
+
+/* CSS for Loader */
+.loader {
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 400px;
+  height: 400px;
+  animation: spin 2s linear infinite;
+
+  /* Positioning */
+  position: fixed;
+  top: 100px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/UploadFileContext.jsx

@@ -0,0 +1,219 @@
+import { Alert, Box, Typography, Backdrop } from "@mui/material";
+import CircularProgress from '@mui/material/CircularProgress';
+import axios from "axios";
+import PropTypes from "prop-types";
+import React, { createContext, useCallback, useEffect, useMemo, useState } from "react";
+
+// Create the Context
+export const TopicsContext = createContext();
+
+const { REACT_APP_API_ENDPOINT } = process.env;
+
+const TOPICS_ENDPOINT_PATH = `${REACT_APP_API_ENDPOINT}/topics/csv/`;
+const BOURDIEU_ENDPOINT_PATH = `${REACT_APP_API_ENDPOINT}/bourdieu/csv/`;
+const REFRESH_BOURDIEU_ENDPOINT_PATH = `${REACT_APP_API_ENDPOINT}/bourdieu/refresh/`;
+
+// Fetcher functions
+const postForm = (url, data) =>
+  axios
+    .post(url, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    })
+    .then((res) => res.data);
+
+const postJson = (url, data) =>
+  axios
+    .post(url, data, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then((res) => res.data);
+
+// Provider Component
+export function TopicsProvider({ children, onSelectView, selectedView }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState();
+  const [bourdieuData, setBourdieuData] = useState();
+  const [error, setError] = useState();
+  const [errorText, setErrorText] = useState("");
+  const [taskProgress, setTaskProgress] = useState(0); // TODO Add state for task progress when the backend is ready
+  const [taskID, setTaskID] = useState(null); // Add state for task ID
+  const [currentDatasetId, setCurrentDatasetId] = useState(null); // Current Dataset Id equals Task Id for the moment
+
+  const monitorTaskProgress = async (selectedView, taskId) => {
+    const evtSource = new EventSource(`${REACT_APP_API_ENDPOINT}/tasks/${selectedView === "map" ? "topics" : "bourdieu"}/${taskId}/progress`);
+    evtSource.onmessage = function (event) {
+      try {
+        const data = JSON.parse(event.data);
+        const progress = !isNaN(Math.ceil(data.progress)) ? Math.ceil(data.progress) : 0;
+        console.log("Task Progress:", progress);
+        setTaskProgress(progress); // Update progress in state
+        if (data.state === "SUCCESS") {
+          if (selectedView === "map") {
+            setData({
+              docs: data.result.docs,
+              topics: data.result.topics
+            });
+            setBourdieuData(data.result.bourdieu_response);
+          } else if (selectedView === "bourdieu") {
+            setBourdieuData(data.result);
+          }
+          setTaskProgress(100);
+          evtSource.close();
+          setIsLoading(false);
+          setTaskID(null);
+          if (onSelectView) onSelectView(selectedView);
+        } else if (data.state === "FAILURE") {
+          setError(data.error);
+          setTaskProgress(0);
+          evtSource.close();
+          setIsLoading(false);
+          evtSource.close();
+        }
+      } catch (error) {
+        console.error("EventSource exception");
+        console.error(error);
+        setError(error);
+        evtSource.close();
+        setIsLoading(false);
+      }
+    };
+  };
+
+  // Handle File Upload and POST Request
+  const uploadFile = useCallback(
+    async (file, params) => {
+      setIsLoading(true);
+      setErrorText("");
+      const { nClusters, selectedColumn, selectedView, xLeftWord, xRightWord, yTopWord, yBottomWord, radiusSize } = params;
+      const { nameLength, language, cleanTopics, minCountTerms } = params;
+
+      try {
+        // Generate SHA-256 hash of the file
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("selected_column", selectedColumn);
+        formData.append("n_clusters", nClusters);
+        formData.append("name_length", nameLength);
+        formData.append("language", language);
+        formData.append("clean_topics", cleanTopics);
+        formData.append("min_count_terms", minCountTerms);
+        // Append bourdieu parameters, processing activated by defaut
+        formData.append("process_bourdieu", true);
+        formData.append("x_left_words", xLeftWord);
+        formData.append("x_right_words", xRightWord);
+        formData.append("y_top_words", yTopWord);
+        formData.append("y_bottom_words", yBottomWord);
+        formData.append("radius_size", radiusSize);
+
+        const apiURI = `${selectedView === "map" ? TOPICS_ENDPOINT_PATH : BOURDIEU_ENDPOINT_PATH}`;
+        // Perform the POST request
+        const response = await postForm(apiURI, formData);
+        setTaskID(response.task_id);
+        setCurrentDatasetId(response.task_id);
+        await monitorTaskProgress(selectedView, response.task_id); // Start monitoring task progress
+      } catch (errorExc) {
+        // Handle error
+        setError(errorExc);
+        setTaskID(null);
+        setCurrentDatasetId(null);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [monitorTaskProgress],
+  );
+
+  const refreshBourdieuQuery = useCallback(
+    async (params) => {
+      setIsLoading(true);
+      setErrorText("");
+      if (currentDatasetId !== null) {
+        try {
+          const apiURI = `${REFRESH_BOURDIEU_ENDPOINT_PATH}${currentDatasetId}`;
+          // Perform the POST request
+          const response = await postJson(apiURI, params);
+          setBourdieuData(response);
+        } catch (errorExc) {
+          // Handle error
+          setError(errorExc);
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        setIsLoading(false);
+        setError("Please import a CSV from the Map view before querying");
+      }
+    },
+    [monitorTaskProgress],
+  );
+
+  /**
+   * Handle request errors
+   */
+  useEffect(() => {
+    if (error) {
+      const message = error.response?.data?.message || error.message || `${error}` || "An unknown error occurred";
+      setErrorText(`Error uploading file.\n${message}`);
+      console.error("Error uploading file:", message);
+    }
+  }, [error]);
+
+  /**
+   * Shared functions and variables of this TopicsContext and TopicsProvider
+   */
+  const providerValue = useMemo(
+    () => ({
+      data,
+      bourdieuData,
+      uploadFile,
+      isLoading,
+      error,
+      selectedView,
+      refreshBourdieuQuery
+    }),
+    [data, uploadFile, isLoading, error, selectedView, refreshBourdieuQuery],
+  );
+
+  // const normalisePercentage = (value) => Math.ceil((value * 100) / 100);
+
+  return (
+    <TopicsContext.Provider value={providerValue}>
+      <>
+        {isLoading && <div className="loader" />}
+        {/* Display a progress bar based on task progress */}
+        {taskID && (
+          <Backdrop
+            sx={{ zIndex: 99999 }}
+            open={taskID !== undefined}
+          >
+            <Box display={"flex"} width="30%" alignItems={"center"} flexDirection={"column"} sx={{ backgrounColor: "#FFF", fontSize: 20, fontWeight: 'medium' }}>
+              <Box minWidth={200}>
+                <Typography variant="h4">Bunka is cooking your data, please wait few seconds</Typography>
+              </Box>
+              <CircularProgress />
+              {/* <Box minWidth={35}>
+                <Typography variant="subtitle">{`${normalisePercentage(taskProgress)}%`}</Typography>
+              </Box> */}
+            </Box>
+          </Backdrop>
+        )}
+
+        {errorText && (
+          <Alert severity="error" className="errorMessage">
+            {errorText}
+          </Alert>
+        )}
+        {children}
+      </>
+    </TopicsContext.Provider>
+  );
+}
+
+TopicsProvider.propTypes = {
+  children: PropTypes.func.isRequired,
+  onSelectView: PropTypes.func.isRequired,
+};

src/index.css

@@ -0,0 +1,211 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.json-display {
+  font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  min-height: 90vh;
+  overflow-y: hidden;
+
+}
+
+.top-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /* Center vertically */
+  min-height: 3vh;
+}
+
+.linkedin-icon img {
+  width: 50px;
+  /* Adjust the width to your desired size */
+  height: auto;
+  /* Maintain aspect ratio */
+}
+
+/* Style for the Bunka logo */
+.bunka-logo {
+  /* Set the width and height to make the logo smaller */
+  width: 200px;
+  /* Adjust the width as desired */
+  height: fit-content;
+  /* Maintain aspect ratio */
+  margin-top: 1em;
+}
+
+.topic-title {
+  word-spacing: 10px;
+  /* Adjust the spacing as needed */
+}
+
+
+/* Add or modify the following CSS for the LinkedIn icon */
+.linkedin-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  /* Adjust the width and height to make the logo smaller */
+}
+
+.linkedin-icon img {
+  width: 50px;
+  /* Adjust the width to your desired size */
+  height: auto;
+  /* Maintain aspect ratio */
+}
+
+.scatter-plot-and-text-container {
+  display: flex;
+  min-height: 89vh;
+}
+
+.scatter-plot-container {
+  display: flex;
+  width: 100%;
+}
+
+svg {
+  border: none;
+}
+
+.scatter-plot-container svg {
+  background-color: #9bdbfb;
+  border: 1px solid #ddd;
+  cursor: grab;
+}
+
+.scatter-plot-container svg .tick text {
+  font-size: 1.4em;
+}
+
+.text-container {
+  width: 35%;
+  min-width: 100px;
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+
+/* Style for the title */
+h2 {
+  font-size: 50px;
+  /* Specify the unit, e.g., 'px' */
+  margin: 10px 0;
+  color: rgb(24, 113, 222);
+  align-items: center;
+}
+
+/* Style for the text content within the text container */
+.text-container p {
+  margin: 10px;
+  padding: 2px 0;
+
+}
+
+
+/* Style for the scatter plot circles */
+circle {
+  cursor: pointer;
+  transition: fill 0.3s;
+}
+
+/* Style for clicked circles */
+circle.clicked {
+  fill: pink;
+}
+
+/* Style for the contour lines */
+path.contour {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+}
+
+.box {
+  border: 3px solid #ccc;
+  padding: 10px;
+  background-color: white;
+  cursor: pointer;
+  margin: 30px;
+  /* Add margin to create space between each box */
+}
+
+.box.clicked {
+  background-color: lightgray;
+}
+
+/* Style for the fixed header container */
+.topic-container {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Style for the topic title inside the title box */
+.topic-title {
+  margin: 0;
+}
+
+/* Style for the main content box */
+.topic-content {
+  padding-top: 40px;
+  /* Adjust as needed to provide space for the fixed title */
+}
+
+/* Style for the content container */
+.content-container {
+  display: flex;
+}
+
+/* Style for the topic title inside the title box */
+.topic-title {
+  margin: 0;
+}
+
+.csv-upload-container {
+  margin-top: 50px;
+  flex: 1;
+  align-items: left;
+  margin-left: 0;
+  /* Remove margin from the left side */
+
+  /* Adjust the margin as needed */
+}
+
+
+.csv-upload-input {
+  margin-top: 50px;
+  flex: 1;
+  align-items: left;
+  margin-left: 0;
+  /* Remove margin from the left side */
+
+  /* Adjust the margin as needed */
+}
+
+.topic-box {
+  /* Adjust the maximum height as needed */
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-box h2 {
+  position: sticky;
+  top: 0;
+  background-color: white;
+  align-self: center;
+  /* Set the background color to your desired value */
+}
+
+.content-container {
+  /* Adjust these styles as needed */
+  flex: 1;
+  overflow-y: auto;
+}

src/index.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";