admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update package-lock

Browse Source
This commit is contained in:
Emanuele Ferrelli
2025-06-11 10:55:35 +02:00
parent 8d80070def
commit 8c113f40f6
3 changed files with 1076 additions and 3053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3729
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

153
src/components/CiaFlowCodeViewer.vue
View File

@@ -1,139 +1,90 @@
<script setup> <script setup>
import { UserPrefStore } from '@/stores/UserPrefStore.js' import { UserPrefStore } from '@/stores/UserPrefStore.js';
import { Background } from '@vue-flow/background' import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls' import { Controls } from '@vue-flow/controls';
import { VueFlow, useVueFlow } from '@vue-flow/core' import { VueFlow, useVueFlow } from '@vue-flow/core';
import { MiniMap } from '@vue-flow/minimap' import { MiniMap } from '@vue-flow/minimap';
import Dialog from 'primevue/dialog' import Dialog from 'primevue/dialog';
import { defineProps, nextTick, onMounted, ref, toRefs } from 'vue' import { defineProps, nextTick, onMounted, ref, toRefs } from 'vue';
import 'vue3-markdown/dist/style.css' import 'vue3-markdown/dist/vue3-markdown.css';
import ClassNode from './ClassNode.vue' import ClassNode from './ClassNode.vue';
import { useLayout } from './useLayout' import { useLayout } from './useLayout';
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick, fitView } = useVueFlow();
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow() const nodes = ref(null);
const edges = ref(null);
const dark = ref(false);
const selectionNode = ref([{ fullyQualifiedClassName: '', description: '', classname: '' }]);
const { graph, layout, previousDirection } = useLayout();
const nodes = ref(null) const dialogCodeVisible = ref(false);
const edges = ref(null)
const dark = ref(false)
const selectionNode = ref([{fullyQualifiedClassName: '', description: '', classname:''}])
const { graph, layout, previousDirection } = useLayout()
const dialogCodeVisible = ref(false)
const userPrefStore = UserPrefStore(); const userPrefStore = UserPrefStore();
//66f55e4b2894530b1c154f69 //66f55e4b2894530b1c154f69
const props = defineProps({ const props = defineProps({ changes: { type: Object, required: true } });
changes: {
type: Object,
required: true
}
});
const { changes } = toRefs(props); const { changes } = toRefs(props);
onMounted(() => { onMounted(() => {
defineNodes() defineNodes();
}) });
onInit((vueFlowInstance) => { onInit((vueFlowInstance) => {
vueFlowInstance.fitView() vueFlowInstance.fitView();
}) });
onNodeClick(({ event, nodes, node }) => { onNodeClick(({ event, nodes, node }) => {
console.log(node) console.log(node);
if(node.type == 'class-node') { if (node.type == 'class-node') {
selectionNode.value = node.data.data selectionNode.value = node.data.data;
dialogCodeVisible.value = true dialogCodeVisible.value = true;
} }
});
})
function layoutGraph(direction) { function layoutGraph(direction) {
nodes.value = layout(nodes.value, edges.value, direction) nodes.value = layout(nodes.value, edges.value, direction);
nextTick(() => { nextTick(() => {
fitView() fitView();
}) });
} }
function defineNodes() { function defineNodes() {
var tmpNode=[] var tmpNode = [];
var tmpEdges = [] var tmpEdges = [];
var app = { name: userPrefStore.getSelApp.fe_name } var app = { name: userPrefStore.getSelApp.fe_name };
tmpNode.push({ tmpNode.push({ id: app.name, data: { label: app.name }, position: { x: 250, y: 0 }, class: 'light' });
id: app.name,
data: { label: app.name },
position: { x: 250, y: 0 },
class: 'light',
},)
changes.value.forEach((change) => { changes.value.forEach((change) => {
var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0] var label = change.filename.split('\\').slice(-1)[0].split('/').slice(-1)[0];
tmpNode.push({ tmpNode.push({ id: change.filename, data: { label: label }, position: { x: 250, y: 0 }, class: 'light' });
id: change.filename,
data: { label: label },
position: { x: 250, y: 0 },
class: 'light',
})
tmpEdges.push({ tmpEdges.push({ id: app.name + change.filename, source: app.name, target: change.filename });
id: app.name + change.filename,
source: app.name,
target: change.filename,
})
var changes_array = [] var changes_array = [];
changes.value.forEach((int_change) => { changes.value.forEach((int_change) => {
if(int_change.filename == change.filename) { if (int_change.filename == change.filename) {
changes_array.push(int_change) changes_array.push(int_change);
} }
}) });
tmpNode.push({ tmpNode.push({ id: change.classname, data: { label: change.classname.split('.').slice(-1)[0], data: changes_array }, type: 'class-node', position: { x: 250, y: 0 }, dimension: { width: 200, height: 100 } });
id: change.classname, tmpEdges.push({ id: change.filename + change.classname, source: change.filename, target: change.classname });
data: { label: change.classname.split(".").slice(-1)[0] , data: changes_array}, });
type: 'class-node',
position: { x: 250, y: 0 },
dimension: { width: 200, height: 100 },
}) nodes.value = tmpNode;
tmpEdges.push({ edges.value = tmpEdges;
id: change.filename + change.classname,
source: change.filename,
target: change.classname,
})
})
nodes.value = tmpNode
edges.value = tmpEdges
} }
</script> </script>
<template> <template>
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class '+ selectionNode[0].classname" class="change-modal" :style="{ width: '90vw', minHeight:'90vh'}"> <Dialog v-model:visible="dialogCodeVisible" modal :header="'Class ' + selectionNode[0].classname" class="change-modal" :style="{ width: '90vw', minHeight: '90vh' }">
<!--<CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>--> <!--<CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>-->
<CiaMultipleImpactView :changes="selectionNode"></CiaMultipleImpactView> <CiaMultipleImpactView :changes="selectionNode"></CiaMultipleImpactView>
</Dialog> </Dialog>
<div> <div>
<VueFlow <VueFlow :nodes="nodes" :edges="edges" :class="{ dark }" class="basic-flow" :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" @nodes-initialized="layoutGraph('LR')">
:nodes="nodes"
:edges="edges"
:class="{ dark }"
class="basic-flow"
:default-viewport="{ zoom: 1.5 }"
:min-zoom="0.2"
:max-zoom="4"
@nodes-initialized="layoutGraph('LR')"
>
<template #node-class-node="props"> <template #node-class-node="props">
<ClassNode v-bind="props" /> <ClassNode v-bind="props" />
</template> </template>
@@ -142,13 +93,9 @@ function defineNodes() {
<MiniMap /> <MiniMap />
<Controls position="top-left"> <Controls position="top-left"> </Controls>
</Controls>
</VueFlow> </VueFlow>
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
</style>

197
src/components/FileFlowViewer.vue
View File

@@ -1,20 +1,10 @@
<template> <template>
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: '+selectionNode.fullyQualifiedClassName" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}"> <Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: ' + selectionNode.fullyQualifiedClassName" class="change-modal" :style="{ width: '70vw', minHeight: '75vh' }">
<SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" /> <SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" />
</Dialog> </Dialog>
<div> <div>
<VueFlow <VueFlow :nodes="nodes" :edges="edges" class="basic-flow" :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" @nodes-initialized="layoutGraph('LR')">
:nodes="nodes"
:edges="edges"
class=" basic-flow"
:default-viewport="{ zoom: 1.5 }"
:min-zoom="0.2"
:max-zoom="4"
@nodes-initialized="layoutGraph('LR')"
>
<template #node-class-node="props"> <template #node-class-node="props">
<ClassNode v-bind="props" /> <ClassNode v-bind="props" />
</template> </template>
@@ -23,146 +13,105 @@
<MiniMap /> <MiniMap />
<Controls position="top-left"> <Controls position="top-left"> </Controls>
</Controls>
</VueFlow> </VueFlow>
</div> </div>
</template> </template>
<script setup> <script setup>
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { MiniMap } from '@vue-flow/minimap';
import Dialog from 'primevue/dialog';
import { nextTick, onMounted, ref, toRefs, watch } from 'vue';
import ClassNode from './ClassNode.vue';
import { useLayout } from './useLayout';
import axios from 'axios';
import { defineProps } from 'vue';
import 'vue3-markdown/dist/vue3-markdown.css';
import { Background } from '@vue-flow/background' const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick, fitView } = useVueFlow();
import { Controls } from '@vue-flow/controls'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
import Dialog from 'primevue/dialog'
import { nextTick, onMounted, ref, toRefs, watch } from 'vue'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'
import axios from 'axios' const nodes = ref(null);
import { defineProps } from 'vue' const edges = ref(null);
import 'vue3-markdown/dist/style.css' const dark = ref(false);
const selectionNode = ref({ fullyQualifiedClassName: '', description: '' });
const { graph, layout, previousDirection } = useLayout();
const dialogCodeVisible = ref(false);
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow() const props = defineProps({ file: { type: String, required: true }, application: { type: String, required: true } });
const nodes = ref(null)
const edges = ref(null)
const dark = ref(false)
const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
const { graph, layout, previousDirection } = useLayout()
const dialogCodeVisible = ref(false)
const props = defineProps({
file: {
type: String,
required: true
},
application: {
type: String,
required: true
}
});
const { file } = toRefs(props); const { file } = toRefs(props);
const fileDetails = ref(null); const fileDetails = ref(null);
onMounted(() => { onMounted(() => {
//defineNodes() //defineNodes()
}) });
watch(() => props.file, (first, second) => { watch(
loadFileDetails(first) () => props.file,
}); (first, second) => {
loadFileDetails(first);
}
);
onInit((vueFlowInstance) => { onInit((vueFlowInstance) => {
vueFlowInstance.fitView() vueFlowInstance.fitView();
}) });
function loadFileDetails(filename) {
let fileInfo = { filename: filename, applicationName: props.application };
function loadFileDetails(filename){ axios.post('/source-module/getFileSimpleInfo', fileInfo).then((response) => {
fileDetails.value = response.data;
let fileInfo={ defineNodes();
filename: filename, });
applicationName: props.application
}
axios.post("/source-module/getFileSimpleInfo",fileInfo).then(response => {
fileDetails.value =response.data
defineNodes()
})
} }
onNodeClick(({ event, nodes, node }) => { onNodeClick(({ event, nodes, node }) => {
console.log(node) console.log(node);
if(node.type == 'class-node') { if (node.type == 'class-node') {
selectionNode.value = node.data.data selectionNode.value = node.data.data;
dialogCodeVisible.value = true dialogCodeVisible.value = true;
} }
});
})
function layoutGraph(direction) { function layoutGraph(direction) {
nodes.value = layout(nodes.value, edges.value, direction) nodes.value = layout(nodes.value, edges.value, direction);
nextTick(() => { nextTick(() => {
fitView() fitView();
}) });
} }
function defineNodes() { function defineNodes() {
var tmpNode = [];
var tmpEdges = [];
var filename = fileDetails.value.filename.split('\\').slice(-1)[0].split('/').slice(-1)[0];
var tmpNode=[] tmpNode.push({ id: filename, data: { label: filename }, position: { x: 250, y: 0 }, class: 'light' });
var tmpEdges=[]
var filename = fileDetails.value.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
tmpNode.push({
id: filename,
data: { label: filename },
position: { x: 250, y: 0 },
class: 'light',
},)
fileDetails.value.classes.forEach((c) => { fileDetails.value.classes.forEach((c) => {
tmpNode.push({ tmpNode.push({ id: c.name, data: { label: c.name.split('.').slice(-1)[0], data: { fullyQualifiedClassName: c.name } }, position: { x: 250, y: 0 }, class: 'light', type: 'class-node' });
id: c.name, tmpEdges.push({ id: filename + c.name, source: filename, target: c.name });
data: { label:c.name.split(".").slice(-1)[0] , data:{ fullyQualifiedClassName:c.name} }, });
position: { x: 250, y: 0 },
class: 'light',
type: 'class-node'
})
tmpEdges.push({
id: filename + c.name,
source: filename,
target: c.name,
})
})
nodes.value = tmpNode;
nodes.value = tmpNode edges.value = tmpEdges;
edges.value = tmpEdges layoutGraph('LR');
layoutGraph('LR')
} }
</script> </script>
<style> <style>
@import '@vue-flow/core/dist/style.css'; @import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css'; @import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css'; @import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css'; @import '@vue-flow/minimap/dist/style.css';
.basic-flow {
.basic-flow{
height: 90vh; height: 90vh;
width: 100%; width: 100%;
} }
.vue-flow__minimap { .vue-flow__minimap {
@@ -171,45 +120,45 @@ function defineNodes() {
} }
.basic-flow.dark { .basic-flow.dark {
background:#2d3748; background: #2d3748;
color:#fffffb color: #fffffb;
} }
.basic-flow.dark .vue-flow__node { .basic-flow.dark .vue-flow__node {
background:#4a5568; background: #4a5568;
color:#fffffb color: #fffffb;
} }
.basic-flow.dark .vue-flow__node.selected { .basic-flow.dark .vue-flow__node.selected {
background:#333; background: #333;
box-shadow:0 0 0 2px #2563eb box-shadow: 0 0 0 2px #2563eb;
} }
.basic-flow .vue-flow__controls { .basic-flow .vue-flow__controls {
display:flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
justify-content:center justify-content: center;
} }
.basic-flow.dark .vue-flow__controls { .basic-flow.dark .vue-flow__controls {
border:1px solid #FFFFFB border: 1px solid #fffffb;
} }
.basic-flow .vue-flow__controls .vue-flow__controls-button { .basic-flow .vue-flow__controls .vue-flow__controls-button {
border:none; border: none;
border-right:1px solid #eee border-right: 1px solid #eee;
} }
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover { .basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
background:#4d4d4d background: #4d4d4d;
} }
.basic-flow.dark .vue-flow__edge-textbg { .basic-flow.dark .vue-flow__edge-textbg {
fill:#292524 fill: #292524;
} }
.basic-flow.dark .vue-flow__edge-text { .basic-flow.dark .vue-flow__edge-text {
fill:#fffffb fill: #fffffb;
} }
.vue-flow__node-default { .vue-flow__node-default {
@@ -225,7 +174,7 @@ function defineNodes() {
max-width: 250px; max-width: 250px;
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word overflow-wrap: break-word;
} }
.vue-flow__node-class-node { .vue-flow__node-class-node {
@@ -241,6 +190,6 @@ function defineNodes() {
max-width: 250px; max-width: 250px;
min-width: 200px; min-width: 200px;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word overflow-wrap: break-word;
} }
</style> </style>