arc shaped scale interface

drag-fix.js

···
-// New unified drag system
-console.log("Drag fix script loaded");
+// Arc-based drag system for Go90 Scale
+console.log("Arc drag system loaded");
+
+// Arc configuration
+const ARC_CONFIG = {
+  centerX: 0, // Will be set based on canvas width
+  centerY: 0, // Will be set based on canvas height
+  radius: 300,
+  startAngle: -Math.PI / 2, // -90° (top, 0 rating)
+  endAngle: 0, // 0° (right, 90 rating)
+  baseDistance: 50, // Base distance from arc for service icons
+  crowdingOffset: 120, // Distance to push out for each overlapping service
+  iconSize: 80,
+};
+
+let canvas, ctx, canvasContainer;
+let servicePositions = {}; // Store { domain: { rating, angle, distance } }
+let currentDrag = null;
 
 function initDragAndDrop() {
-  console.log("initDragAndDrop called");
-  const canvas = document.getElementById("dragCanvas");
-  const servicesBar = document.getElementById("servicesBar");
-  const serviceItems = document.querySelectorAll(".service-item");
+  console.log("initDragAndDrop called - arc mode");
 
-  console.log("Found service items:", serviceItems.length);
+  canvasContainer = document.getElementById("dragCanvas");
+  canvas = document.getElementById("arcCanvas");
+  ctx = canvas.getContext("2d");
 
-  // Setup all service items for dragging
+  // Set canvas size
+  resizeCanvas();
+  window.addEventListener("resize", resizeCanvas);
+
+  // Draw the arc scale
+  drawArcScale();
+
+  // Setup service items for dragging
+  const serviceItems = document.querySelectorAll(".service-item");
   serviceItems.forEach(setupServiceDrag);
+}
 
-  // Make canvas accept drops
-  canvas.addEventListener("dragover", (e) => e.preventDefault());
-  canvas.addEventListener("drop", handleCanvasDrop);
+function resizeCanvas() {
+  const rect = canvasContainer.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  // Set arc center
+  ARC_CONFIG.centerX = canvas.width / 2;
+  ARC_CONFIG.centerY = canvas.height - 100;
+
+  drawArcScale();
+  redrawServices();
 }
 
