Skip to content

Commit c8885d4

Browse files
Robert35-dllRobert35-dll
authored
Comments and README polishing
* Fixed a bug with double state saving after editing a node * Small refactor of saving maps' states in jsMind class with some comments * Updated comments in HTTPClient class * Removed ActionStack's import and updated saving initial state of a mind map in main.js * Updated and compressed comments in main.js * Improved code readability of click handlers for "Open buttons" * Cleaned jsMind's options' definition in main.js * Fixed spacings and comments in index.html * Removed second default value from preformFetch() and fixed docstrings in jsMind undo()/redo() * Capitalized chapters and added one for installing the server * Added alternative method to start the server and linked it's section in Try It Out chapter * Improved formatting of the building guide
1 parent 0cd98e1 commit c8885d4

File tree

6 files changed

+260
-234
lines changed

6 files changed

+260
-234
lines changed

‎README.md‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
11
# JabMap
2-
next-generation scientific mind mapping.
2+
Next-Generation scientific mind mapping.
33

4-
## 📸 screenshots
4+
## 📸 Screenshots
55
<img width="1548" alt="JabMap mainview example" src="https://github.com/user-attachments/assets/69f5de97-3b2d-4ed7-b8f8-050a1559f93b" />
66
<img width="1549" alt="JabMap opening a mindmap example" src="https://github.com/user-attachments/assets/23aa56d0-4432-4e5f-957b-8797d36a22fd" />
77

