Skip to content

Commit 48c63c7

Browse files
paulgirardpaulgirard
committed
[how-to] new layout
- three-state toggle - sync common titles
1 parent 6acb3d2 commit 48c63c7

5 files changed

Lines changed: 217 additions & 153 deletions

File tree

‎src/components/how-to/Gephi.md‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
- On Mac OS X, click on the .dmg file and drag the Gephi app to the Applications folder.
99
</section>
1010

11-
<section>
11+
<section class="common-title">
1212

1313
## Import a dataset
1414

@@ -43,10 +43,13 @@ On opening a network file, the “Import report” window allows you to check th
4343

4444
</section>
4545

46-
<section>
46+
<section class="common-title">
4747

4848
### “Data laboratory”
4949

50+
</section>
51+
<section>
52+
5053
Now that the GEXF has been imported, a network appears in the centre of the “Overview” tab.
5154

5255
> Before working on it, however, click on the “Data Laboratory” tab at the very top of the Gephi interface.
@@ -67,7 +70,7 @@ In both of them you can
6770
6871
</section>
6972

70-
<section>
73+
<section class="common-title">
7174

7275
## Interacting with the network
7376

@@ -114,7 +117,7 @@ Once unfolded the menu will allow you to control the rendering of the “graph
114117
115118
</section>
116119

117-
<section>
120+
<section class="common-title">
118121

119122
## Changing the objects size and colors
120123

