chore: wip

Author: chrisbbreuer

storage/framework/defaults/views/dashboard/models/subscribers.vue

@@ -99,6 +99,22 @@
       </div>
     </div>
 
+    <div class="mb-8 px-4 lg:px-8 sm:px-6">
+      <div class="bg-white dark:bg-blue-gray-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">Subscriber Model Relationships</h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Interactive diagram showing Subscriber model relationships</p>
+            </div>
+          </div>
+          <div ref="diagramContainer" class="h-[400px] relative">
+            <!-- D3 diagram will be rendered here -->
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="px-4 pt-12 lg:px-8 sm:px-6">
       <div class="sm:flex sm:items-center">
         <div class="sm:flex-auto">
@@ -247,6 +263,8 @@ import {
   Scale,
   CoreScaleOptions,
 } from 'chart.js'
+import * as d3 from 'd3'
+import { useRouter } from 'vue-router'
 
 ChartJS.register(
   CategoryScale,
@@ -399,4 +417,226 @@ onMounted(async () => {
   await new Promise(resolve => setTimeout(resolve, 500))
   isLoading.value = false
 })
+
+// Get router instance
+const router = useRouter()
+
+// Model node interface
+interface ModelNode extends d3.SimulationNodeDatum {
+  id: string
+  name: string
+  properties: string[]
+  relationships: string[]
+  emoji: string
+  color: string
+  x?: number
+  y?: number
+  fx?: number | null
+  fy?: number | null
+}
+
+// Relationship link interface
+interface RelationshipLink {
+  source: string | ModelNode
+  target: string | ModelNode
+  type: 'hasMany' | 'belongsTo' | 'hasOne' | 'belongsToMany'
+}
+
+// Subscriber model and its relationships
+const models: ModelNode[] = [
+  {
+    id: 'subscriber',
+    name: 'Subscriber',
+    properties: ['id', 'email', 'status'],
+    relationships: ['subscriberEmails'],
+    emoji: '📫',
+    color: '#0D9488'
+  },
+  {
+    id: 'subscriberEmail',
+    name: 'SubscriberEmail',
+    properties: ['id', 'email', 'subscriber_id'],
+    relationships: ['subscriber'],
+    emoji: '✉️',
+    color: '#2DD4BF'
+  }
+]
+
+// Define relationships
+const relationships: RelationshipLink[] = [
+  { source: 'subscriber', target: 'subscriberEmail', type: 'hasMany' },
+  { source: 'subscriberEmail', target: 'subscriber', type: 'belongsTo' }
+]
+
+// Visualization state
+const diagramContainer = ref<HTMLElement | null>(null)
+let simulation: d3.Simulation<ModelNode, undefined>
+
+// Function to get route path for a model
+const getModelRoute = (modelId: string) => {
+  const routes: Record<string, string> = {
+    user: '/models/users',
+    team: '/models/teams',
+    accessToken: '/models/access-tokens',
+    activity: '/models/activities',
+    post: '/models/posts',
+    subscriber: '/models/subscribers',
+    subscriberEmail: '/models/subscriber-emails'
+  }
+  return routes[modelId] || '/models'
+}
+
+onMounted(() => {
+  if (!diagramContainer.value) return
+
+  const width = 800
+  const height = 400
+  const svg = d3.select(diagramContainer.value)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('viewBox', [0, 0, width, height])
+    .attr('style', 'max-width: 100%; height: auto;')
+
+  // Create arrow marker
+  svg.append('defs').selectAll('marker')
+    .data(['arrow'])
+    .join('marker')
+    .attr('id', d => d)
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 25)
+    .attr('refY', 0)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('fill', '#999')
+    .attr('d', 'M0,-5L10,0L0,5')
+
+  // Create the simulation
+  simulation = d3.forceSimulation<ModelNode>(models)
+    .force('link', d3.forceLink<ModelNode, RelationshipLink>(relationships)
+      .id(d => d.id)
+      .distance(150))
+    .force('charge', d3.forceManyBody().strength(-800))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+
+  // Draw the links
+  const link = svg.append('g')
+    .selectAll('line')
+    .data(relationships)
+    .join('line')
+    .attr('stroke', '#999')
+    .attr('stroke-opacity', 0.6)
+    .attr('stroke-width', 2)
+    .attr('marker-end', 'url(#arrow)')
+
+  // Draw the nodes with proper typing
+  const node = svg.append('g')
+    .selectAll<SVGGElement, ModelNode>('g')
+    .data(models)
+    .join('g')
+    .call((selection) => {
+      const drag = d3.drag<SVGGElement, ModelNode>()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended)
+      return drag(selection)
+    })
+    .style('cursor', 'pointer')
+    .on('click', (event, d) => {
+      router.push(getModelRoute(d.id))
+    })
+
+  // Add hover effect to nodes
+  node.on('mouseover', function() {
+    d3.select(this).select('circle')
+      .transition()
+      .duration(200)
+      .attr('r', 22) // Slightly larger on hover
+  })
+  .on('mouseout', function() {
+    d3.select(this).select('circle')
+      .transition()
+      .duration(200)
+      .attr('r', 20) // Back to normal size
+  })
+
+  // Add circles for nodes
+  node.append('circle')
+    .attr('r', 20)
+    .attr('fill', d => d.color)
+
+  // Add emojis
+  node.append('text')
+    .attr('dy', '0.35em')
+    .attr('text-anchor', 'middle')
+    .text(d => d.emoji)
+    .attr('font-size', '20px')
+
+  // Add labels
+  node.append('text')
+    .attr('dy', 35)
+    .attr('text-anchor', 'middle')
+    .text(d => d.name)
+    .attr('fill', '#374151')
+    .attr('font-size', '14px')
+    .attr('font-weight', 'bold')
+
+  // Update positions on each tick
+  simulation.on('tick', () => {
+    link
+      .attr('x1', d => (d.source as ModelNode).x!)
+      .attr('y1', d => (d.source as ModelNode).y!)
+      .attr('x2', d => (d.target as ModelNode).x!)
+      .attr('y2', d => (d.target as ModelNode).y!)
+
+    node
+      .attr('transform', d => `translate(${d.x},${d.y})`)
+  })
+
+  // Drag functions
+  function dragstarted(event: d3.D3DragEvent<SVGGElement, ModelNode, ModelNode>) {
+    if (!event.active) simulation.alphaTarget(0.3).restart()
+    event.subject.fx = event.subject.x
+    event.subject.fy = event.subject.y
+  }
+
+  function dragged(event: d3.D3DragEvent<SVGGElement, ModelNode, ModelNode>) {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
+  }
+
+  function dragended(event: d3.D3DragEvent<SVGGElement, ModelNode, ModelNode>) {
+    if (!event.active) simulation.alphaTarget(0)
+    event.subject.fx = null
+    event.subject.fy = null
+  }
+})
 </script>
+
+<style scoped>
+/* Add these styles for the diagram */
+:deep(svg) {
+  background-color: transparent;
+  border-radius: 0.5rem;
+}
+
+:deep(line) {
+  stroke-linecap: round;
+}
+
+:deep(text) {
+  user-select: none;
+}
+
+:deep(circle) {
+  cursor: grab;
+}
+
+:deep(circle:active) {
+  cursor: grabbing;
+}
+
+/* ... existing styles ... */
+</style>