Revised the web pages

iVis-at-Bilkent · Jul 25, 2024 · 97a8b61 · 97a8b61
1 parent 2bbf53b
commit 97a8b61
Show file tree

Hide file tree

Showing 16 changed files with 290 additions and 135 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Software Artifact Analyzer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <img src="assets/logo.svg" alt="SAA Logo" class="logo">
+            <p class="name"> Software Artifact Analyzer </p>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html" >Key Features</a></li>
+                    <li><a href="guides.html">User & Developer Guides</a></li>
+                    <li><a href="highlights.html">Highlights</a></li>
+                    <li><a href="about.html" class="active">About</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main id="content">
+            <!-- About Page Content -->
+            <h1>About</h1>
+            <p>Software Artifact Analyzer (SAA) is developed and maintained by 
+                <a href="http://www.cs.bilkent.edu.tr/~ivis/">i-Vis Research Lab</a> and
+                <a href="https://bilsen.cs.bilkent.edu.tr/">BILSEN Research Group</a>
+                at Bilkent University.
+            </p>
+            <p>
+                Feel free to contact us by <a href="mailto:[email protected]">email</a> for any questions/comments.
+            </p>
+        </main>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/assets/figure9.png → assets/anomaly-detection.png b/assets/figure9.png → assets/anomaly-detection.png
diff --git a/assets/figure1.png → assets/context-menus.png b/assets/figure1.png → assets/context-menus.png
diff --git a/assets/figure3.png → assets/reporting.png b/assets/figure3.png → assets/reporting.png
diff --git a/assets/figure8.png → assets/reviewer-recommendation.png b/assets/figure8.png → assets/reviewer-recommendation.png
diff --git a/assets/figure5.png → assets/saa-ss.png b/assets/figure5.png → assets/saa-ss.png
diff --git a/docs/SAA_DeveloperGuide_1.0.0.pdf b/docs/SAA_DeveloperGuide_1.0.0.pdf
diff --git a/docs/SAA_UserGuide_1.0.0.pdf b/docs/SAA_UserGuide_1.0.0.pdf
diff --git a/features.html b/features.html
@@ -10,37 +10,91 @@
     <div class="container">
         <header>
             <img src="assets/logo.svg" alt="SAA Logo" class="logo">
+            <p class="name"> Software Artifact Analyzer </p>
             <nav>
                 <ul>
                     <li><a href="index.html">Home</a></li>
                     <li><a href="features.html" class="active">Key Features</a></li>
-                    <li><a href="guides.html">Guides</a></li>
-                    <li><a href="implications.html">Practitioner Insights</a></li>
+                    <li><a href="guides.html">User & Developer Guides</a></li>
+                    <li><a href="highlights.html">Highlights</a></li>
+                    <li><a href="about.html">About</a></li>
                 </ul>
             </nav>
         </header>
         <main id="content">
             <!-- Key Features Page Content --> 
             <h1>Key Features</h1>
