Skip to content

Commit

Permalink
Improve graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggodlewski
ggodlewski committed May 25, 2024
1 parent c4acca8 commit 0d13ac8
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 25 deletions.
79 changes: 66 additions & 13 deletions apps/ui/src/components/BackLinks.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<div class="x-container">
<div v-if="loading">Loading...</div>
<div v-else-if="notGenerated">
Links not generated. Run Transform.
</div>
<div v-else class="x-container">
<slot name="header">
<h5>Back Links</h5>
</slot>
Expand Down Expand Up @@ -34,7 +38,7 @@
No Links
</div>

<svg ref="graph" width="830" height="300" viewBox="0 0 830 300" style="max-width: 100%; height: auto;">
<svg ref="graph" width="830" height="800" viewBox="0 0 830 800" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" viewBox="0 -10 20 20" refX="100" refY="0" markerWidth="8" markerHeight="8" orient="auto">
<path class="cool arrowHead" d="M0,-10L20,0L0,10" style="fill: teal; stroke: teal;"></path>
Expand All @@ -50,6 +54,39 @@
import {UtilsMixin} from './UtilsMixin.ts';
import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm';
function smartSlice(limit, arr) {
arr = Array.from(arr).map(subArr => {
subArr = Array.from(subArr);
subArr.sort((a, b) => b?.linksCount - a?.linksCount);
return subArr;
});
const ranges = new Set();
for (const subArr of arr) {
for (let i = 0; i < subArr.length; i++) {
ranges.add(subArr[i].linksCount);
}
}
const retVal = arr.map(() => []);
let total = 0;
for (const linksCount of ranges) {
if (total > limit) {
break;
}
for (let i = 0; i < arr.length; i++) {
const subArr = arr[i];
const filtered = subArr.filter(obj => obj.linksCount === linksCount);
retVal[i].push(...filtered);
total += filtered.length;
}
}
return retVal;
}
export default {
mixins: [UtilsMixin],
props: {
Expand All @@ -58,6 +95,7 @@ export default {
},
data() {
return {
loading: true,
backlinks: [],
links: [],
graphData: {
Expand All @@ -78,15 +116,24 @@ export default {
},
methods: {
async fetch() {
if (this.selectedFile.id) {
const { backlinks, links } = await this.FileClientService.getBacklinks(this.driveId, this.selectedFile.id);
this.backlinks = backlinks;
this.links = links;
} else {
this.backlinks = [];
this.links = [];
this.loading = true;
try {
if (this.selectedFile.id) {
const { backlinks, links, notGenerated } = await this.FileClientService.getBacklinks(this.driveId, this.selectedFile.id);
this.backlinks = backlinks;
this.links = links;
this.notGenerated = !!notGenerated;
} else {
this.backlinks = [];
this.links = [];
this.notGenerated = true;
}
} finally {
this.loading = false;
}
this.updateGraph();
this.$nextTick( () => {
this.updateGraph();
});
},
selectFile(path) {
if (this.isAddon) {
Expand All @@ -112,11 +159,15 @@ export default {
}
};
for (const row of this.links) {
const [ links, backlinks ] = smartSlice(20, [ this.links, this.backlinks ]);
for (const row of links) {
nodes[row.fileId] = {
id: row.fileId,
title: row.name,
path: row.path,
x: Math.random() * 1000 - 500,
y: Math.random() * 1000 - 500,
group: 1
};
data.edges.push({
Expand All @@ -125,11 +176,13 @@ export default {
value: 1
});
}
for (const row of this.backlinks) {
for (const row of backlinks) {
nodes[row.fileId] = {
id: row.fileId,
title: row.name,
path: row.path,
x: Math.random() * 1000 - 500,
y: Math.random() * 1000 - 500,
group: 2
};
data.edges.push({
Expand All @@ -150,7 +203,7 @@ export default {
this.graphData.nodes = data.nodes.map(d => ({...d}));
const width = 830;
const height = 300;
const height = 800;
// Specify the color scale.
const color = d3.scaleOrdinal(d3.schemeCategory10);
Expand Down
22 changes: 15 additions & 7 deletions src/containers/server/routes/BackLinksController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,20 @@ export class BackLinksController extends Controller {
const localLinks = new LocalLinks(contentFileService);
await localLinks.load();

const linkFileIds = localLinks.getLinks(fileId);
const linksArr = localLinks.getLinks(fileId);
if (linksArr === false) {
return { backlinks: [], links: [], notGenerated: true };
}

const links = [];
for (const linkFileId of linkFileIds) {
const [file] = await markdownTreeProcessor.findById(linkFileId);
for (const linkObj of linksArr) {
const { fileId, linksCount } = linkObj;
const [file] = await markdownTreeProcessor.findById(fileId);
if (file) {
links.push({
folderId: file.parentId,
fileId: linkFileId,
fileId: fileId,
linksCount,
path: file.path,
name: file.fileName
});
Expand All @@ -41,12 +47,14 @@ export class BackLinksController extends Controller {

const backLinkFileIds = localLinks.getBackLinks(fileId);
const backlinks = [];
for (const backLinkFileId of backLinkFileIds) {
const [file] = await markdownTreeProcessor.findById(backLinkFileId);
for (const backLinkObj of backLinkFileIds) {
const { fileId, linksCount } = backLinkObj;
const [file] = await markdownTreeProcessor.findById(fileId);
if (file) {
backlinks.push({
folderId: file.parentId,
fileId: backLinkFileId,
fileId: fileId,
linksCount,
path: file.path,
name: file.fileName
});
Expand Down
26 changes: 21 additions & 5 deletions src/containers/transform/LocalLinks.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {FileContentService} from '../../utils/FileContentService.ts';
import {FileId} from '../../model/model.js';

interface Link {
fileId: string;
Expand All @@ -10,11 +11,13 @@ export const LINKS_NAME = '.wgd-local-links.csv';

export class LocalLinks {
private links: Link[];
private notGenerated = true;
constructor(private transformFileService: FileContentService) {
}

async load() {
if (!await this.transformFileService.exists(LINKS_NAME)) {
this.notGenerated = true;
this.links = [];
return;
}
Expand All @@ -33,10 +36,11 @@ export class LocalLinks {
}
groups[cells[0]].links.push(cells[2]);
}
this.notGenerated = false;
this.links = Object.values(groups);
}

append(fileId: string, fileName: string, links: string[]) {
append(fileId: FileId, fileName: string, links: string[]) {
const link = this.links.find(l => l.fileId === fileId);
if (link) {
link.fileName = fileName;
Expand All @@ -48,7 +52,7 @@ export class LocalLinks {
}
}

getBackLinks(fileId) {
getBackLinks(fileId: FileId) {
const retVal = new Set<string>();
for (const link of this.links) {
for (const targetLink of link.links) {
Expand All @@ -57,17 +61,29 @@ export class LocalLinks {
}
}
}
return Array.from(retVal);

return Array.from(retVal)
.map(fileId => ({
fileId,
linksCount: this.links.find(link => link.fileId === fileId)?.links.length || 0
}));
}

getLinks(fileId) {
getLinks(fileId: FileId) {
if (this.notGenerated) {
return false;
}

for (const link of this.links) {
if (link.fileId === fileId) {
const links = link.links
.filter(link => link.startsWith('gdoc:'))
.map(link => link.substring('gdoc:'.length));

return links;
return links.map(fileId => ({
fileId,
linksCount: this.links.find(link => link.fileId === fileId)?.links.length || 0
}));
}
}
return [];
Expand Down

0 comments on commit 0d13ac8

Please sign in to comment.