Move description and start work on network graph

app/Http/Controllers/ItemController.php

@@ -30,7 +30,7 @@ public function index(Request $request)
 
         return Inertia::render('Items/Index', [
             'items' => $items->get(),
-            'attributeTypes' => AttributeType::with('attributes')->get(),
+            'attributeTypes' => AttributeType::with('attributes')->orderBy('created_at', 'desc')->get(),
             'filters' => $filters,
         ]);
     }

database/factories/ItemFactory.php

@@ -30,7 +30,7 @@ public function definition(): array
             'example_code' => $this->faker->paragraph,
             'wiring_photo' => 'Af2XzLDwCqixQw8LcnJm5mATRiBHkXIJCVVdnGYf.jpg',
             'wiring_instructions' => $this->faker->paragraph,
-            'json_items' => json_encode([1, 2, 3, 4, 5]),
+            'json_items' => [1, 2, 3, 4, 5],
         ];
     }
 }

package.json

@@ -22,6 +22,7 @@
     },
     "dependencies": {
         "@highlightjs/vue-plugin": "^2.1.0",
+        "d3-force": "^3.0.0",
         "highlight.js": "^11.9.0",
         "marked": "^12.0.2",
         "qrcode.vue": "^3.4.1",

resources/js/Pages/Items/Show.vue

@@ -32,7 +32,6 @@ const renderMarkdown = (markdown: string) => marked(markdown);
                 <div>
                     <h2 class="font-semibold text-2xl font-bold text-gray-800 dark:text-gray-200 leading-tight">
                         {{ item.title }}</h2>
-                <div class="text-gray-600 text-sm mt-4">{{ item.description }}</div>
                 </div>
                 <div v-if="$page.props.auth.user">
                     <NavLink class="px-6" :href="route('items.edit', item.id)">
@@ -47,14 +46,9 @@ const renderMarkdown = (markdown: string) => marked(markdown);
         <section class="w-full h-full mx-auto">
             <div class="grid grid-cols-3 md:grid-cols-12">
                 <div class="col-span-3 md:col-span-9 mt-4">
-
-                    <OpeningCard title="Wiring">
+                    <OpeningCard title="Description" :open="true">
                         <template #content>
-                            <div class="float-right mb-2 text-black italic dark:text-gray-100">
-                                <img :src="item.wiring_photo_url" width="400" class="rounded-lg" alt="wiring diagram">
-                                Wiring diagram
-                            </div>
-                            <div v-html="renderMarkdown(item.wiring_instructions)"></div>
+                            <div v-html="renderMarkdown(item.description)"></div>
                         </template>
                     </OpeningCard>
 
@@ -82,6 +76,16 @@ const renderMarkdown = (markdown: string) => marked(markdown);
                         </template>
                     </OpeningCard>
 
+                    <OpeningCard title="Wiring">
+                        <template #content>
+                            <div class="float-right mb-2 text-black italic dark:text-gray-100">
+                                <img :src="item.wiring_photo_url" width="400" class="rounded-lg" alt="wiring diagram">
+                                Wiring diagram
+                            </div>
+                            <div v-html="renderMarkdown(item.wiring_instructions)"></div>
+                        </template>
+                    </OpeningCard>
+
                     <OpeningCard title="Example code">
                         <template #content>
                             <v-highlightjs autodetect :code="item.example_code" class="w-full sm:text-sm"/>
@@ -116,3 +120,9 @@ const renderMarkdown = (markdown: string) => marked(markdown);
         </section>
     </AuthenticatedLayout>
 </template>
+
+<style scoped>
+code {
+    border-radius: 20px;
+}
+</style>

resources/js/Pages/Test.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import {Head} from '@inertiajs/vue3';
+const props = defineProps<{
+    json_items: any;
+}>();
+
+console.log(props.json_items);
+import { VNetworkGraph } from "v-network-graph"
+import "v-network-graph/lib/style.css"
+import 'd3-force';
+import { reactive, ref, watch } from "vue"
+import * as vNG from "v-network-graph"
+import {
+    ForceLayout,
+    ForceNodeDatum,
+    ForceEdgeDatum,
+} from "v-network-graph/lib/force-layout"
+
+const nodeCount = ref(20)
+const nodes = reactive({})
+const edges = reactive({})
+
+// initialize network
+buildNetwork(nodeCount.value, nodes, edges)
+
+const configs = reactive(
+    vNG.defineConfigs({
+        view: {
+            layoutHandler: new ForceLayout({
+                positionFixedByDrag: false,
+                positionFixedByClickWithAltKey: true,
+                createSimulation: (d3, nodes, edges) => {
+                    // d3-force parameters
+                    //@ts-ignore
+                    const forceLink = d3.forceLink<ForceNodeDatum, ForceEdgeDatum>(edges).id(d => d.id)
+                    return d3
+                        .forceSimulation(nodes)
+                        .force("edge", forceLink.distance(40).strength(0.5))
+                        .force("charge", d3.forceManyBody().strength(-800))
+                        .force("center", d3.forceCenter().strength(0.05))
+                        .alphaMin(0.001)
+                }
+            }),
+        },
+        node: {
+            label: {
+                visible: false,
+            },
+        },
+    })
+)
+
+function buildNetwork(count: number, nodes: vNG.Nodes, edges: vNG.Edges) {
+    const idNums = [...Array(count)].map((_, i) => i)
+
+    // nodes
+    const newNodes = Object.fromEntries(idNums.map(id => [`node${id}`, {}]))
+    Object.keys(nodes).forEach(id => delete nodes[id])
+    Object.assign(nodes, newNodes)
+
+    // edges
+    const makeEdgeEntry = (id1: number, id2: number) => {
+        return [`edge${id1}-${id2}`, { source: `node${id1}`, target: `node${id2}` }]
+    }
+    const newEdges = Object.fromEntries([
+        ...idNums
+            .map(n => [n, (Math.floor(n / 4) * 4) % count])
+            .map(([n, m]) => (n === m ? [n, (n + 4) % count] : [n, m]))
+            .map(([n, m]) => makeEdgeEntry(n, m)),
+    ])
+    Object.keys(edges).forEach(id => delete edges[id])
+    Object.assign(edges, newEdges)
+}
+</script>
+
+<template>
+    <Head title="Dashboard"/>
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>
+        </template>
+        <div class="demo-control-panel">
+            <label>Node count:</label>
+            <el-input-number v-model="nodeCount" :min="3" :max="200" />
+            <label>(&lt;= 200)</label>
+        </div>
+
+        <v-network-graph
+            class="h-screen w-full"
+            :zoom-level="0.5"
+            :nodes="nodes"
+            :edges="edges"
+            :configs="configs"
+        />
+    </AuthenticatedLayout>
+</template>

routes/web.php

@@ -4,6 +4,7 @@
 use App\Http\Controllers\AttributeTypeController;
 use App\Http\Controllers\ItemController;
 use App\Http\Controllers\ProfileController;
+use App\Models\Item;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
@@ -17,7 +18,11 @@
 
 Route::resource('attribute_types', AttributeTypeController::class)->middleware('auth');
 Route::resource('attributes', AttributeController::class);
-
+Route::get('/test', function () {
+    return Inertia::render('Test', [
+        'json_items'=>Item::query()->select('json_items', 'id')->without('attributes')->get()
+    ]);
+})->name('test');
 Route::get('/choice-helper', function () {
     return Inertia::render('Dashboard');
 })->name('dashboard');