backlinks

front/js/svelte/records/Graph.svelte

@@ -1,15 +1,9 @@
 <script>
-    import PreviewCardSmall from "./PreviewCardSmall.svelte";
-    import PreviewCard from "./PreviewCard.svelte";
-    import Icon from "../common/Icon.svelte";
-    import Preview from "../files/Preview.svelte";
     import {getContext} from "svelte";
-    import {uniqBy} from "lodash";
+    import PreviewReference from "./previews/PreviewReference.svelte";
 
     const channel = getContext("channel");
     export let graph;
-    export let record;
-
     function findEdgeField(schema, edgeField){
         if(edgeField.includes(":")){
             let edgeFieldAr = edgeField.split(":");
@@ -18,121 +12,32 @@
         return schema.fields.find((f) => f.name === edgeField);
     }
 
-    let parentEdgesByField = graph.parentEdges
-        .filter((edge) => edge.source !== record.id && edge.depth === 1)
-        .reduce((carry, edge) => {
-            let schema = channel.schemas.find((s) => s.name === edge.sourceSchema);
-            let edgeField =  findEdgeField(schema,edge.field);
-            let schemaField = edge.sourceSchema + edgeField;
-
-            let arecord = graph.records.find((n) => {
-                return n.id === edge.source;
-            });
-            if (!carry[schemaField]) {
-                carry[schemaField] = {
-                    field: edgeField,
-                    schema: schema,
-                    nodes: [],
-                };
-            }
-            if (arecord) {
-                carry[schemaField].nodes.push(arecord);
-                carry[schemaField].nodes = uniqBy(carry[schemaField].nodes,"id");
-            }
-            return carry;
-        }, {});
-
-
-    let childrenEdgesByField = graph.edges
-        .filter((edge) => edge.source === record.id && edge.depth === 1)
-        .reduce((carry, edge) => {
-
-            let schema = channel.schemas.find((s) => s.name === record.schema);
-            let edgeField = findEdgeField(schema,edge.field);
-
-            // let schemaField = edge.targetSchema + edgeField;
-            let schemaField = edgeField.name + edge.targetSchema;
-
-            if (!carry[schemaField]) {
-                carry[schemaField] = {
-                    field: edgeField,
-                    nodes: [],
-                };
-            }
-
-            let arecord = graph.records.find((n) => {
-                return n.id === edge.target;
-            });
-            if (arecord) {
-                carry[schemaField].nodes.push(arecord);
-                carry[schemaField].nodes = uniqBy(carry[schemaField].nodes,"id");
-            }
-            return carry;
-        }, {});
+    let backlinks = graph.parentEdges.map(edge => {
+        let schema = channel.schemas.find((s) => s.name === edge.sourceSchema);
+        let edgeField =  findEdgeField(schema,edge.field);
+        return {
+            field: edgeField.label,
+            record: graph.records.find( record => record.id === edge.source)
+        }
+    })
 </script>
 
-{#each Object.entries(parentEdgesByField) as [fieldName, fieldData]}
-    <div class="lx-card mt-3">
-        <div class="text-center mb-3 d-flex justify-content-center align-items-center text-uppercase ">
-            <span>{fieldData.schema.label}</span>
-            <Icon icon="angle-right" width="12" height="12"/>
-            <span>{fieldData.field.label}</span>
-        </div>
-        <div class="d-flex justify-content-center text-center flex-wrap">
-            {#each fieldData.nodes as node}
-                {#if node._file?.path}
-                    <div class="ms-2 mb-2" style="max-height:64px;">
-                        <Preview record={node} size="small"/>
-                    </div>
-                {:else}
-                    <div class="ms-2 mb-2">
-                        <PreviewCardSmall {graph} record={node}/>
-                    </div>
-                {/if}
-            {/each}
-        </div>
-        <!--        <div class="text-center mt-3 d-block">{fieldData.field.label}</div>-->
+{#each backlinks as backlink}
+    <div style="margin: 0 0 15px;position: relative;">
+        <span style="
+            font-size: 14px;
+            margin-bottom: 5px;
+            display: block;
+            position: absolute;
+            top: -9px;
+            left: 9px;
+  z-index: 9;
+"
+        >In <i>{backlink.field}</i></span>
+        <PreviewReference
+                record={backlink.record}
+                hasDelete={false}
+                {graph}
+        />
     </div>
 {/each}
-{#if Object.entries(parentEdgesByField).length > 0}
-    <div class="text-center my-4">
-        <Icon icon="angles-down" width="32" height="32"/>
-    </div>
-{/if}
-<div style="max-width:400px;margin:0 auto;">
-    <PreviewCard {graph} record={record}/>
-</div>
-{#if Object.entries(childrenEdgesByField).length > 0}
-    <div class="text-center my-4">
-        <Icon icon="angles-down" width="32" height="32"/>
-    </div>
-{/if}
-
-{#each Object.entries(childrenEdgesByField) as [fieldName, fieldData]}
-    <div class="lx-card mt-3">
-        <div class="text-center mb-5 d-block">{fieldData.field.label}</div>
-        <div class="d-flex justify-content-center text-center flex-wrap">
-            {#each fieldData.nodes as node}
-                {#if fieldData.field.info.ui === "file"}
-                    <div
-                        class="ms-2 mb-2"
-                        style="max-width:64px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
-                    >
-                        <Preview
-                            record={node}
-                            size="small"
-                            showFilename={true}
-                        />
-                    </div>
-                {:else}
-                    <div class="ms-2 mb-2">
-                        <PreviewCardSmall {graph} record={node}/>
-                    </div>
-                {/if}
-            {/each}
-        </div>
-    </div>
-{/each}
-
-<style>
-</style>