-let currentDrag = null;
+function drawArcScale() {
+  if (!ctx) return;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  const { centerX, centerY, radius, startAngle, endAngle } = ARC_CONFIG;
+
+  // Draw gradient arc
+  const gradient = ctx.createLinearGradient(
+    centerX,
+    centerY + radius * Math.sin(startAngle),
+    centerX + radius * Math.cos(endAngle),
+    centerY + radius * Math.sin(endAngle),
+  );
+
+  gradient.addColorStop(0, "#32cd32");
+  gradient.addColorStop(0.2, "#adff2f");
+  gradient.addColorStop(0.4, "#ffff00");
+  gradient.addColorStop(0.6, "#ffa500");
+  gradient.addColorStop(0.8, "#ff4500");
+  gradient.addColorStop(1, "#8b0000");
+
+  ctx.strokeStyle = gradient;
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+  ctx.stroke();
+
+  // Draw tick marks and labels
+  const totalRatings = 91; // 0 to 90
+  for (let rating = 0; rating <= 90; rating += 10) {
+    const angle = ratingToAngle(rating);
+    const tickLength = rating % 10 === 0 ? 20 : 10;
+
+    // Outer point on arc
+    const x1 = centerX + radius * Math.cos(angle);
+    const y1 = centerY + radius * Math.sin(angle);
+
+    // Inner point (tick mark)
+    const x2 = centerX + (radius - tickLength) * Math.cos(angle);
+    const y2 = centerY + (radius - tickLength) * Math.sin(angle);
+
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+
+    // Draw rating label every 10
+    if (rating % 10 === 0) {
+      const labelDistance = radius - 50;
+      const labelX = centerX + labelDistance * Math.cos(angle);
+      const labelY = centerY + labelDistance * Math.sin(angle);
+
+      ctx.fillStyle = rating === 90 ? "#ff5555" : "white";
+      ctx.font = "bold 32px 'Innovator Grotesk', sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(rating.toString(), labelX, labelY);
+    }
+  }
+
+  // Draw indicator lines for placed services
+  Object.entries(servicePositions).forEach(([domain, data]) => {
+    drawIndicatorLine(data.angle, data.distance);
+  });
+}
+
+function drawIndicatorLine(angle, distance) {
+  const { centerX, centerY, radius } = ARC_CONFIG;
+
+  // Point on arc
+  const arcX = centerX + radius * Math.cos(angle);
+  const arcY = centerY + radius * Math.sin(angle);
+
+  // Point at service icon
+  const iconX = centerX + distance * Math.cos(angle);
+  const iconY = centerY + distance * Math.sin(angle);
+
+  ctx.strokeStyle = "white";
+  ctx.lineWidth = 2;
+  ctx.setLineDash([5, 5]);
+  ctx.beginPath();
+  ctx.moveTo(arcX, arcY);
+  ctx.lineTo(iconX, iconY);
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function ratingToAngle(rating) {
+  const { startAngle, endAngle } = ARC_CONFIG;
+  const t = rating / 90;
+  return startAngle + t * (endAngle - startAngle);
+}
+
+function angleToRating(angle) {
+  const { startAngle, endAngle } = ARC_CONFIG;
+  const t = (angle - startAngle) / (endAngle - startAngle);
+  return Math.max(0, Math.min(90, Math.round(t * 90)));
+}
 
 function setupServiceDrag(element) {
   element.style.cursor = "grab";
···
 }
 
 function startDrag(e) {
-  const serviceItem = e.target.closest(".service-item");
+  const serviceItem = e.target.closest(".service-item, .service-on-canvas");
   if (!serviceItem) return;
 
   e.preventDefault();
 
-  const clone = serviceItem.cloneNode(true);
-  clone.style.position = "fixed";
-  clone.style.pointerEvents = "none";
-  clone.style.zIndex = "10000";
-  clone.style.width = "80px";
-  clone.style.height = "80px";
+  const domain = serviceItem.dataset.domain || serviceItem.dataset.canvasDomain;
+  const name = serviceItem.dataset.name;
 
   currentDrag = {
+    domain,
+    name,
     element: serviceItem,
-    clone: clone,
-    domain: serviceItem.dataset.domain,
-    name: serviceItem.dataset.name,
-    startX: e.clientX,
-    startY: e.clientY,
+    isFromCanvas: serviceItem.classList.contains("service-on-canvas"),
   };
 
-  document.body.appendChild(clone);
-  updateClonePosition(e);
-
-  serviceItem.style.opacity = "0.3";
-
+  serviceItem.style.opacity = "0.5";
   document.addEventListener("mousemove", onDragMove);
   document.addEventListener("mouseup", onDragEnd);
 }
 
 function onDragMove(e) {
   if (!currentDrag) return;
-  updateClonePosition(e);
-}
+
+  // Update visual feedback based on mouse position relative to arc
+  const canvasRect = canvas.getBoundingClientRect();
+  const mouseX = e.clientX - canvasRect.left;
+  const mouseY = e.clientY - canvasRect.top;
+
+  // Calculate angle from center to mouse
+  const dx = mouseX - ARC_CONFIG.centerX;
+  const dy = mouseY - ARC_CONFIG.centerY;
+  const angle = Math.atan2(dy, dx);
+
+  // Constrain to arc range
+  const { startAngle, endAngle } = ARC_CONFIG;
+  const constrainedAngle = Math.max(startAngle, Math.min(endAngle, angle));
+
+  // Show preview by updating element position if it's on canvas
+  if (currentDrag.isFromCanvas) {
+    const distance = calculateDistance(currentDrag.domain, constrainedAngle);
+    const x = ARC_CONFIG.centerX + distance * Math.cos(constrainedAngle);
+    const y = ARC_CONFIG.centerY + distance * Math.sin(constrainedAngle);
 
-function updateClonePosition(e) {
-  if (!currentDrag) return;
-  currentDrag.clone.style.left = e.clientX - 40 + "px";
-  currentDrag.clone.style.top = e.clientY - 40 + "px";
+    currentDrag.element.style.left = x - ARC_CONFIG.iconSize / 2 + "px";
+    currentDrag.element.style.top = y - ARC_CONFIG.iconSize / 2 + "px";
+  }
 }
 
 function onDragEnd(e) {
···
   document.removeEventListener("mousemove", onDragMove);
   document.removeEventListener("mouseup", onDragEnd);
 
-  const domain = currentDrag.domain;
-  const name = currentDrag.name;
+  const { domain, name, element, isFromCanvas } = currentDrag;
 
-  // Check where it was dropped
-  const canvas = document.getElementById("dragCanvas");
+  // Check if dropped on services bar (to remove rating)
   const servicesBar = document.getElementById("servicesBar");
-  const scaleBar = document.getElementById("scaleBar");
-
   const servicesBarRect = servicesBar.getBoundingClientRect();
-  const canvasRect = canvas.getBoundingClientRect();
-  const scaleBarRect = scaleBar.getBoundingClientRect();
-
-  const dropX = e.clientX;
-  const dropY = e.clientY;
 
-  // Clean up
-  currentDrag.clone.remove();
-  currentDrag.element.style.opacity = "1";
-
-  // Check if dropped on services bar
   if (
-    dropY >= servicesBarRect.top &&
-    dropY <= servicesBarRect.bottom &&
-    dropX >= servicesBarRect.left &&
-    dropX <= servicesBarRect.right
+    e.clientY >= servicesBarRect.top &&
+    e.clientY <= servicesBarRect.bottom &&
+    e.clientX >= servicesBarRect.left &&
+    e.clientX <= servicesBarRect.right
   ) {
-    // Return to bar - remove rating
-    removeServiceFromCanvas(domain);
-    delete pendingRatings[domain];
-    updateSaveButton();
+    // Remove from canvas and add back to bar
+    removeServiceFromCanvas(domain, name);
+    element.style.opacity = "1";
     currentDrag = null;
     return;
   }
 
-  // Calculate rating from horizontal position relative to scale bar
-  const scaleX = dropX - scaleBarRect.left;
-  const percentage = Math.max(0, Math.min(100, (scaleX / scaleBarRect.width) * 100));
-  const rating = Math.round((percentage / 100) * 90);
+  // Calculate position on arc
+  const canvasRect = canvas.getBoundingClientRect();
+  const mouseX = e.clientX - canvasRect.left;
+  const mouseY = e.clientY - canvasRect.top;
 
-  // Position on canvas
-  const canvasX = dropX - canvasRect.left;
-  const canvasY = dropY - canvasRect.top;
+  const dx = mouseX - ARC_CONFIG.centerX;
+  const dy = mouseY - ARC_CONFIG.centerY;
+  const angle = Math.atan2(dy, dx);
 
-  // Store pending rating
-  pendingRatings[domain] = {
-    domain,
-    name,
-    rating,
-    x: canvasX,
-    y: canvasY,
-  };
+  // Constrain to arc range
+  const { startAngle, endAngle } = ARC_CONFIG;
+  const constrainedAngle = Math.max(startAngle, Math.min(endAngle, angle));
+
+  const rating = angleToRating(constrainedAngle);
 
   // Place on canvas
-  placeServiceOnCanvas(domain, name, rating, canvasX, canvasY);
-  updateSaveButton();
+  placeServiceOnArc(domain, name, rating);
 
+  element.style.opacity = "1";
   currentDrag = null;
 }
 
-function placeServiceOnCanvas(domain, name, rating, x, y) {
-  const canvas = document.getElementById("dragCanvas");
-  const servicesBar = document.getElementById("servicesBar");
+function calculateDistance(domain, angle) {
+  // Find the furthest "valence ring" occupied within 5 degrees BEFORE this angle
+  // This prevents recursive offsetting - only look backwards along the arc
+  // Only services at the current ring level count as crowding
+  const angularTolerance = 10 * (Math.PI / 180); // 5 degrees in radians
+  const baseDistance = ARC_CONFIG.radius + ARC_CONFIG.baseDistance;
+
+  // Find all occupied rings in the angular range
+  let occupiedRings = new Set();
+  Object.entries(servicePositions).forEach(([d, data]) => {
+    if (d !== domain) {
+      const angleDiff = angle - data.angle; // Positive if data.angle is before this angle
+      if (angleDiff >= 0 && angleDiff <= angularTolerance) {
+        // Found a service in the 5 degrees before
+        occupiedRings.add(data.distance);
+      }
+    }
+  });
+
+  // Find the first unoccupied ring
+  let testDistance = baseDistance;
+  while (occupiedRings.has(testDistance)) {
+    testDistance += ARC_CONFIG.crowdingOffset;
+  }
+
+  return testDistance;
+}
+
+function placeServiceOnArc(domain, name, rating) {
+  const angle = ratingToAngle(rating);
+  const distance = calculateDistance(domain, angle);
+
+  // Store position
+  servicePositions[domain] = { rating, angle, distance };
 
-  // Remove from services bar if it's there
+  // Store in pending ratings
+  if (typeof pendingRatings !== "undefined") {
+    pendingRatings[domain] = { domain, name, rating };
+  }
+
+  // Remove from services bar
+  const servicesBar = document.getElementById("servicesBar");
   const inBar = servicesBar.querySelector(`[data-domain="${domain}"]`);
-  if (inBar) {
-    inBar.remove();
-  }
+  if (inBar) inBar.remove();
 
-  // Remove existing placement on canvas
-  const existing = canvas.querySelector(`[data-canvas-domain="${domain}"]`);
+  // Remove existing on canvas
+  const existing = canvasContainer.querySelector(`[data-canvas-domain="${domain}"]`);
   if (existing) existing.remove();
 
+  // Calculate pixel position
+  const x = ARC_CONFIG.centerX + distance * Math.cos(angle);
+  const y = ARC_CONFIG.centerY + distance * Math.sin(angle);
+
   // Create element
   const el = document.createElement("div");
-  el.className = "service-item on-canvas";
+  el.className = "service-on-canvas";
+  el.dataset.canvasDomain = domain;
   el.dataset.domain = domain;
   el.dataset.name = name;
-  el.dataset.canvasDomain = domain;
-  el.style.position = "absolute";
-  el.style.left = x - 40 + "px";
-  el.style.top = y - 40 + "px";
+  el.style.left = x - ARC_CONFIG.iconSize / 2 + "px";
+  el.style.top = y - ARC_CONFIG.iconSize / 2 + "px";
   el.innerHTML = `
     <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
          alt="${name}"
-         class="service-logo"
+         class="service-icon"
          draggable="false">
     <div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>
   `;
 
   setupServiceDrag(el);
-  canvas.appendChild(el);
+  canvasContainer.appendChild(el);
+
+  // Redraw canvas to show indicator line
+  drawArcScale();
+
+  // Reposition any crowded services
+  repositionCrowdedServices();
+
+  if (typeof updateSaveButton !== "undefined") {
+    updateSaveButton();
+  }
 }
 
-function removeServiceFromCanvas(domain) {
-  const canvas = document.getElementById("dragCanvas");
+function repositionCrowdedServices() {
+  // Recalculate distances for all services to handle crowding
+  Object.entries(servicePositions).forEach(([domain, data]) => {
+    const newDistance = calculateDistance(domain, data.angle);
+    if (newDistance !== data.distance) {
+      data.distance = newDistance;
+
+      // Update element position
+      const el = canvasContainer.querySelector(`[data-canvas-domain="${domain}"]`);
+      if (el) {
+        const x = ARC_CONFIG.centerX + newDistance * Math.cos(data.angle);
+        const y = ARC_CONFIG.centerY + newDistance * Math.sin(data.angle);
+        el.style.left = x - ARC_CONFIG.iconSize / 2 + "px";
+        el.style.top = y - ARC_CONFIG.iconSize / 2 + "px";
+      }
+    }
+  });
+
+  drawArcScale();
+}
+
+function removeServiceFromCanvas(domain, name) {
+  // Remove from positions
+  delete servicePositions[domain];
+
+  // Remove from canvas
+  const existing = canvasContainer.querySelector(`[data-canvas-domain="${domain}"]`);
+  if (existing) existing.remove();
+
+  // Add back to services bar
   const servicesBar = document.getElementById("servicesBar");
+  const rating = window.existingRatings ? window.existingRatings[domain] : undefined;
 
-  // Remove from canvas
-  const existing = canvas.querySelector(`[data-canvas-domain="${domain}"]`);
-  if (existing) {
-    const name = existing.dataset.name;
-    const rating = window.existingRatings ? window.existingRatings[domain] : undefined;
-    existing.remove();
+  const serviceEl = document.createElement("div");
+  serviceEl.className = "service-item";
+  serviceEl.dataset.domain = domain;
+  serviceEl.dataset.name = name;
+  serviceEl.innerHTML = `
+    <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
+         alt="${name}"
+         class="service-logo"
+         draggable="false">
+    ${rating !== undefined ? `<div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>` : ""}
+  `;
+  setupServiceDrag(serviceEl);
+  servicesBar.appendChild(serviceEl);
 
-    // Add back to services bar
-    const serviceEl = document.createElement("div");
-    serviceEl.className = "service-item";
-    serviceEl.dataset.domain = domain;
-    serviceEl.dataset.name = name;
-    serviceEl.innerHTML = `
-      <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
-           alt="${name}"
-           class="service-logo"
-           draggable="false">
-      ${rating !== undefined ? `<div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>` : ""}
-    `;
-    setupServiceDrag(serviceEl);
-    servicesBar.appendChild(serviceEl);
+  // Remove from pending
+  if (typeof pendingRatings !== "undefined") {
+    delete pendingRatings[domain];
+  }
+
+  // Redraw and reposition
+  drawArcScale();
+  repositionCrowdedServices();
+
+  if (typeof updateSaveButton !== "undefined") {
+    updateSaveButton();
   }
 }
 
-function handleCanvasDrop(e) {
-  // This is here for compatibility but we use mouse events instead
-  e.preventDefault();
+function redrawServices() {
+  // Redraw all services at their current positions
+  Object.entries(servicePositions).forEach(([domain, data]) => {
+    const el = canvasContainer.querySelector(`[data-canvas-domain="${domain}"]`);
+    if (el) {
+      const x = ARC_CONFIG.centerX + data.distance * Math.cos(data.angle);
+      const y = ARC_CONFIG.centerY + data.distance * Math.sin(data.angle);
+      el.style.left = x - ARC_CONFIG.iconSize / 2 + "px";
+      el.style.top = y - ARC_CONFIG.iconSize / 2 + "px";
+    }
+  });
 }

index.html

···
       /* Go90 Scale Interface */
       .scale-container {
         background: var(--go90-blue);
-        border: 4px solid var(--go90-yellow);
-        padding: 3rem 2rem;
+        padding: 2rem;
         border-radius: 8px;
         margin-bottom: 2rem;
-        min-height: 600px;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       .drag-canvas {
         position: relative;
-        min-height: 500px;
-      }
-
-      .scale-bar-wrapper {
-        margin-bottom: 3rem;
+        width: 100%;
+        height: 700px;
+        margin-bottom: 2rem;
       }
 
-      .scale-labels {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 1rem;
-      }
-
-      .scale-label {
-        font-size: 3rem;
-        font-weight: 900;
-        color: var(--go90-yellow);
-      }
-
-      .scale-label.red {
-        color: #ff5555;
-      }
-
-      .scale-bar {
-        position: relative;
-        height: 80px;
-        background: linear-gradient(
-          to right,
-          #32cd32 0%,
-          #7fff00 10%,
-          #adff2f 20%,
-          #ffff00 30%,
-          #ffd700 40%,
-          #ffa500 50%,
-          #ff8c00 60%,
-          #ff6347 70%,
-          #ff4500 80%,
-          #dc143c 90%,
-          #8b0000 100%
-        );
-        border-radius: 12px;
-        border: 3px solid white;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        margin-bottom: 120px;
-        margin-top: 120px;
-      }
-
-      .scale-bar.drag-over {
-        box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
-        border-color: var(--go90-yellow);
-      }
-
-      .drop-zone {
+      #arcCanvas {
         position: absolute;
         top: 0;
         left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 12px;
+        pointer-events: none;
       }
 
-      .service-on-scale {
+      .service-on-canvas {
         position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        cursor: move;
+        cursor: grab;
         transition: transform 0.1s;
       }
 
-      .service-on-scale:hover {
-        transform: translate(-50%, -50%) scale(1.1);
+      .service-on-canvas:active {
+        cursor: grabbing;
       }
 
-      .service-logo-large {
+      .service-on-canvas:hover {
+        transform: scale(1.05);
+      }
+
+      .service-icon {
         width: 80px;
         height: 80px;
         border-radius: 12px;
         background: white;
         padding: 8px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
-        border: 3px solid white;
+        border: 3px solid var(--go90-yellow);
+        display: block;
       }
 
       .service-badge {
···
       }
 
       .services-bar {
-        background: black;
+        background: transparent;
         padding: 1.5rem;
         border-radius: 8px;
         display: flex;
         gap: 1rem;
         align-items: center;
+        justify-content: center;
         flex-wrap: wrap;
-        min-height: 100px;
+        border: 3px solid rgba(255, 255, 255, 0.3);
       }
 
       .service-item {
         width: 80px;
         height: 80px;
         border-radius: 8px;
-        background: white;
+        background: black;
         padding: 8px;
         cursor: grab;
         transition:
···
         display: flex;
         gap: 0.5rem;
         align-items: center;
-        margin-top: 1rem;
+        justify-content: center;
+        width: 100%;
+        max-width: 600px;
       }
 
       .add-service-input {
         flex: 1;
-        padding: 0.75rem;
-        border: 2px solid var(--gray-500);
-        border-radius: 4px;
-        background: var(--gray-900);
+        padding: 1rem 1.5rem;
+        border: 3px solid rgba(255, 255, 255, 0.3);
+        border-radius: 8px;
+        background: transparent;
         color: white;
-        font-size: 1rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+      }
+
+      .add-service-input::placeholder {
+        color: rgba(255, 255, 255, 0.5);
       }
 
       .add-service-input:focus {
         outline: none;
-        border-color: var(--go90-yellow);
+        border-color: white;
       }
 
       .add-service-btn {
-        padding: 0.75rem 1.5rem;
-        background: var(--go90-yellow);
-        color: black;
-        border: none;
-        border-radius: 4px;
+        padding: 1rem 1.5rem;
+        background: transparent;
+        color: white;
+        border: 3px solid rgba(255, 255, 255, 0.3);
+        border-radius: 8px;
         font-weight: 700;
         cursor: pointer;
-        font-size: 1rem;
+        font-size: 1.25rem;
+        transition: all 0.2s;
       }
 
       .add-service-btn:hover {
-        background: #ffff44;
+        border-color: white;
+        background: rgba(255, 255, 255, 0.1);
       }
 
       .instructions {
···
         const container = document.getElementById("content");
 
         container.innerHTML = `
-          <div class="instructions">
-            Drag services anywhere to rate them! Drop on the bar to remove rating.
-          </div>
-
-          <div class="scale-container drag-canvas" id="dragCanvas">
-            <div class="scale-bar-wrapper">
-              <div class="scale-labels">
-                <span class="scale-label">0</span>
-                <span class="scale-label red">90</span>
-              </div>
-              <div class="scale-bar" id="scaleBar"></div>
+          <div class="scale-container">
+            <div class="drag-canvas" id="dragCanvas">
+              <canvas id="arcCanvas"></canvas>
             </div>
 
             <div class="services-bar" id="servicesBar">
···
               <input type="text"
                      id="customServiceDomain"
                      class="add-service-input"
-                     placeholder="Enter a domain (e.g., dropout.tv)">
-              <button type="submit" class="add-service-btn">Add Service</button>
+                     placeholder="add service">
+              <button type="submit" class="add-service-btn">add service</button>
             </form>
           </div>
         `;
···
           const data = await client.query(ratingsQuery);
           const allEdges = data?.socialGo90Rating?.edges || [];
 
-          // Filter to only viewer's ratings
-          const myRatings = allEdges
+          // Filter to only viewer's ratings and deduplicate by domain (keep latest)
+          const ratingsByDomain = {};
+          allEdges
             .filter((edge) => edge.node.did === viewerDid)
-            .map((edge) => edge.node);
+            .forEach((edge) => {
+              const node = edge.node;
+              ratingsByDomain[node.serviceDomain] = node;
+            });
+          const myRatings = Object.values(ratingsByDomain);
 
           if (myRatings && myRatings.length > 0) {
             // Store ratings in global object
···
             // Update badges on services in the bar
             updateServiceBadges();
 
-            const scaleBar = document.getElementById("scaleBar");
-            const scaleBarRect = scaleBar.getBoundingClientRect();
-            const canvas = document.getElementById("dragCanvas");
-            const canvasRect = canvas.getBoundingClientRect();
-
-            // Load viewer's ratings onto canvas
+            // Load viewer's ratings onto arc canvas
             for (const rating of myRatings) {
-              // Calculate position based on rating value
-              const percentageX = (rating.rating / 90) * 100;
-              const scaleX = scaleBarRect.left + (percentageX / 100) * scaleBarRect.width;
-              const scaleY = scaleBarRect.top + scaleBarRect.height / 2;
-
-              // Convert to canvas coordinates
-              const canvasX = scaleX - canvasRect.left;
-              const canvasY = scaleY - canvasRect.top;
+              console.log(`Loading ${rating.serviceDomain} at rating ${rating.rating}`);
 
-              // Place on canvas
-              placeServiceOnCanvas(
-                rating.serviceDomain,
-                rating.serviceDomain,
-                rating.rating,
-                canvasX,
-                canvasY,
-              );
+              // Use arc-based placement from drag-fix.js
+              if (typeof placeServiceOnArc !== "undefined") {
+                placeServiceOnArc(rating.serviceDomain, rating.serviceDomain, rating.rating);
+              }
             }
           }
         } catch (error) {