-            <ul>
-                <li><strong>Context Menu:</strong> Implemented using the <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus">cytoscape.js-context-menus</a> library. The context menu is specific to each node, allowing users to perform operations tailored to each software artifact and developer. Relation-based queries are used to  reveal connections between different software artifacts or developers.<bold> For instance, users can access source code files modified by the pull requests from the context menu of the  pull requests.</bold>
-                <br><img src="assets/figure1.png" alt="Context Menu"></li><br><hr>
-                <li><strong>Grouping Nodes:</strong> SAA facilitates the grouping of nodes based on developers, enhancing visualization to understand relationships and dynamics within a software project.</li>
-                <br><hr>
-                <li><strong>Reviewer Recommendation:</strong> Utilizing the RSTrace+ [1] algorithm, SAA assists in making reviewer assignments, offering a visual representation of analysis results to boost confidence in decision-making.
-                <br>
-                <img src="assets/figure8.png" alt="Reviewer Recommendation">
-                <br>Users can customize their view by choosing the number of recommendations to display and incorporating a recency factor for calculation.
-               The table results furnish a list of recommended reviewers, each accompanied by their respective scores. The graph results provide the choice to display the graph either clustered by recommended developers or not.
-            </li><hr>
-            <br><br>
-                <li><strong>Bug Tracking Process Anomaly Detection:</strong> SAA detects 11 types of bug-tracking process anomalies, as categorized by Qamar et al. [2], contributing to process evaluation and anomaly prevention. <br><img src="assets/figure9.png" alt="Anomaly Detection"> </li><hr>
-                <li><strong>Report Component:</strong> SAA allows users to report analysis results or observations directly on GitHub or Jira platforms, promoting seamless integration and practicality. Users can submit reports as comments under pull requests in GitHub or issue comments in Jira, enhancing collaboration and communication.
-                <br><img src="assets/figure3.png" alt="Report Component"></li> <br><br><hr>
-                <p>This tool empowers developers with the ability to detect anomalies, make informed decisions, and collaborate effectively within the context of their software projects.</p>
-                <p><a href="#1">[1]</a> E. Sülün, E. Tüzün, and U. Doğrusöz, “RSTrace+: Reviewer suggestion using software artifact traceability graphs,” Information and Software Technology, vol. 130, p. 106455, 2021.</p>
-                <p><a href="#2">[2]</a> K. A. Qamar, E. Sülün, and E. Tüzün, “Taxonomy of bug tracking process smells: Perceptions of practitioners and an empirical analysis,” Information and Software Technology, vol. 150, p. 106972, 2022. doi:10.1016/j.infsof.2022.106972</p>
-            </ul>
+            <p>Software Artifact Analyzer (SAA) was designed to visually analyze a software's artifact traceability graph to
+                gain insight into the development process and improve it <a href="#1">[1]</a>.</p>
+
+            <h2>Initial artifact traceability graph of interest</h2>
+            <p>The user may initiate their analysis either through an issue tracking tool such as GitHub and Jira or directly
+                launch SAA and construct a query. A query might be an SQL-like query (e.g., all issues with a type of bug and
+                priority of equal) or a more advanced graph-based query (e.g., any files that developers all A, B and C
+                contributed to).
+            </p>
+            <p>This basically forms a "landing" artifact traceability graph of interest, which may be further extended
+                through additional queries or via context menus of artifacts in the graph.
+            </p>
+            <p>The context menus are specific to each node type, allowing users to perform operations tailored to that specific
+                software artifact and developer. For instance, one might be interested in finding <bold>any source code files
+                modified by a particular pull request</bold> from the context menu of that pull request as exemplified below.
+                <img width="800" src="assets/context-menus.png" alt="Context Menu">
+            </p>
+            <h2>Inspecting graph content</h2>
+            <p>By selecting an artifact or developer or a relation among them, you may get detailed information about that entity
+                or the relationship through object inspectors.
+                <img width="800" src="assets/inspector.png" alt="Object Inspector">
+            </p>
+
+            <h2>Complexity management through grouping</h2>
+            <p>SAA facilitates the grouping of nodes either manually or automatically based on topology or developers, 
+                enhancing analysis and reducing complexity. Below is an example of a traceability graph grouped by developer.
+                <img width="800" src="assets/grouping.png" alt="Grouping by Developer">
+            </p>
+
+            <p>SAA hosts some readily available software analytic methods described below to illustrate how such methods may be
+                integrated into the framework quickly.
+            </p>
+
+            <h2>Reviewer recommendation</h2>
+            <p>Utilizing the RSTrace+ algorithm <a href="#2">[2]</a>, SAA assists in making reviewer assignments, offering 
+                a visual representation of analysis results to boost confidence in decision-making.
+                <img width="1000" src="assets/reviewer-recommendation.png" alt="Reviewer Recommendation">
+            </p>
+
+            <p>Users can customize their view by choosing the number of recommendations to display and incorporating a recency
+                factor for calculation. The table results furnish a list of recommended reviewers, each accompanied by their
+                respective scores. The graph results provide the choice to display the graph either clustered by recommended 
+                developers or not.
+            </p>
+
+            <h2>Expert recommendation</h2>
+            <p>A similar technique to the RSTrace+ algorithm can also be used to identify experts or suitable developers on
+                a specific source code file or a group of such files.
+            </p>
+
+            <h2>Bug tracking process anomaly detection</h2>
+            <p>SAA detects a high number of types of bug-tracking process anomalies, as categorized by Qamar et al. 
+                in <a href="#3">[3]</a>, contributing to process evaluation and anomaly prevention.
+                <img width=1000 src="assets/anomaly-detection.png" alt="Anomaly Detection">
+            </p>
+            <p>Visual cues on each issue aid in quickly identifying issues with higher number of anomalies, with the tooltips
+                summarizing the type of anomalies detected.
+            </p>
+
+            <h2>Integration with issue tracking tools</h2> 
+            <p>SAA allows users to report analysis results or observations directly on GitHub or Jira platforms, promoting seamless
+                integration and practicality. Users can submit reports as comments under <i>pull requests</i> in GitHub or 
+                as comments under <i>issues</i> in Jira, enhancing collaboration and communication.
+                <img width=1000 src="assets/reporting.png" alt="Report Component">
+            </p>
+            <p>This empowers developers with the ability to detect anomalies, make informed decisions, and collaborate effectively within the context of their software projects.</p>
+
+            <h3>References</h3>
+            <p><a href="#1">[1]</a> L. Merdol, E. Tüzün and U. Dogrusoz, "SAA: a framework for improving the software development process via visualization-based software analytics", under review, 2024.</p>
+            <p><a href="#2">[2]</a> E. Sülün, E. Tüzün, and U. Doğrusöz, “<a href="https://doi.org/10.1145/3345629.3345637" target="_blank">RSTrace+: Reviewer suggestion using software artifact traceability graphs</a>,” Information and Software Technology, vol. 130, p. 106455, 2021.</p>
+            <p><a href="#3">[3]</a> K. A. Qamar, E. Sülün, and E. Tüzün, “<a href="https://doi.org/10.1016/j.infsof.2022.106972" target="_blank">Taxonomy of bug tracking process smells: Perceptions of practitioners and an empirical analysis</a>,” Information and Software Technology, vol. 150, p. 106972, 2022. doi:10.1016/j.infsof.2022.106972</p>
         </main>
     </div>
 

