Merge branch 'feature/documentation-updates' into 'main'

GiacomoXT · GiacomoXT · commit 1f9f09bd26c6 · 2023-11-21T18:24:41.000+01:00
Update of the documentation and links

See merge request belle2/software/display!1
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# Belle2 GSoC 2023
+# Belle II Event Display with Phoenix - GSoC 2023
 
-This Angular CLI web app displays a Belle2 event using Phoenix, a TypeScript-based event display framework.
+This Angular CLI web app displays Belle II events using Phoenix, a TypeScript-based event display framework.
 <br>
-The web app has been deployed and can be accessed through [belle2-gsoc-2023-hieu-gsoc-draft.netlify.app](https://belle2-gsoc-2023-hieu-gsoc-draft.netlify.app/#/)
+The web app has been deployed and can be accessed through [display.belle2.org](https://display.belle2.org)
 
 In order to run the application on your local machine, please perform the following steps.
 <br>
@@ -26,7 +26,7 @@ In order to run the application on your local machine, please perform the follow
 
 The web application serves as a tool that allows scientists and physicists to import events from mdst `.root` files, which contain data, and then view them directly in a web browser. By leveraging the Phoenix framework and adding custom features, the application provides a user-friendly environment for event display, complete with intuitive user interface controls.
 
-For more detailed instructions on how to use and develop the app, please refer to the [documentation](https://belle2-gsoc-2023-hieu-docs.netlify.app/).
+For more detailed instructions on how to use and develop the app, please refer to the [documentation](https://display.belle2.org/documentation).
 
 *The documentation is created using Sphinx and its source file is located in the `docs/` folder.*
 
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -10,7 +10,7 @@
 import sys
 sys.path.insert(0, pathlib.Path(__file__).parents[2].resolve().as_posix())
 
-project = 'Belle II Event Display'
+project = 'Belle II Event Display with Phoenix'
 copyright = '2023, Hieu Le Cong Minh'
 author = 'Hieu Le Cong Minh'
 release = '0.1'
@@ -31,5 +31,5 @@
 # -- Options for HTML output -------------------------------------------------
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
 
-html_theme = 'sphinx_rtd_theme'
-html_static_path = ['_static']
+html_theme = 'sphinx_book_theme'
+# html_static_path = ['_static']
diff --git a/docs/source/developer.rst b/docs/source/developer.rst
@@ -3,11 +3,11 @@ Developer Documentation
 
 The deployed web application can be accessed through this `link`_.
 
-.. _link: https://belle2-gsoc-2023-hieu-gsoc-draft.netlify.app/
+.. _link: https://display.belle2.org
 
 For usage and manipulation, please refer to the :doc:`user` section.
 
-The source code for the Belle II event display project is stored in the `GitHub repository`_.
+The source code for the Belle II Event Display with Phoenix project is stored in the `GitHub repository`_.
 
 .. _GitHub repository: https://github.com/belle2/display
 
diff --git a/docs/source/developer/event_display.rst b/docs/source/developer/event_display.rst
@@ -6,9 +6,9 @@ This documentation assumes you already possess a basic understanding of Phoenix
 Customized Event Objects
 ------------------------
 
-Within the Belle II event display, four types of objects are presented: Tracks, MCParticles, ECLClusters, and KLMClusters. While Phoenix's existing design represents Tracks, the others are directly rendered using ThreeJS. This approach ensures seamless visualization alignment with the context of Belle II.
+Within the event display, four types of objects are presented: Tracks, MCParticles, ECLClusters, and KLMClusters. While Phoenix's existing design represents Tracks, the others are directly rendered using ThreeJS. This approach ensures seamless visualization alignment with the context of Belle II.
 
-To create customized event objects (e.g., Hits), please refer to the Phoenix `event-data-loader`_ documentation. The custom object files within the Belle II display repository are stored in the ``display/src/loaders/objects/`` folder. You can adjust the visualization characteristics (thickness, default color, etc.) of objects using ThreeJS framework syntax.
+To create customized event objects (e.g., Hits), please refer to the Phoenix `event-data-loader`_ documentation. The custom object files within the event display repository are stored in the ``display/src/loaders/objects/`` folder. You can adjust the visualization characteristics (thickness, default color, etc.) of objects using ThreeJS framework syntax.
 
 .. _event-data-loader: https://github.com/HSF/phoenix/blob/main/guides/developers/event-data-loader.md
 
@@ -21,7 +21,7 @@ Additionally, Phoenix offers some `default objects`_ in its codebase. If they me
 UI Modification
 ---------------
 
-The frontend of the Belle II display web application is built on the Angular framework. Therefore, to modify the user interface for this project, Angular knowledge is required.
+The frontend of the event display application is built on the Angular framework. Therefore, to modify the user interface for this project, Angular knowledge is required.
 
 By default, the components for the web application are stored in the ``display/src/app/`` folder.
 
@@ -42,5 +42,5 @@ By default, the components for the web application are stored in the ``display/s
 
 Essentially, three main pages exist: the homepage, event display, and detector display, corresponding to the ``home/``, ``event-display/``, and ``detector/`` folders respectively in the ``display/src/app/`` folder. Additionally, the ``customized-components`` folder contains all customized Phoenix components.
 
-As this project is built on Phoenix, most UI components used here are obtained from ``phoenix-ui-components``, such as **Display Options** or the tools in the **UI Menu**. However, due to the unique characteristics of the Belle II event display, some tools (e.g., event selector, event import/export) need customization. To create customized components, it is essential to study existing Phoenix UI components and their usage. This is necessary because, when developing new components, you will need to seamlessly integrate them into the web framework built on Phoenix. In short, skills in handling both Angular and Phoenix are required.
+As this project is built on Phoenix, most UI components used here are obtained from ``phoenix-ui-components``, such as **Display Options** or the tools in the **UI Menu**. However, due to the unique characteristics of the event display, some tools (e.g., event selector, event import/export) need customization. To create customized components, it is essential to study existing Phoenix UI components and their usage. This is necessary because, when developing new components, you will need to seamlessly integrate them into the web framework built on Phoenix. In short, skills in handling both Angular and Phoenix are required.
 
diff --git a/docs/source/developer/installation.rst b/docs/source/developer/installation.rst
@@ -1,3 +1,5 @@
+.. _developer_installation:
+
 Installation
 ============
 
diff --git a/docs/source/developer/modules.rst b/docs/source/developer/modules.rst
@@ -4,7 +4,7 @@ Framework and Tools
 Phoenix
 -------
 
-The Belle II display web application is built based on Phoenix, a TypeScript-based event display framework. If you are starting to contribute to or modify the web application for the Belle II event display, it is strongly recommended to familiarize yourself with the Phoenix framework and how to use it.
+The Belle II Event Display with Phoenix application is built based on Phoenix, a TypeScript-based event display framework. If you are starting to contribute to or modify the event display, it is strongly recommended to familiarize yourself with the Phoenix framework and how to use it.
 
 You can access the Phoenix documentation by following this `link`_. Additionally, developers can find more `specialized guidance`_ available.
 
@@ -16,12 +16,12 @@ You can access the Phoenix documentation by following this `link`_. Additionally
 JSROOT
 ------
 
-Currently, the mdst data is stored in the .root file. To utilize the Phoenix framework and display the event in the browser, it is required to extract the data from the .root file and convert it into the form of a TypeScript object. For this task, JSRoot is used.
+Currently, the mdst data is stored in the *.root* file. To utilize the Phoenix framework and display the event in the browser, it is required to extract the data from the *.root* file and convert it into the form of a TypeScript object. For this task, JSRoot is used.
 
 You can find information on how to use JSRoot in its `documentation`_.
 
 .. _documentation: https://github.com/root-project/jsroot/blob/master/docs/JSROOT.md
 
-In this project, you can see the application of JSRoot in the file `event-loader.ts`_ for extracting event information from the mdst .root file.
+In this project, you can see the application of JSRoot in the file `event-loader.ts`_ for extracting event information from the mdst *.root* file.
 
 .. _event-loader.ts: https://github.com/belle2/display/blob/main/src/app/event-display/event-loader.ts
diff --git a/docs/source/developer/server.rst b/docs/source/developer/server.rst
@@ -1,7 +1,7 @@
 Server Integration
 ------------------
 
-The Belle II event display web application is built using the Angular CLI. To integrate the app with the Apache server, follow these steps.
+The event display web application is built using the Angular CLI. To integrate the app with the Apache server, follow these steps.
 
 1. **Build the App:**
    Run the following command from the project directory to build the app:
@@ -49,4 +49,4 @@ The Belle II event display web application is built using the Angular CLI. To in
 
    .. code-block:: console
 
-      $ sudo service apache2 restart
+      $ sudo service apache2 restart
diff --git a/docs/source/index.rst b/docs/source/index.rst
@@ -3,10 +3,12 @@
    You can adapt this file completely to your liking, but it should at least
    contain the root `toctree` directive.
 
-Belle II Event Display
-======================
+Belle II Event Display with Phoenix
+===================================
 
-**Belle II Event Display with Phoenix** is a project conducted during the Google Summer of Code 2023, aimed at providing a web-based tool for event display. The project's main objective is to enhance the usability and accessibility of Belle II results by allowing users to upload the *mdst .root* file and display the events on their browser. Both user documentation and developer documentation are included on this page.
+**Belle II Event Display with Phoenix** is a project conducted during the `Google Summer of Code 2023`_, aimed at providing a web-based tool for event display. The project's main objective is to enhance the usability and accessibility of Belle II results by allowing users to upload the mdst *.root* file and display the events on their browser. Both user documentation and developer documentation are included on this page.
+
+.. _Google Summer of Code 2023: https://hepsoftwarefoundation.org/gsoc/blogs/2023/blog_Belle2_HieuLeCongMinh.html
 
 .. toctree::
    :maxdepth: 2
@@ -16,4 +18,4 @@ Belle II Event Display
    developer
 
 Check out the :doc:`user` section for further information, including how to
-:ref:`manipulate <usage>` the application.
+:ref:`manipulate <usage>` the application.
diff --git a/docs/source/user.rst b/docs/source/user.rst
@@ -3,12 +3,13 @@ User Documentation
 
 A deployed web application can be accessed through the `link`_.
 
-.. _link: https://belle2-gsoc-2023-hieu-gsoc-draft.netlify.app/
+.. _link: https://display.belle2.org
 
 
 .. toctree::
    :maxdepth: 2
    :caption: Contents:
 
-   ./user/installation.rst
    ./user/usage.rst
+   ./user/installation.rst
+
diff --git a/docs/source/user/event_display.rst b/docs/source/user/event_display.rst
@@ -223,7 +223,7 @@ Import Events
 
     Fig 17. Import Events
 
-Clicking on the *Upload* icon will open a dialog where you can choose to import either an *mdst .root* file or a *json* file.
+Clicking on the *Upload* icon will open a dialog where you can choose to import either an mdst *.root* file or a *.json* file.
 
 Importing a *.root* file requires some calculations before the events can be displayed, which could take a long time if the file contains a large number of events and objects. If you need to display the same file multiple times, you have the option to convert the *.root* file to a *.json* file (by an external tool) and import the *.json* file instead.
 
diff --git a/docs/source/user/installation.rst b/docs/source/user/installation.rst
@@ -1,32 +1,4 @@
-Installation
-============
+Installation (optional)
+=======================
 
-If you want to download and run the web application locally, you can follow these steps:
-
-1. **Install Node.js** on your system. You can download the latest version of Node.js from the `official website`_.
-
-.. _official website: https://nodejs.org/en/download
-
-2. **Install Angular CLI** globally by running the following command:
-   
-   .. code-block:: console
-
-      $ npm install -g @angular/cli@15.2.7
-
-3. **Clone the git repository** by running the following command:
-   
-   .. code-block:: console
-
-      $ git clone git@github.com:belle2/display.git
-
-4. Change the current directory into the cloned folder.
-
-   .. code-block:: console
-
-      $ cd display
-
-5. Run ``npm install`` to install the necessary dependencies
-
-6. Run ``npm start`` or ``ng serve`` to start the development server.
-
-7. Navigate to ``http://localhost:4200/`` in your web browser to view the application.
+If you want to download and run the web application locally, you can follow the steps described in the :ref:`developer documentation <developer_installation>`.
diff --git a/docs/source/user/usage.rst b/docs/source/user/usage.rst
@@ -12,12 +12,12 @@ Usage
 
 There are two screen displays: one is the **Event Display**, which shows the events with a simplified detector geometry, and the other is the **Detector**, which displays the detector geometry with full detailed components.
 
-The **Event Display** is preferred for uploading and displaying events from .root files. Meanwhile, the **Detector** is an additional function mainly designed to display the detector geometry, as it requires a large amount of time and memory to load all components.
+The **Event Display** is preferred for uploading and displaying events from *.root* files. Meanwhile, the **Detector** is an additional function mainly designed to display the detector geometry, as it requires a large amount of time and memory to load all components.
 
 .. toctree::
    :maxdepth: 3
    :caption: Contents:
 
    event_display
    detector
-   legend
+   legend
diff --git a/src/app/detector/detector.component.html b/src/app/detector/detector.component.html
@@ -21,7 +21,7 @@
 <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div class="info">
     <h5><b>Le Cong Minh Hieu</b></h5>
-    <p>Belle2 Detector</p>
+    <p>Belle II Detector</p>
     <p>GSoC 2023</p>
 </div>
 <a id="mainLogo" class="main-logo fixed-top p-2 mx-auto mt-2" routerLink="/">
diff --git a/src/app/event-display/event-display.component.html b/src/app/event-display/event-display.component.html
@@ -22,7 +22,7 @@
 <app-phoenix-menu [rootNode]="phoenixMenuRoot"></app-phoenix-menu>
 <div class="info">
     <h5><b>Le Cong Minh Hieu</b></h5>
-    <p>Belle2 Event Display</p>
+    <p>Belle II Event Display with Phoenix</p>
     <p>GSoC 2023</p>
 </div>
 <a id="mainLogo" class="main-logo fixed-top p-2 mx-auto mt-2" routerLink="/">
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="pricing-header p-3 pt-md-5 pb-md-4 text-center">
         <img src="assets/images/logo.png" class="logo mb-4" alt="" />
-        <p class="lead">Welcome to the Belle II Experiment</p>
+        <p class="lead">Welcome to the Belle II Event Display with Phoenix</p>
     </div>
 
     <div class="row centered">
@@ -14,7 +14,7 @@
             <div class="card-body d-flex flex-column">
                 <h5 class="card-title">Event Display</h5>
                 <p class="card-text">
-                    Display the event with the simplified detector.
+                    Display the events with the simplified detector geometry.
                 </p>
                 <a routerLink="/event-display" class="btn btn-secondary"
                     >Show</a
@@ -31,7 +31,7 @@ <h5 class="card-title">Event Display</h5>
             <div class="card-body d-flex flex-column">
                 <h5 class="card-title">Detector</h5>
                 <p class="card-text">
-                    Show the Belle II detector with full details.
+                    Show the Belle II detector with full, detailed, geometry.
                 </p>
                 <a routerLink="/detector" class="btn btn-secondary">Show</a>
             </div>
@@ -42,8 +42,8 @@ <h5 class="card-title">Detector</h5>
 <footer>
     <p>Google Summer of Code 2023</p>
     <p>
-        <a href="https://github.com/belle2/display"> Github </a> -
-        <a href="https://belle2-gsoc-2023-hieu-docs.netlify.app/">
+        <a href="https://github.com/belle2/display"> GitHub </a> -
+        <a href="https://display.belle2.org/documentation/">
             Documentation
         </a>
     </p>
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>Belle2 GSoC</title>
+        <title>Belle II GSoC</title>
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+.. _developer_installation:`
	`2`	`+`
`1`	`3`	`Installation`
`2`	`4`	`============`
`3`	`5`