@@ -138,10 +141,13 @@ You can also change the colour of the nodes (by clicking on the colour palette i
138141

139142
</section>
140143

141-
<section>
144+
<section class="common-title">
142145

143146
## Playing with the layout
144147

148+
</section>
149+
<section>
150+
145151
### ForceAtlas2
146152

147153
In the ‘Layout’ window, you can modify the spatialisation of the graph by choosing one of the algorithms offered.
@@ -160,10 +166,13 @@ You will find that you need to play around with the settings to obtain a readabl
160166

161167
</section>
162168

163-
<section>
169+
<section class="common-title">
164170

165171
## Graph metrics
166172

173+
</section>
174+
<section>
175+
167176
### “Statistics”
168177

169178
On the right side of the screen, the ‘Statistics’ window allows you to calculate certain properties of the graph. For example, it includes centrality metrics and calculations that provide information about the overall structure of the network, its clusters, and communities.
@@ -195,10 +204,13 @@ You can now return to the ‘Appearance’ window to change the colour of the no
195204

196205
</section>
197206

198-
<section>
207+
<section class="common-title">
199208

200209
## Filtering the graph
201210

211+
</section>
212+
<section>
213+
202214
### “Filters”
203215

204216
The “Filters” window allows you to filter your graph in multiple ways based on attributes or properties of nodes and edges.

‎src/components/how-to/GephiLite.md‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
77
</section>
88

9-
<section>
9+
<section class="common-title">
1010

1111
## Import a dataset
1212

@@ -35,10 +35,12 @@ Creating a network based on your own data depends on your project, discipline, d
3535
3636
</section>
3737

38-
<section>
38+
<section class="common-title">
3939

4040
### “Data laboratory”
4141

42+
</section>
43+
<section>
4244
Now that the GEXF has been imported, a network appears in the centre of the “Graph” window.
4345

4446
> Before working on it, however, click on “Data” at the top of the Gephi Lite interface to open the data table window.
@@ -64,7 +66,7 @@ Using the menu on the left, you can also
6466
6567
</section>
6668

67-
<section>
69+
<section class="common-title">
6870

6971
## Interacting with the network
7072

@@ -91,7 +93,7 @@ On the bottom right of the graph, buttons allows you to switch between a series
9193

9294
</section>
9395

94-
<section>
96+
<section class="common-title">
9597

9698
## Changing the objects size and colors
9799

@@ -135,10 +137,14 @@ Under "Appearance”, in the submenu “Labels”, you can change the size and d
135137

136138
</section>
137139

138-
<section>
140+
<section class="common-title">
139141

140142
## Playing with the layout
141143

144+
</section>
145+
146+
<section>
147+
142148
### ForceAtlas2
143149

144150
In the “Layout” menu, you can modify the spatialisation of the graph by choosing one of the algorithms offered.
@@ -158,10 +164,13 @@ You will find that you need to play around with the settings to obtain a readabl
158164

159165
</section>
160166

161-
<section>
167+
<section class="common-title">
162168

163169
## Graph metrics
164170

171+
</section>
172+
<section>
173+
165174
### “Metrics”
166175

167176
The “Metrics” menu on the left side of the screen allows you to calculate certain properties of the graph. For example, it includes centrality metrics and calculations that provide information about the overall structure of the network, its clusters, and communities.
@@ -190,10 +199,13 @@ You can now return to the “Appearance” window to change the colour of the no
190199

191200
</section>
192201

193-
<section>
202+
<section class="common-title">
194203

195204
## Filtering the graph
196205

206+
</section>
207+
<section>
208+
197209
### “Filters”
198210

199211
The “Filters” menu allows you to filter your graph in multiple ways based on attributes or properties of nodes or edges, as well as based on the overall topology of the network.

‎src/pages/how-to/index.astro‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ import GephiLite from "../../components/how-to/GephiLite.md";
55
import Layout from "../../layouts/Layout.astro";
66
---
77

8-
<Layout>
8+
<Layout class="no-sticky-nav">
99
<header class="banner py-5">
1010
<section class="container my-5 py-4">
1111
<h1>How to?</h1>
1212
</section>
1313
</header>
1414

15-
<main class="py-5">
16-
<section class="how-to container">
17-
<article class="how-to-column" id="gephi">
18-
<h2>
19-
<label class="form-check-label" for="viewGephiHowTo">
15+
<main id="how-to-page" class="py-5">
16+
<section class="how-to-choice w-100 sticky-top container">
17+
<h2 class="d-flex justify-content-center align-item-center gap-3 w-100">
18+
<div class="label-container" id="gephi">
19+
<label for="onlyGephi">
2020
<Image
2121
src="/icons/gephi-desktop-logo-inverted.svg"
2222
class="mb-3 mb-md-0"
@@ -26,14 +26,14 @@ import Layout from "../../layouts/Layout.astro";
2626
/>
2727
<span class="label-content">Gephi</span></label
2828
>
29-
30-
<input class="form-check-input bg-gephi-lite" type="checkbox" role="switch" id="viewGephiHowTo" checked />
31-
</h2>
32-
<Gephi />
33-
</article>
34-
<article class="how-to-column" id="gephi-lite">
35-
<h2>
36-
<label class="form-check-label" for="viewGephiLiteHowTo">
29+
</div>
30+
<div class="d-flex align-items-center gap-1">
31+
<input name="how-to-columns" type="radio" id="onlyGephi" />
32+
<input name="how-to-columns" type="radio" id="both" />
33+
<input name="how-to-columns" type="radio" id="onlyGephiLite" />
34+
</div>
35+
<div class="label-container" id="gephi-lite">
36+
<label for="onlyGephiLite">
3737
<span class="label-content">Gephi Lite</span>
3838

3939
<Image
@@ -44,8 +44,14 @@ import Layout from "../../layouts/Layout.astro";
4444
height="100"
4545
/>
4646
</label>
47-
<input class="form-check-input bg-gephi-lite" type="checkbox" role="switch" id="viewGephiLiteHowTo" checked />
48-
</h2>
47+
</div>
48+
</h2>
49+
</section>
50+
<section class="how-to container">
51+
<article class="how-to-column" id="gephi">
52+
<Gephi />
53+
</article>
54+
<article class="how-to-column" id="gephi-lite">
4955
<GephiLite />
5056
</article>
5157
</section>

0 commit comments

Comments
 (0)