feat: improve ui/ux for Interlinker

paoloose · Nov 27, 2023 · 052318a · 052318a
1 parent b0cfb68
commit 052318a
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 18 deletions.
diff --git a/frontend/src/components/Interlinker/main.ts b/frontend/src/components/Interlinker/main.ts
@@ -10,6 +10,11 @@ const $root = document.getElementById('graph') as HTMLDivElement;
 const $input = document.querySelector('#search-box input') as HTMLInputElement;
 const $currentLink = document.getElementById('current-link') as HTMLDivElement;
 const $activeOrigins = document.getElementById('active-origins') as HTMLDivElement;
+const $scrollToTop = document.getElementById('scroll-to-top-btn') as HTMLButtonElement;
+const $scrollToBottom = document.getElementById('scroll-to-bottom-btn') as HTMLButtonElement;
+
+$scrollToTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
+$scrollToBottom.addEventListener('click', () => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }))
 
 let activeOrigins: string[] = [];
 
@@ -43,6 +48,14 @@ const highlightNodes = new Set();
 const highlightLinks = new Set();
 let hightlightedNode : NodeObject | null = null;
 
+const cutLinkIfTooLong = (link: string) => {
+  const MAX_LENGTH = 70;
+  if (link.length > MAX_LENGTH) {
+    return `${link.substring(0, MAX_LENGTH)}...`;
+  }
+  return link;
+}
+
 const showHighlightedNodeInfo = (node: NodeObject | null) => {
   const $info = document.getElementById('hightlighted-node')
   if (!$info) return;
@@ -53,7 +66,7 @@ const showHighlightedNodeInfo = (node: NodeObject | null) => {
   $info.style.display = 'flex';
   const url = $info.querySelector('h4')!;
   const neighbors = $info.querySelector('p')!;
-  url.textContent = node.url;
+  url.textContent = cutLinkIfTooLong(node.url);
   neighbors.textContent = `Neighbors: ${node.links.length}`;
 }
 
@@ -65,9 +78,9 @@ const displayActiveOrigins = () => {
     const $origin = document.createElement('div');
     $origin.classList.add('origin');
     const $originName = document.createElement('h4');
-    $originName.textContent = origin;
+    $originName.textContent = cutLinkIfTooLong(origin);
     const $originStop = document.createElement('button');
-    $originStop.textContent = 'Detener';
+    $originStop.textContent = 'Stop origin';
     $originStop.addEventListener('click', () => {
       console.log(JSON.stringify({
         subject: 'stop-origin',
@@ -107,6 +120,9 @@ const graph = ForceGraph()($root)
       highlightNodes.add(link.target);
     }
   })
+  .onNodeClick(node => {
+    window.open(node.url, '_blank');
+  })
   .backgroundColor('#0b0b0b')
   .linkColor(() => '#9e90a6')
   .linkWidth(link => highlightLinks.has(link) ? 3 : 0.5)
@@ -119,7 +135,7 @@ const graph = ForceGraph()($root)
     ctx.arc(
       node.x!,
       node.y!,
-      (node.neighbors.length * 0.2) + 2,
+      (node.neighbors.length * 0.13) + 3,
       0,
       2 * Math.PI,
       false
@@ -168,12 +184,14 @@ $input.addEventListener('keyup', (e) => {
       console.log(`invalid: ${$input.value}`)
       return;
     }
+    const fixed_url = $input.value.startsWith('https://') ? $input.value : `https://${$input.value}`;
 
     ws.send(JSON.stringify({
       subject: 'new-url',
-      payload: $input.value
+      payload: fixed_url
     }));
-    activeOrigins.push($input.value);
+    activeOrigins.push(fixed_url);
+    $input.value = '';
     displayActiveOrigins();
   }
 });

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
@@ -69,12 +69,12 @@ const { title } = Astro.props;
   }
 
   *::-webkit-scrollbar {
-    width: 5px;
+    width: 8px;
   }
   *::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: #bebebe;
   }
   *::-webkit-scrollbar-thumb {
-    background: #c5c5c5;
+    background: #757575;
   }
 </style>
diff --git a/frontend/src/pages/project/3.astro b/frontend/src/pages/project/3.astro
@@ -15,20 +15,40 @@ export const metadata: ProjectMetadata = {
   project={3}
 >
   <p>What if you can see how the web is created?</p>
+  <p>It's <strong>impossible</strong> to map the entire internet, but what if we can generate an small portion of it?</p>
+  <p>
+    <h3>How it works?</h3>
+    <ul>
+      <li>You <strong>seed</strong> the crawler with a link ('the origin')</li>
+      <li>It will start crawling the page, looking for <strong>links</strong> (<code>&lta/&gt</code> tags)</li>
+      <li>The links found will be added to a <strong>queue</strong></li>
+      <li>It will <strong>repeat</strong> the process for each link in the queue</li>
+    </ul>
+  </p>
+  <p>Start <button id="scroll-to-bottom-btn">scrolling down</button> and <strong>paste a link</strong> in the search box to see it in action!</p>
   <div id="main-wrapper">
     <div id="graph" />
     <article>
       <section id="search-box">
-        <input type="text" />
+        <input
+          type="text"
+          placeholder="https://somesite.com/with/links"
+        />
       </section>
       <section id="current-link" />
       <section id="hightlighted-node">
         <h4></h4>
+        (Click to open)
         <p></p>
       </section>
-      <section id="active-origins">
-
-      </section>
+      <section id="active-origins" />
+      <button id="scroll-to-top-btn">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Font_Awesome_5_solid_arrow-up.svg/896px-Font_Awesome_5_solid_arrow-up.svg.png"
+          width="20px"
+          title="Scroll to top"
+        />
+      </button>
     </article>
   </div>
   <script src="../../components/Interlinker/main.ts"></script>
@@ -37,6 +57,14 @@ export const metadata: ProjectMetadata = {
 <style is:global lang="scss">
   main {
     padding-bottom: 0 !important;
+
+    h3 {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+    ul {
+      margin-top: 8px;
+    }
   }
   #main-wrapper {
     position: relative;
@@ -54,18 +82,28 @@ export const metadata: ProjectMetadata = {
     #search-box {
       display: flex;
       position: absolute;
-      bottom: 30px;
+      bottom: 25px;
       left: calc(50% - 200px);
       input {
         margin: 0 auto;
         margin-top: 1rem;
         width: 400px;
         height: 40px;
         font-size: 1.2rem;
-        background-color: rgb(222, 230, 230);
+        background-color: rgb(48, 49, 49);
+        border: 1px solid black;
+        color: #e9e9e9;
         padding: 20px 4px;
         pointer-events: all;
         font-family: monospace;
+        border-radius: 6px;
+        padding-left: 10px;
+      }
+      input:focus {
+        outline: 1px solid rgb(56, 56, 56);
+      }
+      input::placeholder {
+        color: rgb(139, 139, 139);
       }
     }
     #hightlighted-node {
@@ -77,12 +115,13 @@ export const metadata: ProjectMetadata = {
       top: 0;
       padding-left: 10px;
       padding-top: 10px;
+      color: #c0c1eb;
 
       h4 {
-        text-align: center;
+        text-align: left;
         margin: 0;
         color: #c0c1eb;
-        font-size: 2rem;
+        font-size: 1.8rem;
         font-weight: 400;
         margin-bottom: 0;
       }
@@ -99,7 +138,6 @@ export const metadata: ProjectMetadata = {
       font-size: 1.2rem;
       white-space: nowrap;
     }
-
     #active-origins {
       position: absolute;
       top: 0;
@@ -123,5 +161,29 @@ export const metadata: ProjectMetadata = {
         }
       }
     }
+    #scroll-to-top-btn {
+      position: absolute;
+      bottom: 25px;
+      right: 20px;
+      background-color: #2e3436;
+      border: none;
+      color: #c0c1eb;
+      padding: 8px 16px;
+      border-radius: 100%;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.2rem;
+      font-weight: 100;
+      margin-right: 8px;
+      cursor: pointer;
+      pointer-events: all;
+
+      img {
+        padding: 2px;
+      }
+    }
   }
 </style>