Skip to content

Commit

Permalink
Clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@StefanieJaeger
StefanieJaeger committed Oct 18, 2023
1 parent 4b263bf commit 0d0e730
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 65 deletions.
11 changes: 5 additions & 6 deletions src/components/module-dependency-graph/ModuleDependencyGraph.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ type Link = { source: string, target: string };
Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement, ChartDataLabels);
// todo: labels (should not hide arrow)
// todo: no animation (faster render)
// todo: keep things closer together (way too speard apart)
const chartOptions: ChartOptions<'forceDirectedGraph' | ChartDataLabels> = {
tree: { orientation: 'radial' },
layout: { padding: 40 },
layout: { padding: 20 },
plugins: {
// todo: need to display labels more clearly
// todo: no animation
// todo: an keep things closer together, way too spaced
datalabels: {
display: (_: ChartDataLabels.Context) => {
return true;
Expand Down Expand Up @@ -62,7 +63,6 @@ export default defineComponent({
immediate: false,
handler(newValue: Module[]) {
const nodes = [...newValue.map(module => ({ id: module.id, displayName: module.name }))];
// todo: improve this algo
let links = [...newValue.flatMap(module => module.recommendedModuleIds.map(recommendedId => ({ source: recommendedId, target: module.id })) ?? [])];
links = links.filter(link => nodes.some(node => node.id === link.source) && nodes.some(node => node.id === link.target));
Expand Down Expand Up @@ -94,7 +94,6 @@ export default defineComponent({
plugins: [ChartDataLabels],
};
this.chart = new Chart(canvas, config);
console.log('chart', this.chart);
},
},
});
Expand Down
67 changes: 8 additions & 59 deletions src/components/module-dependency-graph/ModuleDependencyPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
</div>
<div class="columns">
<div class="column">
<ModuleDependencyGraph :modules="modulesForGraph"></ModuleDependencyGraph>
</div>
</div>
<ModuleDependencyGraph :modules="modulesForGraph"></ModuleDependencyGraph>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { defineComponent } from 'vue';
import type { Module } from '../../helpers/types';
import ModuleDependencyDropdown from './ModuleDependencyDropdown.vue';
import ModuleDependencyGraph from './ModuleDependencyGraph.vue';
Expand All @@ -39,7 +39,6 @@ export default defineComponent({
},
async mounted() {
this.allModules = await this.getModules();
console.log('allModules', this.allModules);
},
methods: {
async getModules(): Promise<Module[]> {
Expand All @@ -48,16 +47,15 @@ export default defineComponent({
},
onModulesSelectionChanged(selectedModules: Module[]) {
const recommended = <Module[]>[];
const recommending = <Module[]>[];
for (const module of selectedModules) {
this.getRecommendedModulesForModule(module, recommended);
}
const recommending = <Module[]>[];
for (const module of selectedModules) {
this.getRecommendingModulesForModule(module, recommending);
}
console.log('selected', selectedModules);
console.log('total recommended', recommended.map(m => m.id));
console.log('total recommending', recommending.map(m => m.id));
this.modulesForGraph = [...selectedModules, ...recommended, ...recommending].filter((value, index, array) => array.indexOf(value) === index);
},
getRecommendedModulesForModule(module: Module, visited: Module[]): Module[] {
Expand All @@ -81,56 +79,7 @@ export default defineComponent({
this.getRecommendingModulesForModule(rec, visited);
}
return visited;
}
// getRelatedModulesForModule(module: Module, collectedModules: Module[]): Module[] {
// collectedModules = this.pushIfDistinct(module, collectedModules);
// // get referencing
// const referencingModules = this.allModules.filter(f => f.recommendedModuleIds.includes(module.id));
// for (const ref of referencingModules) {
// collectedModules = this.getRelatedModulesForModule(ref, collectedModules);
// // collectedModules.push(...this.getRelatedModulesForModule(ref));
// }
// // get referenced
// const referencedModules = <Module[]>module.recommendedModuleIds.map(id => this.allModules.find(f => f.id === id)).filter(f => f);
// for (const ref of referencedModules) {
// collectedModules = this.getRelatedModulesForModule(ref, collectedModules);
// // collectedModules.push(...this.getRelatedModulesForModule(ref));
// }
// return collectedModules;
// },
// pushIfDistinct(module: Module, modules: Module[]): Module[] {
// if (!modules.includes(module)) {
// modules.push(module);
// }
// return modules;
// },
// print(module: Module) {
// console.log('module', module.id);
// // go down from down and up from up
// // const referenced = module.recommendedModuleIds.map(m => this.allModules.find(f => f.id === m));
// // const referencing = this.allModules.filter(f => f.recommendedModuleIds.includes(module.id));
// // console.log('referenced', referenced.reduce((a, b) => a += (' ' + b?.id), ''));
// // console.log('referencing', referencing.reduce((a, b) => a += (' ' + b?.id), ''));
// // referenced.forEach(r => r ? this.print(r, visited) : null);
// // referencing.forEach(r => this.print(r, visited));
// this.printReferenced(module);
// this.printReferencing(module);
// },
// printReferencing(module: Module) {
// console.log('referencing', module.id);
// const referencing = this.allModules.filter(f => f.recommendedModuleIds.includes(module.id));
// referencing.forEach(r => this.printReferencing(r));
// },
// printReferenced(module: Module) {
// console.log('referenced', module.id);
// const referenced = module.recommendedModuleIds.map(m => this.allModules.find(f => f.id === m));
// referenced.forEach(r => r ? this.printReferencing(r) : null);
// },
},
}
});
</script>

0 comments on commit 0d0e730

Please sign in to comment.