8-
## try it out!
9-
The current state of the application is hosted on [github pages](https://jabref.github.io/jabmap/) for you to try out. Note that saving and loading does not work when running the app like this. This is because both require communcation with JabRef's HTTP server which will get blocked for security reasons by your browser.
8+
## 🌟 Try It Out!
9+
The current state of the application is hosted on [github pages](https://jabref.github.io/jabmap/) for you to try out. Note that saving and loading mind maps does not work when running the app like this. This is because both require communication with the [JabRef's HTTP server](#getting-the-server) which will be restricted by your browser for security reasons.
1010

11-
## 💾 installation
11+
## 💾 Installation
12+
### Building the app
1213
Currently, there is no production build available for download so you have to build it yourself.
13-
To do this, you need to have npm and node.js installed. Installing them with [nvm](https://github.com/nvm-sh/nvm) is the recommended way.
14+
To do this, you need to have `npm` and `node.js` installed. Installing them with [nvm](https://github.com/nvm-sh/nvm) is the recommended way.
1415

15-
Installation guide: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
16+
Installation Guide for Windows and Linux / OS X is available [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
1617

17-
Then, clone this repo onto your machine and open a terminal session at the project root.
18+
Then, clone this repository onto your machine and open a terminal session at the project root.
1819

19-
Run the following commands:
20-
1. ```npm install``` this will install all necessary packages in a 'node_modules' directory. You may run this command to update existing packages.
21-
2. ```npm run build``` to build the app. This will bundle the app and dependencies into a 'dist' directory.
22-
3. ```npm run preview``` to preview the build-output in your browser. (click on the link in the terminal)
20+
Then, run the following commands:
21+
1. ```npm install``` - this will install all necessary packages in a `./node_modules` directory. You may run this command to update existing packages.
22+
2. ```npm run build``` - this will bundle the app and dependencies into a `./dist` directory.
23+
3. ```npm run preview``` - this will run the preview of the build-output in your browser (_click on the link in the terminal_).
2324

24-
Alternatively, you can simply open the index.html file in the dist directory after building to run the application.
25+
Alternatively, you can simply open the `index.html` file (_using IDEA_) in the `./dist` directory after building and choose a browser (_in the top right corner_) to run the application.
2526

26-
### Saving and opening mindmaps
27-
As mentioned above, saving and opening are handled by JabRef through it's HTTP server. Currently you have to start it manually.
27+
### Getting the server
28+
As mentioned above, saving and loading of mind maps are handled by JabRef's HTTP server. Currently you have to start it manually:
2829

29-
First clone the repo at https://github.com/iloveskittles82/jabref
30+
First clone our [JabRef's fork repository](https://github.com/iloveskittles82/jabref) (_Note: It is recommended to complete this step of_ [_JabRef's setup guide_](https://devdocs.jabref.org/getting-into-the-code/guidelines-for-setting-up-a-local-workspace/intellij-12-build.html)).
3031

31-
Then, open it in your editor of choice (IDEA works well for this) and locate the 'rest-api.http' file at 'jabsrv/src/test/rest-api.http'
32+
After you cloned the repository, open it in editor of your choice (_IDEA works well for this_) and locate the `jabsrv/src/test/rest-api.http` file.
3233

3334
Follow the steps described at the top of the file to start the server.
3435

35-
(Note: also see https://devdocs.jabref.org/code-howtos/http-server.html for more information on how to start the server)
36+
_Alternatively_ you can start it with the `main()` method of `org.jabref.http.server.cli.ServerCli` package located at `./jabsrv-cli.src.main.java`.
37+
38+
More about starting the server in [JabRef's server documentation](https://devdocs.jabref.org/code-howtos/http-server.html)

‎http/HTTPClient.js‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,18 @@ export class HTTPClient {
55
#host = "http://localhost:6050/";
66

77
constructor() {
8+
// The default return value for PUT and POST requests
89
this.NULL_MAP = { map: {} };
910
}
1011

1112
/**
1213
* Sends a HTTP-request to the JabRef's server.
1314
* @param { string } url - The server's URL to make a request to.
14-
* @param { any } options - Optional request's options.
15-
* @returns { object }
15+
* @param { object } options - Optional request's options.
16+
* @returns
1617
* - An **object** in case of a `GET request` or
17-
* - A **object** { map: {} } in case of a `PUT request`
18-
* if any request failed.
18+
* - An **object** { map: {} } in case of a `PUT / POST request`
19+
* or if any request failed.
1920
*/
2021
async #performFetch(url, options = null) {
2122
let fetchResult = this.NULL_MAP;
@@ -37,9 +38,7 @@ export class HTTPClient {
3738
throw new Error("Request's result is not ok ( -.-)");
3839
}
3940

40-
// Defining default resulting output
41-
fetchResult = "No data received back.";
42-
// If some output is awaited, save it instead
41+
// If some output is awaited, save it
4342
if (options.method !== "PUT") {
4443
fetchResult = await response.json();
4544
}
@@ -55,7 +54,7 @@ export class HTTPClient {
5554
logMessage = `${options.method} ${url} Request failed (.'T_T)`;
5655

5756
// If connection was present, provide more details
58-
if (typeof(response) !== "undefined") {
57+
if (typeof (response) !== "undefined") {
5958
logMessage +=
6059
`-(${response.status}).\n` +
6160
`Options:\n` +
@@ -71,11 +70,10 @@ export class HTTPClient {
7170

7271
/**
7372
* Requests a mind map (.jmp file) from JabRef's server.
74-
* @param { string } path - The path to the requested map.
75-
* @returns { object } - The requested mind map object.
73+
* @param { string } path - The path to the requested mind map.
74+
* @returns The requested mind map object.
7675
*/
7776
async loadMap(path = "libraries/demo/map") {
78-
// The path will probably be included into url definition (coming in sprint 2)
7977
const url = path;
8078
const options = {
8179
method: "GET",
@@ -87,37 +85,43 @@ export class HTTPClient {
8785

8886
/**
8987
* Sends a mind map to JabRef's server to save.
90-
* @param { map } mindMap - The mind map to save.
91-
* @param { string } path - The path to save mind map into.
92-
* @returns { string } - A string of the request's result.
88+
* @param { object } mindMap - The mind map to save.
89+
* @param { string } path - The path to save the mind map to.
90+
* @returns An empty map object (NULL_MAP).
9391
*/
9492
async saveMap(mindMap, path = "libraries/demo/map") {
95-
// The url will provably be modified according to mindMap's properties (name, id, whatsoever)
96-
// (coming in sprint 2)
93+
// The url will probably be modified according to mindMap's properties (coming in sprint 2)
9794
const url = path;
9895
const options = {
9996
method: "PUT",
10097
headers: { "Content-Type": "application/json" },
10198
body: JSON.stringify({ map: mindMap })
10299
}
103-
100+
104101
return this.#performFetch(url, options)
105102
}
106103

104+
/**
105+
* Sends a mind map to JabRef's server to save for the first time.
106+
* @param { object } mindMap - The mind map to save.
107+
* @param { string } path - The path to save the mind map to.
108+
* @returns An empty map object (NULL_MAP).
109+
*/
107110
async saveNewMap(mindMap, path = "libraries/demo/map") {
111+
// The url will probably be modified according to mindMap's properties (coming in sprint 2)
108112
const url = path;
109113
const options = {
110114
method: "POST",
111-
headers: {"Content-Type": "application/json"},
112-
body: JSON.stringify({map: mindMap})
115+
headers: { "Content-Type": "application/json" },
116+
body: JSON.stringify({ map: mindMap })
113117
}
114118

115119
return this.#performFetch(url, options)
116120
}
117121

118122
/**
119123
* Requests a list of stored mind maps saved on the server.
120-
* @returns { object } - A list of available mind maps stored on the server.
124+
* @returns A list of available mind maps stored on the server.
121125
*/
122126
async listMaps() {
123127
const url = "libraries";

‎index.html‎

Lines changed: 79 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,102 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<title>JabMap</title>
67
<link rel="stylesheet" href="src/jsmind/style/jsmind.css" />
7-
<style>
8-
html, body {
9-
height: 100%;
10-
margin: 0;
11-
}
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
margin: 0;
13+
}
1214

13-
body {
14-
display: flex;
15-
flex-direction: column;
16-
}
15+
body {
16+
display: flex;
17+
flex-direction: column;
18+
}
1719

18-
nav.navbar {
19-
flex-shrink: 0;
20-
}
20+
nav.navbar {
21+
flex-shrink: 0;
22+
}
2123

22-
#jsmind_container {
23-
flex-grow: 1;
24-
overflow: auto;
25-
}
26-
</style>
24+
#jsmind_container {
25+
flex-grow: 1;
26+
overflow: auto;
27+
}
28+
</style>
2729
</head>
30+
2831
<body>
29-
<!--Navbar with Buttons-->
30-
<nav class="navbar bg-body-tertiary position-relative">
31-
<div class="container-fluid">
32+
<!--Navbar with Buttons-->
33+
<nav class="navbar bg-body-tertiary position-relative">
34+
<div class="container-fluid">
3235

33-
<div>
34-
<!--Jabmap-->
35-
<a class="navbar-brand" href="#">JabMap</a>
36+
<div>
37+
<!--JabMap title-->
38+
<a class="navbar-brand" href="#">JabMap</a>
3639

37-
<!--Save and Load Buttons-->
38-
<button id = "saveBtn" class="btn btn-light me-2" type="button" data-bs-toggle="tooltip" title="Save">
39-
<i class="bi bi-save"></i> Save
40-
</button>
41-
<button id = "openBtn" class="btn btn-light me-2" type="button" data-bs-toggle="modal" title="Open" data-bs-target="#selectMindmapModal">
42-
<i class="bi bi-folder2-open"></i> Open
43-
</button>
44-
</div>
40+
<!--Save and Load Buttons-->
41+
<button id="saveBtn" class="btn btn-light me-2" type="button" data-bs-toggle="tooltip" title="Save">
42+
<i class="bi bi-save"></i> Save
43+
</button>
44+
<button id="openBtn" class="btn btn-light me-2" type="button" data-bs-toggle="modal" title="Open" data-bs-target="#selectMindmapModal">
45+
<i class="bi bi-folder2-open"></i> Open
46+
</button>
47+
</div>
4548

46-
<!--Editor buttons-->
47-
<div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center">
48-
<!--Button class explanation: class = "btn colortheme margin to the right (me-2)"-->
49-
<!--undo Button-->
50-
<button id = "undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
51-
<i class="bi bi-arrow-counterclockwise"></i>
52-
</button>
53-
<!--redo Button-->
54-
<button id = "redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
55-
<i class="bi bi-arrow-clockwise"></i>
56-
</button>
57-
<!--new topic (sibling node) Button-->
58-
<button id = "newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
59-
<i class="bi bi-node-plus-fill"></i>
60-
</button>
61-
<!--new subtopic (child node) button (Icon rotated 90 degrees)-->
62-
<button id = "newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
63-
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
64-
</button>
65-
<!--tags button-->
66-
<button id = "tagsBtn" class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="Tags">
67-
<i class="bi bi-tags"></i>
68-
</button>
49+
<!--Editor buttons-->
50+
<div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center">
51+
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
52+
<!--Undo Button-->
53+
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
54+
<i class="bi bi-arrow-counterclockwise"></i>
55+
</button>
56+
<!--Redo Button-->
57+
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
58+
<i class="bi bi-arrow-clockwise"></i>
59+
</button>
60+
<!--New Topic (sibling node) Button-->
61+
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
62+
<i class="bi bi-node-plus-fill"></i>
63+
</button>
64+
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
65+
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
66+
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
67+
</button>
68+
<!--Tags Button-->
69+
<button id="tagsBtn" class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="Tags">
70+
<i class="bi bi-tags"></i>
71+
</button>
72+
</div>
6973
</div>
70-
</div>
71-
</nav>
74+
</nav>
7275

73-
<!--mindmap environment-->
74-
<div id="jsmind_container" style="width:100%;height:100vh;background:#f4f4f4;"></div>
76+
<!--Required jsMind container-->
77+
<div id="jsmind_container" style="width:100%;height:100vh;background:#f4f4f4;"></div>
7578

76-
<!-- Modal for the "open" dialog-->
77-
<div class="modal fade" id="selectMindmapModal" tabindex="-1" role="dialog">
78-
<div class="modal-dialog" role="document">
79-
<div class="modal-content">
80-
<div class="modal-header">
81-
<h5 class="modal-title" id="exampleModalLabel">Choose a JabMap to open</h5>
82-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
83-
</div>
84-
<div class="modal-body">
85-
<select class="form-select" id="openMindmapSelect" size="10">
86-
</select>
87-
</div>
88-
<div class="modal-footer">
89-
<button type="button" id = "openSelectedMapBtn" class="btn btn-outline-secondary" data-bs-dismiss="modal">Open</button>
79+
<!-- Modal for the "Open" dialog-->
80+
<div class="modal fade" id="selectMindmapModal" tabindex="-1" role="dialog">
81+
<div class="modal-dialog" role="document">
82+
<div class="modal-content">
83+
<div class="modal-header">
84+
<h5 class="modal-title" id="exampleModalLabel">Choose a JabMap to open</h5>
85+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
86+
</div>
87+
<div class="modal-body">
88+
<select class="form-select" id="openMindmapSelect" size="10"></select>
89+
</div>
90+
<div class="modal-footer">
91+
<button type="button" id="openSelectedMapBtn" class="btn btn-outline-secondary" data-bs-dismiss="modal">
92+
Open
93+
</button>
94+
</div>
9095
</div>
9196
</div>
9297
</div>
93-
</div>
9498

95-
<script type="module" src="/src/main.js"></script>
99+
<script type="module" src="/src/main.js"></script>
96100
</body>
101+
97102
</html>

0 commit comments

Comments
 (0)