Skip to content
This repository was archived by the owner on Jan 28, 2026. It is now read-only.

Commit 293890b

Browse files
author
ge25bon
committed
Merge 1
1 parent 276e79f commit 293890b

10 files changed

Lines changed: 319 additions & 198 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 0 additions & 42 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/about/HowToUseSparkBox.jsx‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,68 @@ import styles from "../../assets/styles/about.module.css";
44
const HowToUseSparkBox = () => {
55
return (
66
<div style={{borderRadius: '20px', height: '100%', display: 'flex', flexDirection: 'column'}}>
7-
<h2 className={styles.boxTitle}>How to use SPARK:</h2>
8-
<ol style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
7+
<h2 className={styles.boxTitle}>How to Use SPARK</h2>
8+
9+
<h3 style={{ color: '#4F6AF6', marginTop: '1rem', marginBottom: '0.5rem' }}>Search Page</h3>
10+
<p>Use this page to explore publications from the OpenAlex database. You can:</p>
11+
<ul style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
12+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
13+
Search using keywords (matched in title and abstract)
14+
</li>
15+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
16+
Filter by: Authors (single or multiple), Institutions, Publication type, Journal, Publication year, *Year range
17+
</li>
18+
</ul>
19+
20+
<h3 style={{ color: '#4F6AF6', marginTop: '1rem', marginBottom: '0.5rem' }}>Publication Trends Page</h3>
21+
<p>Track the evolution of research topics over time. You can:</p>
22+
<ul style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
923
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
10-
Search: Enter a keyword or institution in the search bar.
24+
Search using keywords (matched in title and abstract)
1125
</li>
1226
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
13-
Filter: Refine results by year, keyword, or affiliation using the filter panel.
27+
Filter by: Authors (single or multiple), Institutions, Publication types, Journals, Publication year, *Year range
1428
</li>
29+
</ul>
30+
31+
<h3 style={{ color: '#4F6AF6', marginTop: '1rem', marginBottom: '0.5rem' }}>Collaboration Page</h3>
32+
<p>Analyze co-authorship and institutional collaboration networks. You can:</p>
33+
<ul style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
1534
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
16-
Visualize: Explore charts and graphs for trends, collaborations, and benchmarks.
35+
Enter an institution
1736
</li>
1837
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
19-
Export: Download your filtered data and visualizations as CSV or JSON for offline analysis.
38+
Optionally filter by: Authors (single or multiple), Keywords (title and abstract)
2039
</li>
21-
</ol>
22-
<h3 className={styles.subTitle}>Data Source & what to expect:</h3>
40+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
41+
Click "Generate Graph" to visualize the network
42+
</li>
43+
</ul>
44+
<p>In the generated graph:</p>
45+
<ul style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
46+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
47+
Institutions are shown in <span style={{ color: '#FFA500' }}>orange</span>
48+
</li>
49+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
50+
Universities appear in <span style={{ color: '#0066CC' }}>blue</span>
51+
</li>
52+
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
53+
Authors are displayed in <span style={{ color: '#800080' }}>purple</span>
54+
</li>
55+
</ul>
56+
<p>Clicking a connection between two nodes reveals the shared publications. Each listed paper includes a "View Publisher" link to access the publication.</p>
57+
58+
<h3 style={{ color: '#4F6AF6', marginTop: '1rem', marginBottom: '0.5rem' }}>World Map Page</h3>
59+
<p>Visualize the global distribution and impact of research. You can:</p>
2360
<ul style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
2461
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
25-
Primary API: OpenAlex – Delivers rich, up-to-date publication metadata via RESTful queries.
62+
Search using keywords (matched in title and abstract)
2663
</li>
2764
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
28-
Fallback Sources: IEEE Xplore, ACM Digital Library, and Google Scholar scraping as needed.
65+
Filter by: Authors (multiple), Institutions (multiple), Publication types, Journals, Publication year, *Year range
2966
</li>
3067
</ul>
31-
<p>
32-
Results are indicative of publicly available research outputs. While SPARK performs name-normalization and affiliation matching with high accuracy, some variations in author metadata may occur. For critical decisions, please cross-verify with original publication records
33-
</p>
68+
<p>SPARK displays a global map where each dot represents a localized publication, and a Research Leadership Analysis provides.</p>
3469
</div>
3570
);
3671
};

