Merge pull request #28 from uic-evl/dev-hero

Images for news

Author: renambot-uic

_bibliography/papers-enhanced.bib

@@ -9,6 +9,25 @@
 %  #########   #####   #########  ######  
 %                                    
 %========================================
+
+@article{WaBr2025,
+  title        = {MFNetSim: A Multi-Fidelity Network Simulation Framework for Multi-Traffic Modeling of Dragonfly Systems},
+  author       = {Wang, Xin and Brown, Kevin A. and Ross, Robert B. and Carothers, Christopher D. and Lan, Zhiling},
+  year         = {2025},
+  month        = apr,
+  journal      = {ACM Trans. Model. Comput. Simul.},
+  publisher    = {Association for Computing Machinery},
+  address      = {New York, NY, USA},
+  doi          = {10.1145/3729424},
+  issn         = {1049-3301},
+  url          = {https://doi.org/10.1145/3729424},
+  note         = {Just Accepted},
+  abstract     = {In high-performance computing (HPC), modern supercomputers typically provide exclusive computing resources to user applications. Nevertheless, the interconnect network is a shared resource for both inter-node communication and across-node I/O access, among co-running workloads, leading to inevitable network interference. In this study, we develop MFNetSim, a multi-fidelity modeling framework that enables simulation of multi-traffic simultaneously over the interconnect network, including inter-process communication and I/O traffic. By combining different levels of abstraction, MFNetSim can efficiently co-model the communication and I/O traffic occurring on HPC systems equipped with flash-based storage. We conduct simulation studies of hybrid workloads composed of traditional HPC applications and emerging ML applications on a 1,056-node Dragonfly system with various configurations. Our analysis provides various observations regarding how network interference affects communication and I/O traffic.},
+  keywords     = {Multi-fidelity modeling, Network simulation, Performance analysis, Dragonfly interconnect network},
+	selected     = {true}
+}
+
+
 @article{JyJo25,
 	title        = {Enhancing Consumer Insights through VR Metaphor Elicitation},
 	author       = {Jyothula, Sai Priya and Johnson, Andrew E.},
@@ -50,7 +69,7 @@ @article{WeAtZh25
 	abstract     = {Digital twin models are of high interest to Head and Neck Cancer (HNC) oncologists, who have to navigate a series of complex treatment decisions that weigh the efficacy of tumor control against toxicity and mortality risks. Evaluating individual risk profiles necessitates a deeper understanding of the interplay between different factors such as patient health, spatial tumor location and spread, and risk of subsequent toxicities that can not be adequately captured through simple heuristics. To support clinicians in better understanding tradeoffs when deciding on treatment courses, we developed DITTO, a digital-twin and visual computing system that allows clinicians to analyze detailed risk profiles for each patient, and decide on a treatment plan. DITTO relies on a sequential Deep Reinforcement Learning digital twin (DT) to deliver personalized risk of both long-term and short-term disease outcome and toxicity risk for HNC patients. Based on a participatory collaborative design alongside oncologists, we also implement several visual explainability methods to promote clinical trust and encourage healthy skepticism when using our system. We evaluate the efficacy of DITTO through quantitative evaluation of performance and case studies with qualitative feedback. Finally, we discuss design lessons for developing clinical visual XAI applications for clinical end users.},
 	keywords     = {Digital twins;Visualization;Computational modeling;Data visualization;Data models;Tumors;Chemotherapy},
 	bibtex_show  = {true},
-	selected     = {true}
+	selected     = {false}
 }
 
 % Section_2024

_includes/news.liquid

@@ -12,7 +12,7 @@
         <table class="table table-sm table-borderless">
           {% for item in news %}
               <tr>
-                <th scope="row">{{ item.date | date: "%m/%d/%y" }}</th>
+                <td style="font-weight: bold;">{{ item.date | date: "%m/%d/%y" }}</td>
                 <td>
                   {% assign tt = item.tags %}
                   {% if tt[0] == "event" %}
@@ -24,6 +24,24 @@
                   {% else %}
                     <i class="fa fa-file" style="margin-right: 4px" title="{{tt[0]}}"></i>
                   {% endif %}
+                  </td>
+
+                  <td>
+                  {% if item.image %}
+                   {% assign full_url = "https://www.evl.uic.edu/output/originals/" | append: item.image %}
+                     <div style="width: 250px; height:187px;overflow: hidden;">
+                      <a class="news-title" href="{{ item.url | relative_url }}">
+                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                      </a>
+                    </div>
+                  {% else %}
+                     <div style="width: 250px; height:187px;overflow: hidden;">
+                       <img src="{{ 'assets/img/new-logo-small-480.webp' | relative_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                    </div>
+                  {% endif %}
+                  </td>
+
+                <td>
                   {% if item.inline %}
                     {{ item.content | remove: '<p>' | remove: '</p>' | emojify }}
                   {% else %}
@@ -44,31 +62,39 @@
       {% comment %}
         No numeric limit passed, so group by year for the news page.
       {% endcomment %}
-      <div id="filter-buttons" class="mb-3">
-
-        <button data-tag="all" class="filter-button">
-        <i class="fa fa-list mr-1"></i> All </button>
-        <button data-tag="event" class="filter-button">
-        <i class="fa fa-calendar-days mr-1"></i> Events </button>
-        <button data-tag="paper" class="filter-button">
-        <i class="fa fa-file-pdf mr-1"></i> Papers </button>
-        <button data-tag="research" class="filter-button">
-        <i class="fa fa-lightbulb mr-1"></i> Research </button>
-        <button data-tag="art" class="filter-button">
-        <i class="fa fa-palette mr-1"></i> Art </button>
 
+    <div class="row">
+
+      <!-- Sticky left menu -->
+      <div class="col-md-2 d-none d-md-block">
+        <div class="sticky-top" style="top: 100px;">
+          <ul class="list-unstyled">
+            <li><a data-tag="all" class="filter-link news_selected" style="color: var(--global-theme-color);">all</a></li>
+            <li><a data-tag="event" class="filter-link" style="color: var(--global-theme-color);">events</a></li>
+            <li><a data-tag="paper" class="filter-link" style="color: var(--global-theme-color);">papers</a></li>
+            <li><a data-tag="research" class="filter-link" style="color: var(--global-theme-color);">research</a></li>
+            <li><a data-tag="art" class="filter-link" style="color: var(--global-theme-color);">art</a></li>
+          </ul>
+        </div>
       </div>
+
+
+    <!-- Main content -->
+    <div class="col-md-10">
       {% assign grouped_by_year = news | group_by_exp:"item", "item.date | date: '%Y'" %}
       <div class="table-responsive">
         <table class="table table-sm table-borderless">
+        <tbody>
           {% for year_group in grouped_by_year %}
+             {% assign post_year = year_group.name | plus: 0 %}
             <!-- Year divider row -->
-            <tr class="year-divider">
-              <th colspan="2">{{ year_group.name }}</th>
+            <tr>
+              <td colspan="4" style="padding-top: 0;"><h2 class="year-divider">{{ year_group.name }}</h2></td>
             </tr>
+
             {% for item in year_group.items %}
-                <tr class="news-item" data-tags="{{ item.tags | join: ' ' }}">
-                  <th scope="row">{{ item.date | date: "%m/%d/%y" }}</th>
+                <tr class="news-item" data-tags="{{ item.tags | join: ' ' }}" style="padding-bottom: 4px;">
+                  <td style="font-weight: bold;">{{ item.date | date: "%m/%d/%y" }}</td>
                   <td>
                   {% assign tt = item.tags %}
                   {% if tt[0] == "event" %}
@@ -80,6 +106,28 @@
                   {% else %}
                     <i class="fa fa-file" style="margin-right: 4px" title="{{tt[0]}}"></i>
                   {% endif %}
+                  </td>
+
+                  <td>
+{% comment %}
+                  {% if item.image %}
+                   {% assign full_url = "https://www.evl.uic.edu/output/originals/" | append: item.image %}
+                     <div style="width: 300px; height:200px;overflow: hidden;">
+                      <a class="news-title" href="{{ item.url | relative_url }}">
+                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                      </a>
+                    </div>
+                  {% else %}
+                     <div style="width: 300px; height:200px;overflow: hidden;">
+                      <a class="news-title" href="{{ item.url | relative_url }}">
+                        <img src="{{ 'assets/img/new-logo-small-480.webp' | relative_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                      </a>
+                    </div>
+                  {% endif %}
+{% endcomment %}
+                  </td>
+
+                  <td>
                     {% if item.inline %}
                       {{ item.content | remove: '<p>' | remove: '</p>' | emojify }}
                     {% else %}
@@ -89,26 +137,32 @@
                 </tr>
             {% endfor %}
           {% endfor %}
+          </tbody>
         </table>
       </div>
+    </div>
+
     {% endif %}
+    </div>
   {% else %}
     <p>No news so far...</p>
   {% endif %}
 </div>
 
 
 <script>
-  const buttons = document.querySelectorAll('.filter-button');
+  const buttons = document.querySelectorAll('.filter-link');
   const newsItems = document.querySelectorAll('.news-item');
 
   buttons.forEach(button => {
     button.addEventListener('click', () => {
       const tag = button.getAttribute('data-tag');
 
       // Update active button style
-      buttons.forEach(btn => btn.classList.remove('active'));
-      button.classList.add('active');
+      buttons.forEach((btn) => {
+        btn.classList.remove('news_selected');
+      });
+      button.classList.add('news_selected');
 
       // Filter news
       newsItems.forEach(item => {

_layouts/profiles.liquid

@@ -44,8 +44,7 @@ layout: page
               <div class="status-section  people-status-anchor-target" id="{{ status }}">
   <div class="row">
     <div class="col-12">
-      <h2 class="people-category" id="{{ status }}">{{
-  display_names[forloop.index0] }}</h2>
+      <h2 class="people-category" id="{{ status }}">{{ display_names[forloop.index0] }}</h2>
     </div>
                   {% assign people_count = people_in_status | size %}
 

_news/1970/1970-11-12-2783.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: 'Two-phase IO Enabling Large-scale Performance Introspection (poster)'
+date: 1970-11-12
+tags: paper
+categories: papers
+tabs: true
+image: fke_vis2023_poster.png-srcw.jpg
+---
+
+## Two-phase IO Enabling Large-scale Performance Introspection (poster)
+**Fan, K., Kumar, S.**
+- Location: Denver, CO
+- PDF: [fke_vis2023_poster.pdf](/documents/fke_vis2023_poster.pdf)
+
+[![image](https://www.evl.uic.edu/output/originals/fke_vis2023_poster.png-srcw.jpg){:style="max-width: 100%"}](https://www.evl.uic.edu/output/originals/fke_vis2023_poster.png-srcw.jpg)
+- Caption: End-to-End Framework - Viveka
+
+Numerous sophisticated profiling and visualization tools have been developed to enable programmers to expose semantic information from their application components. However, effective and interactive exploration of the profiles of large-scale parallel programs remains a challenge due to the high I/O overheads of profiles and the difficulties in scaling downstream visualization tools. In this poster, we present a full-stack approach to a performance introspection framework that tackles key challenges in profiling and visualizing performance data at scale. Our novelty lies in a scalable and compact data model and a two-phase I/O system, which instill scalability into the profiler making it low overhead-- even at high process counts (< 5%). We then build a web-based, visual-analytic dashboard with linked views. Our profiling and visualization tools are both lightweight and easy-to-use, which strikes a balance between providing sophisticated features and operating quickly and efficiently at high process counts.<br><br>
+This work was funded in part by NSF RII Track-4 award 2132013, NSF PPoSS planning award 2217036, NSF PPoSS large award 2316157 and, NSF collaborative research award 2221811. We thank the ALCF's Directors Discretionary (DD) program for offering us the compute hours to run our experiments on the Theta Supercomputer.

_news/1971/1971-01-01-1934.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title: 'Sandin Image Processor (IP)'
+date: 1971-01-01
+tags: research
+categories: research
+tabs: true
+image: sandinip.jpg-srcw.jpg
+---
+
+## Sandin Image Processor (IP)
+
+
+Analog patches on the Sandin IP
+
+![image](https://www.evl.uic.edu/output/originals/sandinip.jpg-srcw.jpg){:style="max-width: 100%"}
+Credit: D. Sandin, EVL
+
+Between 1971 and 1973, Dan Sandin designed and built the Sandin Image Processor (IP) a patch programmable analog computer for real-time manipulation of video inputs through the control of the grey level information. The version that allowed for color manipulation was refered to as the <strong>Color IP</strong><br><br>
+This modular design was based on the Moog synthesizer and is often explained as the &ldquo;video equivalent of a Moog audio synthesizer&rdquo; or as a video synthesizer. That is, it accepted basic video signals and mixed and modified them in a fashion similar to what a Moog synthesizer did with audio. An analog, modular, real time, video processing instrument, it provided video processing performance levels and produced subtle and delicate video effects that became popular with early video artists.<br><br>
+The IP&rsquo;s real-time effects naturally led to its use in live theater performance, including &ldquo;Electronic Visualization Events&rdquo; where the IP was seen processing the output of Tom DeFanti&rsquo;s Graphics Symbiosis System - <strong>GRASS</strong>. Real-time image processing was combined with sound to create visual concerts.<br><br>
+Physically, an Image Processor system would be built out of modules. Several types of modules were defined and typically would be an aluminum box containing a circuit board inside, video connectors and knobs on front of box and power connector on back of box.<br><br>
+The modules would be organized in rows. Individual systems could vary in size and increase in power with the addition of more modules. Typical modules would be signal sources, combiners and modifiers, effects modules, sync, color encoder, color decoder, and NTSC video interface.<br><br>
+Sandin was an advocate of education and espoused a non-commercial philosophy, emphasizing a public access to processing methods and the machines that assist in generating the images.<br><br>
+Accordingly, he placed the circuit board layouts for the IP with a commercial circuit board company and freely published schematics and other documentation. The Do It Yourself ethos combined with the low cost of the parts and a free dissemination of information created a large following of video artists, students, and others interested in experimental video electronics. The modules were often assembled by individuals who had no prior knowledge of electronics fabrication. Also, from time to time Sandin and staff would hold fix-it parties where modules that had failed to work would be repaired by the senior staff.<br><br>
+The Image Processor&rsquo;s educational success can be found in its numbers. In its time, more IP&rsquo;s were built than any other commercial &ldquo;video-art&rdquo; synthesizer. This distribution method was, and to a very large extent still is, unique in the proprietary and competitive industrial field of advanced electronics.<br><br>
+Sandin&rsquo;s IP, and the instructional video that accompanied the modules trained and inspired numerous individuals who would go on to make substantial contributions to both art and science.<br><br>
+Sandin received grants in support of his work from the Rockefeller Foundation (1981), the National Science Foundation, the National Endowment for the Arts (1980) and the Guggenheim Foundation (1978). Sandin&rsquo;s early IP video work &ldquo;Spiral PTL&rdquo; was one of the first pieces included in the Museum of Modern Art&rsquo;s video art collection.