Update intro text; adjust styling on details box to display only once…

… graph has loaded

observable/docs/index.md

@@ -6,12 +6,15 @@ style: ./styles.css
 
 # CollabNext Challenge
 
-Exercitation ut mollit fugiat sunt. Lorem deserunt consequat voluptate consectetur reprehenderit qui. Sit exercitation commodo non esse aliqua commodo enim aliquip est dolore sit laboris occaecat tempor. Culpa commodo ad magna dolore veniam commodo est eiusmod qui eu dolore nisi pariatur eiusmod. Est mollit esse pariatur nisi eu sunt fugiat culpa. Veniam excepteur amet duis veniam officia elit cillum sunt.
+<div class="intro">
+  <p>Researchers struggle to discover connections between researchers and topics from HBCUs and underrepresented universities due to the lack of tools available that focus on diversity and inclusion of underrepresented researchers. Our app seeks to address this problem by creating a knowledge graph visualization with an intuitive user interface that allows researchers, students, conference organizers and others to discover researchers from HBCUs and understand how they are connected through their institutions and research topics.<p>
+
+  <p>With a sample of 5 HBCUs as our example, our app provides and interface for the user to explore a visual interactive representation of data from OpenAlex. Our app represents a scalable starting point towards addressing the broader systemic issue of diversity and inclusion in research data.</p>
+</div>
 
-Search
 
 ```js
-const query = view(Inputs.text());
+const query = view(Inputs.text({placeholder: "Search"}));
 ```
 
 ```js
@@ -122,6 +125,7 @@ orb.data.setDefaultStyle({
 
 const loaderOverlay = document.getElementById('loader-overlay');
 const graphContainer = document.getElementById('graph');
+const details = document.querySelector('.details');
 
 // Show loader overlay
 loaderOverlay.style.display = 'flex';
@@ -132,6 +136,7 @@ orb.data.setup({ nodes, edges });
 // Render and recenter the view
 orb.view.render(() => {
   loaderOverlay.style.display = 'none';
+  details.style.display = 'block';
   orb.view.recenter();
 });
 ```
@@ -153,10 +158,10 @@ const details = document.querySelector('.details')
 
 function updateDetails(selectedNode) {
   details.innerHTML = '';
-
   let html = '';
 
   if (selectedNode) {
+    details.style.display = 'block'
     html += `<h2>${selectedNode.label}</h2>`;
 
     if (selectedNode.type === 'INSTITUTION') {
@@ -173,9 +178,7 @@ function updateDetails(selectedNode) {
       html += `<p><b>Domain:</b> ${selectedNode.domain}</p>`;
       html += `<a href="${selectedNode.id}" target="_blank">View on OpenAlex</a>`;
     }
-  }
-
-  // Set the generated HTML content to the details element
+  } 
   details.innerHTML = html;
 }
 ```
@@ -186,6 +189,6 @@ function updateDetails(selectedNode) {
   </div>
   <div id="graph" style="width:100%; height:800px"></div>
   <div class="details">
-  <h3>Click on any node to see more details.</h3>
+    <h3>Click any node to see more details.</h3>
   </div>
 </div>

observable/docs/styles.css

@@ -11,21 +11,30 @@ body {
   color: #333;
   background-color: #f4faff;
   margin: 2vmin;
-  padding: 2vmin;
+  padding: 2vmin 10vmin;
 }
 
 a {
   color: #244e7b;
   text-decoration: none;
 }
 
+.intro {
+  display: flex;
+  flex-direction: column;
+  gap: 1vmin;
+  width: 90%;
+  margin: 2vmin 0;
+}
+
 .content {
   position: relative;
-  padding: 1vmin;
-  margin: 2vmin;
+  width: 90%;
+  margin: 2vmin 0;
 }
 
 .details {
+  display: none;
   position: absolute;
   top: 2vmin;
   left: 2vmin;