‎frontend/src/components/about/ImpressumBox.jsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,30 @@ const ImpressumBox = () => {
1313
<div>
1414
<h2 className={styles.impressumTitle}>Impressum</h2>
1515
<p className={styles.impressumText}>
16-
Information in accordance with Section 5 TMG<br />
17-
(Telemediengesetz):<br />
18-
Jane Doe<br />
19-
c/o Technical University of Munich<br />
20-
Munich, Germany<br />
21-
Contact:<br />
22-
E-mail: jane.doe@example.com<br />
23-
Responsible for content according to Section 55 (2) <br />
24-
RStV (Rundfunkstaatsvertrag):<br />
25-
Jane Doe<br />
26-
(Address as above). No cookies are set.
16+
Information pursuant to § 5 TMG (German Telemedia Act)<br />
17+
18+
<strong>Publisher:</strong><br />
19+
Research Position Analysis Platform (SPARK)<br />
20+
Research project at the Technical University of Munich (TUM)<br />
21+
Boltzmannstr. 3<br />
22+
D-85748 Garching bei München<br />
23+
Germany<br />
24+
25+
<strong>Represented by:</strong><br />
26+
The SPARK project team at TUM<br />
27+
28+
<strong>Contact:</strong><br />
29+
Website: https://research-position-analysis-platform.onrender.com/<br />
30+
31+
<strong>Responsible for content according to § 55 Abs. 2 RStV:</strong><br />
32+
Research Position Analysis Platform (SPARK)<br />
33+
Technical University of Munich<br />
34+
Boltzmannstr. 3<br />
35+
D-85748 Garching bei München<br />
36+
Germany<br />
37+
38+
<strong>Disclaimer:</strong><br />
39+
This website is intended solely for academic and research purposes. Despite careful content control, we assume no liability for the content of external links. The responsibility for the content of linked websites lies exclusively with their operators.
2740
</p>
2841
</div>
2942
</div>

‎frontend/src/components/about/WhatSparkDoesBox.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,31 @@ import styles from "../../assets/styles/about.module.css";
44
const WhatSparkDoesBox = () => {
55
return (
66
<div style={{borderRadius: '20px', height: '100%', display: 'flex', flexDirection: 'column'}}>
7-
<h2 className={styles.boxTitle}>What SPARK Does:</h2>
7+
<h2 className={styles.boxTitle}>What SPARK Does</h2>
88
<p>
9-
SPARK (Siemens Publications and Research Knowledgebase) is a web-based analytics
10-
platform designed to automate and accelerate literature reviews.
9+
SPARK (Search Publications and Research Knowledgebase) is a comprehensive research publication analytics platform designed to automate and enhance the analysis of academic and industrial research output.
1110
</p>
12-
<p>By integrating structured and unstructured publication data, SPARK:</p>
11+
<p>With SPARK, users can:</p>
1312
<ol style={{ paddingLeft: '2rem', marginTop: '0.5rem', marginBottom: '1rem' }}>
1413
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
15-
<strong>Identifies Institutional Outputs</strong> – Filters and tags publications by author affiliation to highlight Siemens-relevant research.
14+
<strong>Search Publications with Precision</strong> – Use advanced filters including publication year, year range, author, affiliation, institution, keywords, journals, and publication type to find relevant research.
1615
</li>
1716
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
18-
<strong>Analyzes Trend Dynamics</strong> – Generates time-series charts of keyword popularity and research activity over time.
17+
<strong>Track Topic Trends</strong> – Analyze the evolution of research topics over time, filtered by keywords, institutions, authors, journals, and publication types.
1918
</li>
2019
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
21-
<strong>Maps Collaborations</strong> – Builds and visualizes co-authorship networks to reveal top university and industry partners.
20+
<strong>Discover Collaboration Networks</strong> – Visualize co-authorship and institutional collaboration networks based on selected authors, institutions, or research domains.
2221
</li>
2322
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
24-
<strong>Benchmarks Performance</strong> – Compares your institution's contributions and citation metrics against peers.
23+
<strong>Identify Global Research Clusters</strong> – Explore a world map of research activity localized by keyword, author, or institution, with tools to assess global research impact.
2524
</li>
2625
<li style={{ marginBottom: '0.5rem', listStylePosition: 'outside' }}>
27-
<strong>Reports Impact</strong> – Displays patent citation rates and funding distributions as clear KPI cards.
26+
<strong>Analyze Research Leadership</strong> – Examine country and institutional leadership, and emerging research trends.
2827
</li>
2928
</ol>
29+
<p>
30+
SPARK empowers users to explore, benchmark, and strategize around research activity with data-driven insights.
31+
</p>
3032
</div>
3133
);
3234
};

‎frontend/src/components/animated/Carousel/Carousel.css‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.carousel-container {
22
position: relative;
33
overflow: hidden;
4-
border: 1px solid #555;
4+
border: 1px solid transparent;
55
border-radius: 24px;
66
padding: 16px;
77
--outer-r: 24px;
@@ -25,6 +25,7 @@
2525
background-color: #0D0716;
2626
overflow: hidden;
2727
cursor: grab;
28+
height: 240px;
2829
}
2930

3031
.carousel-item:active {
@@ -43,11 +44,7 @@
4344
justify-content: center;
4445
align-items: center;
4546
text-align: center;
46-
}
47-
48-
.carousel-item-header.round {
49-
padding: 0;
50-
margin: 0;
47+
height: 240px;
5148
}
5249

5350
.carousel-indicators-container.round {
@@ -66,12 +63,6 @@
6663
background-color: rgba(51, 51, 51, 0.4);
6764
}
6865

69-
.carousel-item-header {
70-
margin-bottom: 16px;
71-
padding: 20px;
72-
padding-top: 20px;
73-
}
74-
7566
.carousel-icon-container {
7667
display: flex;
7768
height: 28px;
@@ -94,7 +85,10 @@
9485

9586
.carousel-item-content {
9687
padding: 20px;
97-
padding-bottom: 20px;
88+
padding-bottom: 60px;
89+
flex: 1;
90+
display: flex;
91+
flex-direction: column;
9892
}
9993

10094
.carousel-item-title {
@@ -107,6 +101,8 @@
107101
.carousel-item-description {
108102
font-size: 14px;
109103
color: #fff;
104+
margin-top: 8px;
105+
flex: 1;
110106
}
111107

112108
.carousel-indicators-container {

‎frontend/src/components/animated/Carousel/Carousel.js‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const DEFAULT_ITEMS = [
3939

4040
const DRAG_BUFFER = 0;
4141
const VELOCITY_THRESHOLD = 500;
42-
const GAP = 16;
42+
const GAP = 8;
4343
const SPRING_OPTIONS = { type: "spring", stiffness: 300, damping: 30 };
4444

4545
export default function Carousel({
@@ -187,30 +187,37 @@ export default function Carousel({
187187
height: round ? itemWidth : "100%",
188188
rotateY: rotateY,
189189
...(round && { borderRadius: "50%" }),
190+
position: 'relative'
190191
}}
191192
transition={effectiveTransition}
192193
>
193-
<div className={`carousel-item-header ${round ? "round" : ""}`}>
194-
<span className="carousel-icon-container">
195-
{item.icon}
196-
</span>
197-
</div>
198194
<div className="carousel-item-content">
199-
<div className="carousel-item-title">{item.title}</div>
195+
<div className="carousel-item-title" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
196+
<span className="carousel-icon-container" style={{ margin: 0, flexShrink: 0 }}>
197+
{item.icon}
198+
</span>
199+
{item.title}
200+
</div>
200201
<p className="carousel-item-description">{item.description}</p>
201-
{item.link && (
202+
</div>
203+
{item.link && (
204+
<div style={{
205+
position: 'absolute',
206+
bottom: '16px',
207+
right: '16px',
208+
zIndex: 10
209+
}}>
202210
<Link
203211
to={item.link}
204212
className="carousel-explore-button"
205213
style={{
206214
display: 'inline-block',
207-
marginTop: '12px',
208-
padding: '8px 16px',
215+
padding: '6px 12px',
209216
background: '#4F6AF6',
210217
color: '#fff',
211218
textDecoration: 'none',
212219
borderRadius: '6px',
213-
fontSize: '14px',
220+
fontSize: '12px',
214221
fontWeight: '600',
215222
transition: 'background 0.2s'
216223
}}
@@ -219,8 +226,8 @@ export default function Carousel({
219226
>
220227
Explore
221228
</Link>
222-
)}
223-
</div>
229+
</div>
230+
)}
224231
</motion.div>
225232
);
226233
})}

‎frontend/src/components/shared/AdvancedFiltersDrawer.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const AdvancedFiltersDrawer = ({
6262

6363
const inputStyle = {
6464
width: '100%',
65+
maxWidth: '100%',
6566
padding: '10px 14px',
6667
borderRadius: 6,
6768
border: darkMode ? '1px solid #404040' : '1px solid #ddd',
@@ -107,18 +108,22 @@ const AdvancedFiltersDrawer = ({
107108

108109
const yearRangeStyle = {
109110
display: 'flex',
110-
gap: 8
111+
gap: 8,
112+
width: '100%'
111113
};
112114

113115
const yearInputStyle = {
114116
flex: 1,
117+
minWidth: 0, // Allow flex items to shrink below their content size
118+
maxWidth: '50%', // Ensure each input takes at most half the container width
115119
padding: 10,
116120
borderRadius: 6,
117121
border: darkMode ? '1px solid #404040' : '1px solid #ddd',
118122
background: darkMode ? '#2a2a2a' : '#fafbfc',
119123
color: darkMode ? '#fff' : '#000',
120124
outline: 'none',
121-
transition: 'all 0.2s ease'
125+
transition: 'all 0.2s ease',
126+
boxSizing: 'border-box'
122127
};
123128

124129
// Helper function to get display text for multi-select dropdowns

0 commit comments

Comments
 (0)