diff --git a/guides.html b/guides.html
@@ -3,29 +3,38 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Guides - Software Artifact Analyzer</title>
+    <title>Documentation - Software Artifact Analyzer</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
         <header>
             <img src="assets/logo.svg" alt="SAA Logo" class="logo">
+            <p class="name"> Software Artifact Analyzer </p>
             <nav>
                 <ul>
                     <li><a href="index.html">Home</a></li>
                     <li><a href="features.html" >Key Features</a></li>
-                    <li><a href="guides.html" class="active">Guides</a></li>
-                    <li><a href="implications.html">Practitioner Insights</a></li>
+                    <li><a href="guides.html" class="active">User & Developer Guides</a></li>
+                    <li><a href="highlights.html">Highlights</a></li>
+                    <li><a href="about.html">About</a></li>
                 </ul>
             </nav>
         </header>
         <main id="content">
             <!-- Guides Page Content -->
-            <h1>Guides</h1>
-            <h2>User Guide</h2>
-            <p>A User Guide for the Software Artifact Analyzer can be found <a href="https://docs.google.com/document/d/1MHoBk2O2AREYiKwqZuDkHLkdlWwUkYMHzeuugqnVxFY/edit?usp=sharing">here</a>.</p>
-            <h2>Developer Guide</h2>
-            <p>A Developer Guide for SAA can be found <a href="https://docs.google.com/document/d/1dIasoHNoGYy6klZOnmUMzOE7RvM-fN7DOcEf7w9jS70/edit?usp=sharing">here</a>.</p>
+            <h1>Documentation</h1>
+            <p>Software Artifact Analyzer (SAA) may be used as is, using the <a href="http://saa.cs.bilkent.edu.tr" target="_blank">sample deployment</a> 
+                provided or a local deployment of your own (as described <a href="https://github.com/iVis-at-Bilkent/software-artifact-analyzer/?tab=readme-ov-file#running-a-local-instance" target="_blank">here</a>)
+                without any customization.
+                A <a href="https://ivis-at-bilkent.github.io/software-artifact-analyzer/docs/SAA_UserGuide_1.0.0.pdf" target="_blank">User Guide</a> was
+                prepared to help when using SAA.
+            </p>
+
+            <p>If you are a researcher or a practitioner who would like to implement your own analytics methods and integrate into SAA,
+                you should start by forking <a href="https://github.com/iVis-at-Bilkent/software-artifact-analyzer/" target="_blank">this repo</a>. The details of how SAA can be customized can be found
+                in a <a href="https://ivis-at-bilkent.github.io/software-artifact-analyzer/docs/SAA_DeveloperGuide_1.0.0.pdf" target="_blank">Developer Guide</a>
+                we have prepared for you.</p>
         </main>
     </div>
     <script src="main.js"></script>

diff --git a/highlights.html b/highlights.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Highlights</title>
+</head>
+<body>  
+     <div class="container">
+    <header>
+        <img src="assets/logo.svg" alt="SAA Logo" class="logo">
+        <p class="name"> Software Artifact Analyzer </p>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="features.html" >Key Features</a></li>
+                <li><a href="guides.html">User & Developer Guides</a></li>
+                <li><a href="highlights.html" class="active">Highlights</a></li>
+                <li><a href="about.html">About</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="practitioner-insights">
+            <h1>SAA Highlights</h1>
+            <div class="card-container">
+                <div class="card">
+                    <h3>Intuitive Visualization</h3>
+                    <p>Visual representation of a software artifact traceability graph helps you see and understand complex relationships between artifacts.</p>
+                </div>
+                <div class="card">
+                    <h3>Anomaly Detection</h3>
+                    <p>The anomaly detection and reporting keep developers and management informed about potential mispractices in the development process without the need for constant manual checks.</p>
+                </div>
+                <div class="card">
+                    <h3>Reviewer & Expert Recommendations</h3>
+                    <p>Automated reviewer recommendation guides developers to the best reviewers, preventing lengthy code 
+                        reviews. Expert recommendation helps identify most suitale developers 
+                        for specific tasks, helping management with assignments.</p>
+                </div>
+                <div class="card">
+                    <h3>Easy Implementation of Analytics</h3>
+                    <p>SAA framework leverages developers with implementation of new software analytics applications, such as bus factor analysis and knowledge islands, minimizing the need for extensive implementation efforts.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="main.js"></script>
+</div>
+</body>
+</html>
diff --git a/implications.html b/implications.html