From 0a74c8da80424fa19f851353ebfd7817c0d8611e Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Tue, 29 Oct 2024 07:52:51 +0100
Subject: [PATCH 01/10] wip

---
 backend/core/views.py                         |  21 +
 frontend/src/lib/utils/table.ts               | 772 +++++++++---------
 .../(internal)/assets/graph/+page.server.ts   |  13 +
 .../(internal)/assets/graph/+page.svelte      |  11 +
 4 files changed, 431 insertions(+), 386 deletions(-)
 create mode 100644 frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
 create mode 100644 frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte

diff --git a/backend/core/views.py b/backend/core/views.py
index a632f5399..69f549fd3 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -299,6 +299,27 @@ class AssetViewSet(BaseModelViewSet):
     def type(self, request):
         return Response(dict(Asset.Type.choices))
 
+    @action(detail=False, name="Get assets tree")
+    def tree(self, request):
+        tree = {"name": "Global", "children": []}
+
+        (viewable_objects, _, _) = RoleAssignment.get_accessible_object_ids(
+            folder=Folder.get_root_folder(),
+            user=request.user,
+            object_type=Folder,
+        )
+        folders_list = list()
+        for folder in (
+            Folder.objects.exclude(content_type="GL")
+            .filter(id__in=viewable_objects, parent_folder=Folder.get_root_folder())
+            .distinct()
+        ):
+            entry = {"name": folder.name, "children": get_folder_content(folder)}
+            folders_list.append(entry)
+        tree.update({"children": folders_list})
+
+        return Response(tree)
+
 
 class ReferenceControlViewSet(BaseModelViewSet):
     """
diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
index a0dc14d91..cf62bb5c7 100644
--- a/frontend/src/lib/utils/table.ts
+++ b/frontend/src/lib/utils/table.ts
@@ -10,206 +10,206 @@ import * as m from '$paraglide/messages';
 type JSONObject = { [key: string]: JSONObject } | JSONObject[] | string | number | boolean | null;
 
 interface ListViewFilterConfig {
-	component: ComponentType;
-	filter?: (columnValue: any, value: any) => boolean;
-	getColumn?: (row: Row) => Row[keyof Row];
-	filterProps?: (rows: any[], field: string) => { [key: string]: any };
-	extraProps?: { [key: string]: any };
-	alwaysDisplay?: boolean;
-	alwaysDefined?: boolean;
-	hide?: boolean;
+  component: ComponentType;
+  filter?: (columnValue: any, value: any) => boolean;
+  getColumn?: (row: Row) => Row[keyof Row];
+  filterProps?: (rows: any[], field: string) => { [key: string]: any };
+  extraProps?: { [key: string]: any };
+  alwaysDisplay?: boolean;
+  alwaysDefined?: boolean;
+  hide?: boolean;
 }
 
 interface ListViewFieldsConfig {
-	[key: string]: {
-		head: string[];
-		body: string[];
-		meta?: string[];
-		breadcrumb_link_disabled?: boolean;
-		filters?: {
-			[key: string]: ListViewFilterConfig;
-		};
-	};
+  [key: string]: {
+    head: string[];
+    body: string[];
+    meta?: string[];
+    breadcrumb_link_disabled?: boolean;
+    filters?: {
+      [key: string]: ListViewFilterConfig;
+    };
+  };
 }
 
 const PROJECT_STATUS_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.lc_status,
-	extraProps: {
-		defaultOptionName: 'status'
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => row.meta.lc_status,
+  extraProps: {
+    defaultOptionName: 'status'
+  },
+  alwaysDisplay: true
 };
 
 const DOMAIN_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.folder.str,
-	alwaysDefined: true,
-	extraProps: {
-		defaultOptionName: 'domain'
-	}
+  component: SelectFilter,
+  getColumn: (row) => row.folder.str,
+  alwaysDefined: true,
+  extraProps: {
+    defaultOptionName: 'domain'
+  }
 };
 
 const DOMAIN_FILTER_FROM_META: ListViewFilterConfig = {
-	...DOMAIN_FILTER,
-	getColumn: (row) => row.meta.folder.str
+  ...DOMAIN_FILTER,
+  getColumn: (row) => row.meta.folder.str
 };
 
 const DOMAIN_FILTER_FROM_META_PROJECT: ListViewFilterConfig = {
-	...DOMAIN_FILTER,
-	getColumn: (row) => row.meta.project.folder.str
+  ...DOMAIN_FILTER,
+  getColumn: (row) => row.meta.project.folder.str
 };
 
 const PROJECT_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.project.str,
-	extraProps: {
-		defaultOptionName: 'project' // Make translations
-	}
+  component: SelectFilter,
+  getColumn: (row) => row.project.str,
+  extraProps: {
+    defaultOptionName: 'project' // Make translations
+  }
 };
 
 const PROJECT_FILTER_FROM_META: ListViewFilterConfig = {
-	...PROJECT_FILTER,
-	getColumn: (row) => row.meta.project.str
+  ...PROJECT_FILTER,
+  getColumn: (row) => row.meta.project.str
 };
 
 const STATUS_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.status,
-	extraProps: {
-		defaultOptionName: 'status'
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => row.meta.status,
+  extraProps: {
+    defaultOptionName: 'status'
+  },
+  alwaysDisplay: true
 };
 
 const TREATMENT_FILTER: ListViewFilterConfig = {
-	// I could make a function just make the code less repeatitive and long for nothing
-	component: SelectFilter,
-	getColumn: (row) => row.meta.treatment,
-	extraProps: {
-		defaultOptionName: 'treatment'
-	}
+  // I could make a function just make the code less repeatitive and long for nothing
+  component: SelectFilter,
+  getColumn: (row) => row.meta.treatment,
+  extraProps: {
+    defaultOptionName: 'treatment'
+  }
 };
 
 const STATE_FILTER: ListViewFilterConfig = {
-	// I could make a function just make the code less repeatitive and long for nothing
-	component: SelectFilter,
-	getColumn: (row) => row.meta.state,
-	extraProps: {
-		defaultOptionName: 'state'
-	}
+  // I could make a function just make the code less repeatitive and long for nothing
+  component: SelectFilter,
+  getColumn: (row) => row.meta.state,
+  extraProps: {
+    defaultOptionName: 'state'
+  }
 };
 
 const APPROVER_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => {
-		if (row.first_name && row.last_name) {
-			return `${row.first_name} ${row.last_name}`;
-		}
-		return row.meta.approver.str; // This display the email in the approver filter, is this a problem because of email leak risks ?
-	},
-	extraProps: {
-		defaultOptionName: 'approver'
-	}
+  component: SelectFilter,
+  getColumn: (row) => {
+    if (row.first_name && row.last_name) {
+      return `${row.first_name} ${row.last_name}`;
+    }
+    return row.meta.approver.str; // This display the email in the approver filter, is this a problem because of email leak risks ?
+  },
+  extraProps: {
+    defaultOptionName: 'approver'
+  }
 };
 
 const RISK_ASSESSMENT_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.risk_assessment.name,
-	extraProps: {
-		defaultOptionName: 'riskAssessment'
-	}
+  component: SelectFilter,
+  getColumn: (row) => row.meta.risk_assessment.name,
+  extraProps: {
+    defaultOptionName: 'riskAssessment'
+  }
 };
 
 const PROVIDER_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => {
-		return row.provider;
-	},
-	extraProps: {
-		defaultOptionName: 'provider'
-	}
+  component: SelectFilter,
+  getColumn: (row) => {
+    return row.provider;
+  },
+  extraProps: {
+    defaultOptionName: 'provider'
+  }
 };
 
 const PROVIDER_FILTER_FOR_LIBRARIES: ListViewFilterConfig = {
-	...PROVIDER_FILTER,
-	getColumn: (row) => {
-		return row.meta.provider;
-	},
-	alwaysDisplay: true
+  ...PROVIDER_FILTER,
+  getColumn: (row) => {
+    return row.meta.provider;
+  },
+  alwaysDisplay: true
 };
 
 const THREAT_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => (row.meta.threats.length ? row.meta.threats.map((t) => t.str) : null),
-	extraProps: {
-		defaultOptionName: 'threat'
-	}
+  component: SelectFilter,
+  getColumn: (row) => (row.meta.threats.length ? row.meta.threats.map((t) => t.str) : null),
+  extraProps: {
+    defaultOptionName: 'threat'
+  }
 };
 
 const ASSET_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => (row.meta.assets.length ? row.meta.assets.map((t) => t.str) : null),
-	extraProps: {
-		defaultOptionName: 'asset'
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => (row.meta.assets.length ? row.meta.assets.map((t) => t.str) : null),
+  extraProps: {
+    defaultOptionName: 'asset'
+  },
+  alwaysDisplay: true
 };
 
 const FRAMEWORK_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.framework.ref_id,
-	extraProps: {
-		defaultOptionName: 'framework' // Make translations
-	}
+  component: SelectFilter,
+  getColumn: (row) => row.framework.ref_id,
+  extraProps: {
+    defaultOptionName: 'framework' // Make translations
+  }
 };
 
 const LANGUAGE_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.locales,
-	extraProps: {
-		defaultOptionName: 'language', // Make translations
-		optionLabels: LOCALE_DISPLAY_MAP
-	}
+  component: SelectFilter,
+  getColumn: (row) => row.locales,
+  extraProps: {
+    defaultOptionName: 'language', // Make translations
+    optionLabels: LOCALE_DISPLAY_MAP
+  }
 };
 
 const ASSET_TYPE_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.type,
-	extraProps: {
-		defaultOptionName: 'type' // Make translations
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => row.meta.type,
+  extraProps: {
+    defaultOptionName: 'type' // Make translations
+  },
+  alwaysDisplay: true
 };
 
 const CATEGORY_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.category,
-	extraProps: {
-		defaultOptionName: 'category' // Make translations
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => row.meta.category,
+  extraProps: {
+    defaultOptionName: 'category' // Make translations
+  },
+  alwaysDisplay: true
 };
 
 const CSF_FUNCTION_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => row.meta.csf_function,
-	extraProps: {
-		defaultOptionName: 'csfFunction' // Make translations
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => row.meta.csf_function,
+  extraProps: {
+    defaultOptionName: 'csfFunction' // Make translations
+  },
+  alwaysDisplay: true
 };
 
 const OWNER_FILTER: ListViewFilterConfig = {
-	component: SelectFilter,
-	getColumn: (row) => {
-		const owner = row?.meta?.owner;
-		return owner && owner.length ? owner.map((o) => o.str) : null;
-	},
-	extraProps: {
-		defaultOptionName: 'owner'
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => {
+    const owner = row?.meta?.owner;
+    return owner && owner.length ? owner.map((o) => o.str) : null;
+  },
+  extraProps: {
+    defaultOptionName: 'owner'
+  },
+  alwaysDisplay: true
 };
 /* const HAS_RISK_MATRIX_FILTER: ListViewFilterConfig = {
   component: CheckboxFilter,
@@ -228,259 +228,259 @@ const OWNER_FILTER: ListViewFilterConfig = {
 }; */
 
 const LIBRARY_TYPE_FILTER = {
-	component: SelectFilter,
-	getColumn: (row) => {
-		const overviewKeys = new Set(row.overview.map((overviewRow) => overviewRow.split(':')[0]));
-		const libraryDatatypeSet = new Set([
-			'framework',
-			'risk_matrix',
-			'threats',
-			'requirement_mapping_set',
-			'reference_controls'
-		]);
-		const datatypes = [...libraryDatatypeSet].filter((datatype) => overviewKeys.has(datatype));
-		return datatypes;
-	},
-	extraProps: {
-		defaultOptionName: 'objectType',
-		optionLabels: {
-			reference_controls: 'referenceControls',
-			requirement_mapping_set: 'requirementMappingSet',
-			risk_matrix: 'riskMatrix'
-		}
-	},
-	alwaysDisplay: true
+  component: SelectFilter,
+  getColumn: (row) => {
+    const overviewKeys = new Set(row.overview.map((overviewRow) => overviewRow.split(':')[0]));
+    const libraryDatatypeSet = new Set([
+      'framework',
+      'risk_matrix',
+      'threats',
+      'requirement_mapping_set',
+      'reference_controls'
+    ]);
+    const datatypes = [...libraryDatatypeSet].filter((datatype) => overviewKeys.has(datatype));
+    return datatypes;
+  },
+  extraProps: {
+    defaultOptionName: 'objectType',
+    optionLabels: {
+      reference_controls: 'referenceControls',
+      requirement_mapping_set: 'requirementMappingSet',
+      risk_matrix: 'riskMatrix'
+    }
+  },
+  alwaysDisplay: true
 };
 
 export const listViewFields: ListViewFieldsConfig = {
-	folders: {
-		head: ['name', 'description', 'parentDomain'],
-		body: ['name', 'description', 'parent_folder']
-	},
-	projects: {
-		head: ['name', 'description', 'domain'],
-		body: ['name', 'description', 'folder'],
-		filters: {
-			folder: DOMAIN_FILTER,
-			lc_status: PROJECT_STATUS_FILTER
-		}
-	},
-	'risk-matrices': {
-		head: ['name', 'description', 'provider', 'domain'],
-		body: ['name', 'description', 'provider', 'folder'],
-		meta: ['id', 'urn'],
-		filters: {
-			folder: DOMAIN_FILTER
-		}
-	},
-	vulnerabilities: {
-		head: ['ref_id', 'name', 'description', 'folder'],
-		body: ['ref_id', 'name', 'description', 'folder']
-	},
-	'risk-assessments': {
-		head: ['name', 'riskMatrix', 'description', 'riskScenarios', 'project'],
-		body: ['str', 'risk_matrix', 'description', 'risk_scenarios_count', 'project'],
-		filters: {
-			folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true },
-			project: PROJECT_FILTER,
-			status: { ...STATUS_FILTER, alwaysDisplay: true }
-		}
-	},
-	threats: {
-		head: ['ref', 'name', 'description', 'provider', 'domain'],
-		body: ['ref_id', 'name', 'description', 'provider', 'folder'],
-		meta: ['id', 'urn'],
-		filters: {
-			folder: DOMAIN_FILTER
-		}
-	},
-	'risk-scenarios': {
-		head: ['name', 'threats', 'riskAssessment', 'appliedControls', 'currentLevel', 'residualLevel'],
-		body: [
-			'name',
-			'threats',
-			'risk_assessment',
-			'applied_controls',
-			'current_level',
-			'residual_level'
-		],
-		filters: {
-			folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true },
-			project: { ...PROJECT_FILTER_FROM_META, alwaysDisplay: true },
-			treatment: { ...TREATMENT_FILTER, alwaysDisplay: true },
-			risk_assessment: RISK_ASSESSMENT_FILTER,
-			threats: THREAT_FILTER,
-			assets: ASSET_FILTER
-		}
-	},
-	'risk-acceptances': {
-		head: ['name', 'description', 'riskScenarios'],
-		body: ['name', 'description', 'risk_scenarios'],
-		filters: {
-			folder: DOMAIN_FILTER_FROM_META,
-			state: STATE_FILTER,
-			approver: APPROVER_FILTER
-		}
-	},
-	'applied-controls': {
-		head: [
-			'name',
-			'description',
-			'category',
-			'csfFunction',
-			'eta',
-			'owner',
-			'domain',
-			'referenceControl'
-		],
-		body: [
-			'name',
-			'description',
-			'category',
-			'csf_function',
-			'eta',
-			'owner',
-			'folder',
-			'reference_control'
-		],
-		filters: {
-			folder: DOMAIN_FILTER,
-			status: STATUS_FILTER,
-			category: CATEGORY_FILTER,
-			csf_function: CSF_FUNCTION_FILTER,
-			owner: OWNER_FILTER
-		}
-	},
-	policies: {
-		head: ['name', 'description', 'csfFunction', 'eta', 'domain', 'referenceControl'],
-		body: ['name', 'description', 'csf_function', 'eta', 'folder', 'reference_control'],
-		filters: {
-			folder: DOMAIN_FILTER
-		}
-	},
-	'reference-controls': {
-		head: ['ref', 'name', 'description', 'category', 'csfFunction', 'provider', 'domain'],
-		body: ['ref_id', 'name', 'description', 'category', 'csf_function', 'provider', 'folder'],
-		meta: ['id', 'urn'],
-		filters: {
-			folder: { ...DOMAIN_FILTER, alwaysDisplay: true },
-			category: CATEGORY_FILTER,
-			provider: PROVIDER_FILTER,
-			csf_function: CSF_FUNCTION_FILTER
-		}
-	},
-	assets: {
-		head: ['name', 'description', 'businessValue', 'domain'],
-		body: ['name', 'description', 'business_value', 'folder'],
-		filters: {
-			folder: DOMAIN_FILTER,
-			type: ASSET_TYPE_FILTER
-		}
-	},
-	users: {
-		head: ['email', 'firstName', 'lastName'],
-		body: ['email', 'first_name', 'last_name']
-	},
-	'user-groups': {
-		head: ['name'],
-		body: ['localization_dict'],
-		meta: ['id', 'builtin']
-	},
-	roles: {
-		head: ['name', 'description'],
-		body: ['name', 'description']
-	},
-	'role-assignments': {
-		head: ['user', 'userGroup', 'role', 'perimeter'],
-		body: ['user', 'user_group', 'role', 'perimeter_folders']
-	},
-	frameworks: {
-		head: ['name', 'description', 'provider', 'complianceAssessments', 'domain'],
-		body: ['name', 'description', 'provider', 'compliance_assessments', 'folder'],
-		meta: ['id', 'urn'],
-		filters: {
-			folder: DOMAIN_FILTER,
-			provider: PROVIDER_FILTER
-		}
-	},
-	'compliance-assessments': {
-		head: ['name', 'framework', 'description', 'project'],
-		body: ['name', 'framework', 'description', 'project'],
-		filters: {
-			folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true }, // alwaysDisplay shoudln't be mandatory here something is wrong
-			project: PROJECT_FILTER,
-			framework: FRAMEWORK_FILTER,
-			status: STATUS_FILTER
-		}
-	},
-	'requirement-assessments': {
-		head: ['name', 'description', 'complianceAssessment'],
-		body: ['name', 'description', 'compliance_assessment'],
-		breadcrumb_link_disabled: true
-	},
-	evidences: {
-		head: ['name', 'file', 'size', 'description'],
-		body: ['name', 'attachment', 'size', 'description'],
-		filters: {
-			folder: { ...DOMAIN_FILTER_FROM_META, alwaysDisplay: true } // This filter should also be displayed even without alwaysDisplay
-		}
-	},
-	requirements: {
-		head: ['ref', 'name', 'description', 'framework'],
-		body: ['ref_id', 'name', 'description', 'framework'],
-		meta: ['id', 'urn']
-	},
-	libraries: {
-		head: ['provider', 'name', 'description', 'language', 'overview'],
-		body: ['provider', 'name', 'description', 'locales', 'overview']
-	},
-	'stored-libraries': {
-		head: ['provider', 'name', 'description', 'language', 'overview'],
-		body: ['provider', 'name', 'description', 'locales', 'overview'],
-		filters: {
-			locales: LANGUAGE_FILTER,
-			provider: PROVIDER_FILTER_FOR_LIBRARIES,
-			objectType: LIBRARY_TYPE_FILTER
-		}
-	},
-	'loaded-libraries': {
-		head: ['provider', 'name', 'description', 'language', 'overview'],
-		body: ['provider', 'name', 'description', 'locales', 'overview'],
-		filters: {
-			locales: LANGUAGE_FILTER,
-			provider: PROVIDER_FILTER_FOR_LIBRARIES,
-			objectType: LIBRARY_TYPE_FILTER
-		}
-	},
-	'sso-settings': {
-		head: ['name', 'provider', 'providerId'],
-		body: ['name', 'provider', 'provider_id']
-	},
-	'requirement-mapping-sets': {
-		head: ['sourceFramework', 'targetFramework'],
-		body: ['source_framework', 'target_framework']
-	},
-	entities: {
-		head: ['name', 'description', 'domain', 'ownedFolders'],
-		body: ['name', 'description', 'folder', 'owned_folders'],
-		filters: {
-			folder: DOMAIN_FILTER
-		}
-	},
-	'entity-assessments': {
-		head: ['name', 'description', 'project', 'entity'],
-		body: ['name', 'description', 'project', 'entity'],
-		filters: {
-			project: PROJECT_FILTER,
-			status: STATUS_FILTER
-		}
-	},
-	solutions: {
-		head: ['name', 'description', 'providerEntity', 'recipientEntity', 'criticality'],
-		body: ['name', 'description', 'provider_entity', 'recipient_entity', 'criticality']
-	},
-	representatives: {
-		head: ['email', 'entity', 'role'],
-		body: ['email', 'entity', 'role']
-	}
+  folders: {
+    head: ['name', 'description', 'parentDomain'],
+    body: ['name', 'description', 'parent_folder']
+  },
+  projects: {
+    head: ['name', 'description', 'domain'],
+    body: ['name', 'description', 'folder'],
+    filters: {
+      folder: DOMAIN_FILTER,
+      lc_status: PROJECT_STATUS_FILTER
+    }
+  },
+  'risk-matrices': {
+    head: ['name', 'description', 'provider', 'domain'],
+    body: ['name', 'description', 'provider', 'folder'],
+    meta: ['id', 'urn'],
+    filters: {
+      folder: DOMAIN_FILTER
+    }
+  },
+  vulnerabilities: {
+    head: ['ref_id', 'name', 'description', 'folder'],
+    body: ['ref_id', 'name', 'description', 'folder']
+  },
+  'risk-assessments': {
+    head: ['name', 'riskMatrix', 'description', 'riskScenarios', 'project'],
+    body: ['str', 'risk_matrix', 'description', 'risk_scenarios_count', 'project'],
+    filters: {
+      folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true },
+      project: PROJECT_FILTER,
+      status: { ...STATUS_FILTER, alwaysDisplay: true }
+    }
+  },
+  threats: {
+    head: ['ref', 'name', 'description', 'provider', 'domain'],
+    body: ['ref_id', 'name', 'description', 'provider', 'folder'],
+    meta: ['id', 'urn'],
+    filters: {
+      folder: DOMAIN_FILTER
+    }
+  },
+  'risk-scenarios': {
+    head: ['name', 'threats', 'riskAssessment', 'appliedControls', 'currentLevel', 'residualLevel'],
+    body: [
+      'name',
+      'threats',
+      'risk_assessment',
+      'applied_controls',
+      'current_level',
+      'residual_level'
+    ],
+    filters: {
+      folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true },
+      project: { ...PROJECT_FILTER_FROM_META, alwaysDisplay: true },
+      treatment: { ...TREATMENT_FILTER, alwaysDisplay: true },
+      risk_assessment: RISK_ASSESSMENT_FILTER,
+      threats: THREAT_FILTER,
+      assets: ASSET_FILTER
+    }
+  },
+  'risk-acceptances': {
+    head: ['name', 'description', 'riskScenarios'],
+    body: ['name', 'description', 'risk_scenarios'],
+    filters: {
+      folder: DOMAIN_FILTER_FROM_META,
+      state: STATE_FILTER,
+      approver: APPROVER_FILTER
+    }
+  },
+  'applied-controls': {
+    head: [
+      'name',
+      'description',
+      'category',
+      'csfFunction',
+      'eta',
+      'owner',
+      'domain',
+      'referenceControl'
+    ],
+    body: [
+      'name',
+      'description',
+      'category',
+      'csf_function',
+      'eta',
+      'owner',
+      'folder',
+      'reference_control'
+    ],
+    filters: {
+      folder: DOMAIN_FILTER,
+      status: STATUS_FILTER,
+      category: CATEGORY_FILTER,
+      csf_function: CSF_FUNCTION_FILTER,
+      owner: OWNER_FILTER
+    }
+  },
+  policies: {
+    head: ['name', 'description', 'csfFunction', 'eta', 'domain', 'referenceControl'],
+    body: ['name', 'description', 'csf_function', 'eta', 'folder', 'reference_control'],
+    filters: {
+      folder: DOMAIN_FILTER
+    }
+  },
+  'reference-controls': {
+    head: ['ref', 'name', 'description', 'category', 'csfFunction', 'provider', 'domain'],
+    body: ['ref_id', 'name', 'description', 'category', 'csf_function', 'provider', 'folder'],
+    meta: ['id', 'urn'],
+    filters: {
+      folder: { ...DOMAIN_FILTER, alwaysDisplay: true },
+      category: CATEGORY_FILTER,
+      provider: PROVIDER_FILTER,
+      csf_function: CSF_FUNCTION_FILTER
+    }
+  },
+  assets: {
+    head: ['name', 'description', 'businessValue', 'domain', 'parents'],
+    body: ['name', 'description', 'business_value', 'folder', 'parent_assets'],
+    filters: {
+      folder: DOMAIN_FILTER,
+      type: ASSET_TYPE_FILTER
+    }
+  },
+  users: {
+    head: ['email', 'firstName', 'lastName'],
+    body: ['email', 'first_name', 'last_name']
+  },
+  'user-groups': {
+    head: ['name'],
+    body: ['localization_dict'],
+    meta: ['id', 'builtin']
+  },
+  roles: {
+    head: ['name', 'description'],
+    body: ['name', 'description']
+  },
+  'role-assignments': {
+    head: ['user', 'userGroup', 'role', 'perimeter'],
+    body: ['user', 'user_group', 'role', 'perimeter_folders']
+  },
+  frameworks: {
+    head: ['name', 'description', 'provider', 'complianceAssessments', 'domain'],
+    body: ['name', 'description', 'provider', 'compliance_assessments', 'folder'],
+    meta: ['id', 'urn'],
+    filters: {
+      folder: DOMAIN_FILTER,
+      provider: PROVIDER_FILTER
+    }
+  },
+  'compliance-assessments': {
+    head: ['name', 'framework', 'description', 'project'],
+    body: ['name', 'framework', 'description', 'project'],
+    filters: {
+      folder: { ...DOMAIN_FILTER_FROM_META_PROJECT, alwaysDisplay: true }, // alwaysDisplay shoudln't be mandatory here something is wrong
+      project: PROJECT_FILTER,
+      framework: FRAMEWORK_FILTER,
+      status: STATUS_FILTER
+    }
+  },
+  'requirement-assessments': {
+    head: ['name', 'description', 'complianceAssessment'],
+    body: ['name', 'description', 'compliance_assessment'],
+    breadcrumb_link_disabled: true
+  },
+  evidences: {
+    head: ['name', 'file', 'size', 'description'],
+    body: ['name', 'attachment', 'size', 'description'],
+    filters: {
+      folder: { ...DOMAIN_FILTER_FROM_META, alwaysDisplay: true } // This filter should also be displayed even without alwaysDisplay
+    }
+  },
+  requirements: {
+    head: ['ref', 'name', 'description', 'framework'],
+    body: ['ref_id', 'name', 'description', 'framework'],
+    meta: ['id', 'urn']
+  },
+  libraries: {
+    head: ['provider', 'name', 'description', 'language', 'overview'],
+    body: ['provider', 'name', 'description', 'locales', 'overview']
+  },
+  'stored-libraries': {
+    head: ['provider', 'name', 'description', 'language', 'overview'],
+    body: ['provider', 'name', 'description', 'locales', 'overview'],
+    filters: {
+      locales: LANGUAGE_FILTER,
+      provider: PROVIDER_FILTER_FOR_LIBRARIES,
+      objectType: LIBRARY_TYPE_FILTER
+    }
+  },
+  'loaded-libraries': {
+    head: ['provider', 'name', 'description', 'language', 'overview'],
+    body: ['provider', 'name', 'description', 'locales', 'overview'],
+    filters: {
+      locales: LANGUAGE_FILTER,
+      provider: PROVIDER_FILTER_FOR_LIBRARIES,
+      objectType: LIBRARY_TYPE_FILTER
+    }
+  },
+  'sso-settings': {
+    head: ['name', 'provider', 'providerId'],
+    body: ['name', 'provider', 'provider_id']
+  },
+  'requirement-mapping-sets': {
+    head: ['sourceFramework', 'targetFramework'],
+    body: ['source_framework', 'target_framework']
+  },
+  entities: {
+    head: ['name', 'description', 'domain', 'ownedFolders'],
+    body: ['name', 'description', 'folder', 'owned_folders'],
+    filters: {
+      folder: DOMAIN_FILTER
+    }
+  },
+  'entity-assessments': {
+    head: ['name', 'description', 'project', 'entity'],
+    body: ['name', 'description', 'project', 'entity'],
+    filters: {
+      project: PROJECT_FILTER,
+      status: STATUS_FILTER
+    }
+  },
+  solutions: {
+    head: ['name', 'description', 'providerEntity', 'recipientEntity', 'criticality'],
+    body: ['name', 'description', 'provider_entity', 'recipient_entity', 'criticality']
+  },
+  representatives: {
+    head: ['email', 'entity', 'role'],
+    body: ['email', 'entity', 'role']
+  }
 };
diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
new file mode 100644
index 000000000..8d697268f
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
@@ -0,0 +1,13 @@
+
+import { BASE_API_URL } from '$lib/utils/constants';
+
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ fetch }) => {
+  const endpoint = `${BASE_API_URL}/assets/tree/`;
+
+  const res = await fetch(endpoint);
+  const data = await res.json();
+
+  return { data };
+}) satisfies PageServerLoad;
diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
new file mode 100644
index 000000000..52b035925
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	import TreeChart from '$lib/components/Chart/TreeChart.svelte';
+</script>
+
+<div class="bg-white p-6 shadow flex overflow-x-auto">
+	<div class="w-full h-screen">
+		<TreeChart title="Assets tree" tree={data.data} name="org_tree" />
+	</div>
+</div>

From 05cc41eb860494f7da06ef8fd4fe6735e9a462b8 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 08:16:39 +0100
Subject: [PATCH 02/10] fixup

---
 frontend/src/lib/utils/table.ts | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
index cf62bb5c7..8f929e4fe 100644
--- a/frontend/src/lib/utils/table.ts
+++ b/frontend/src/lib/utils/table.ts
@@ -50,6 +50,19 @@ const DOMAIN_FILTER: ListViewFilterConfig = {
   }
 };
 
+const LABELS_FILTER: ListViewFilterConfig = {
+  component: SelectFilter,
+  getColumn: (row) => {
+    return row.filtering_labels && row.filtering_labels.length > 0
+      ? row.filtering_labels.map((filtering_label) => filtering_label.str)
+      : [''];
+  },
+  alwaysDefined: true,
+  extraProps: {
+    defaultOptionName: 'filtering_labels'
+  }
+};
+
 const DOMAIN_FILTER_FROM_META: ListViewFilterConfig = {
   ...DOMAIN_FILTER,
   getColumn: (row) => row.meta.folder.str
@@ -265,6 +278,10 @@ export const listViewFields: ListViewFieldsConfig = {
       lc_status: PROJECT_STATUS_FILTER
     }
   },
+  'filtering-labels': {
+    head: ['label'],
+    body: ['label']
+  },
   'risk-matrices': {
     head: ['name', 'description', 'provider', 'domain'],
     body: ['name', 'description', 'provider', 'folder'],
@@ -274,8 +291,12 @@ export const listViewFields: ListViewFieldsConfig = {
     }
   },
   vulnerabilities: {
-    head: ['ref_id', 'name', 'description', 'folder'],
-    body: ['ref_id', 'name', 'description', 'folder']
+    head: ['ref_id', 'name', 'description', 'applied_controls', 'folder', 'labels'],
+    body: ['ref_id', 'name', 'description', 'applied_controls', 'folder', 'filtering_labels'],
+    filters: {
+      folder: DOMAIN_FILTER,
+      filtering_labels: LABELS_FILTER
+    }
   },
   'risk-assessments': {
     head: ['name', 'riskMatrix', 'description', 'riskScenarios', 'project'],
@@ -370,8 +391,8 @@ export const listViewFields: ListViewFieldsConfig = {
     }
   },
   assets: {
-    head: ['name', 'description', 'businessValue', 'domain', 'parents'],
-    body: ['name', 'description', 'business_value', 'folder', 'parent_assets'],
+    head: ['name', 'description', 'businessValue', 'domain'],
+    body: ['name', 'description', 'business_value', 'folder'],
     filters: {
       folder: DOMAIN_FILTER,
       type: ASSET_TYPE_FILTER

From 3b981539ee8e8527df71c0eefc5d94fa97b8ce02 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 08:41:17 +0100
Subject: [PATCH 03/10] split component

---
 .../components/DataViz/GraphExplorer.svelte   | 208 ++++++++++++++++++
 .../mapping/[id=uuid]/+page.svelte            | 208 +-----------------
 2 files changed, 214 insertions(+), 202 deletions(-)
 create mode 100644 frontend/src/lib/components/DataViz/GraphExplorer.svelte

diff --git a/frontend/src/lib/components/DataViz/GraphExplorer.svelte b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
new file mode 100644
index 000000000..1dca41e66
--- /dev/null
+++ b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	import { onMount } from 'svelte';
+	let searchQuery = ''; // Search query for the node name
+	export let width = '';
+	export let height = 'h-full';
+	export let classesContainer = '';
+	export let title = '';
+	export let name = 'graph';
+	const chart_id = `${name}_div`;
+	onMount(async () => {
+		const echarts = await import('echarts');
+		let chart = echarts.init(document.getElementById(chart_id));
+		let currentEmphasisNodeId: number | null = null;
+
+		// specify chart configuration item and data
+		var option = {
+			legend: [
+				{
+					// selectedMode: 'single',
+					data: data.data.categories.map(function (a) {
+						return a.name;
+					})
+				}
+			],
+			tooltip: {
+				label: {
+					position: 'right',
+					show: true
+				}
+			},
+			title: {
+				text: title,
+				subtext: 'Force layout',
+				top: 'top',
+				left: 'right'
+			},
+			series: [
+				{
+					type: 'graph',
+					layout: 'force',
+					symbolSize: 20,
+					animation: false,
+					animationDurationUpdate: 1500,
+					animationEasingUpdate: 'quinticInOut',
+					edgeSymbol: ['circle', 'arrow'],
+					label: {
+						position: 'right',
+						formatter: '{b}',
+						show: false
+					},
+					draggable: true,
+					roam: true,
+					data: data.data.nodes.map(function (node, idx) {
+						node.id = idx;
+						return node;
+					}),
+					emphasis: {
+						focus: 'adjacency',
+						label: {
+							position: 'right',
+							show: true
+						}
+					},
+					selectedMode: 'series',
+					select: {
+						itemStyle: {
+							borderColor: '#666',
+							borderWidth: 2
+						},
+						label: {
+							show: true
+						}
+					},
+					categories: data.data.categories,
+					force: {
+						edgeLength: 50,
+						repulsion: 50,
+						gravity: 0.1,
+						layoutAnimation: true,
+						friction: 0.1,
+						initLayout: 'circular'
+					},
+					labelLayout: {
+						hideOverlap: true
+					},
+					edges: data.data.links,
+					lineStyle: {
+						curveness: 0.2,
+						color: 'source'
+					}
+				}
+			]
+		};
+
+		// use configuration item and data specified to show chart
+		chart.hideLoading();
+		chart.setOption(option);
+
+		// Handle click events
+		chart.on('click', function (params) {
+			if (params.dataType === 'node') {
+				// If clicking the same node, deselect it
+				if (currentEmphasisNodeId === params.data.id) {
+					chart.dispatchAction({
+						type: 'downplay',
+						dataIndex: currentEmphasisNodeId
+					});
+					currentEmphasisNodeId = -1;
+				} else {
+					// Downplay previously selected node
+					if (currentEmphasisNodeId !== -1) {
+						chart.dispatchAction({
+							type: 'downplay',
+							dataIndex: currentEmphasisNodeId
+						});
+					}
+					// Highlight the clicked node and show labels of adjacent nodes
+					chart.dispatchAction({
+						type: 'highlight',
+						dataIndex: params.data.id
+					});
+					currentEmphasisNodeId = params.data.id;
+				}
+			} else {
+				// If clicking outside nodes, remove emphasis
+				if (currentEmphasisNodeId !== -1) {
+					chart.dispatchAction({
+						type: 'downplay',
+						dataIndex: currentEmphasisNodeId
+					});
+					currentEmphasisNodeId = -1;
+				}
+			}
+		}); // Function to search and highlight node
+		const searchNode = (query: string) => {
+			// Find node by name
+			const node = data.data.nodes.find((n) => n.name.toLowerCase() === query.toLowerCase());
+			if (node) {
+				// Downplay previously highlighted node
+				if (currentEmphasisNodeId !== -1) {
+					chart.dispatchAction({
+						type: 'downplay',
+						dataIndex: currentEmphasisNodeId
+					});
+				}
+
+				// Highlight the found node
+				chart.dispatchAction({
+					type: 'highlight',
+					dataIndex: node.id
+				});
+				currentEmphasisNodeId = node.id;
+			} else {
+				alert('Node not found!');
+			}
+		};
+
+		// Attach the search function to make it accessible
+		window.searchNode = searchNode;
+
+		// Handle window resize
+		const handleResize = () => {
+			chart.resize();
+		};
+		window.addEventListener('resize', handleResize);
+
+		// Cleanup on component destruction
+		return () => {
+			window.removeEventListener('resize', handleResize);
+			chart.dispose();
+		};
+	});
+</script>
+
+<div class="relative p-2">
+	<label for="Search" class="sr-only"> Search </label>
+	<input
+		type="text"
+		class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm"
+		bind:value={searchQuery}
+		placeholder="Search a requirement by id ..."
+		on:keydown={(event) => {
+			if (event.key === 'Enter') searchNode(searchQuery);
+		}}
+	/>
+	<span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
+		<button class="text-gray-600 hover:text-gray-700" on:click={() => searchNode(searchQuery)}>
+			<span class="sr-only">Search</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-4"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+				/>
+			</svg></button
+		>
+	</span>
+</div>
+<div id={chart_id} class="{width} {height} {classesContainer} p-8" />
diff --git a/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
index 9789e4df3..b5aab97b3 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
@@ -1,209 +1,13 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	import { onMount } from 'svelte';
-	let searchQuery = ''; // Search query for the node name
-	export let width = '';
-	export let height = 'h-screen';
-	export let classesContainer = '';
-	export let name = 'graph';
-	const chart_id = `${name}_div`;
+	import GraphExplorer from '$lib/components/DataViz/GraphExplorer.svelte';
 	import { pageTitle } from '$lib/utils/stores';
-	onMount(async () => {
-		const echarts = await import('echarts');
-		let chart = echarts.init(document.getElementById(chart_id));
-		let currentEmphasisNodeId: number | null = null;
-		pageTitle.set(data.data.meta.display_name);
-
-		// specify chart configuration item and data
-		var option = {
-			legend: [
-				{
-					// selectedMode: 'single',
-					data: data.data.categories.map(function (a) {
-						return a.name;
-					})
-				}
-			],
-			tooltip: {
-				label: {
-					position: 'right',
-					show: true
-				}
-			},
-			title: {
-				text: 'Mapping explorer',
-				subtext: 'Force layout',
-				top: 'top',
-				left: 'right'
-			},
-			series: [
-				{
-					type: 'graph',
-					layout: 'force',
-					symbolSize: 20,
-					animation: false,
-					animationDurationUpdate: 1500,
-					animationEasingUpdate: 'quinticInOut',
-					edgeSymbol: ['circle', 'arrow'],
-					label: {
-						position: 'right',
-						formatter: '{b}',
-						show: false
-					},
-					draggable: true,
-					roam: true,
-					data: data.data.nodes.map(function (node, idx) {
-						node.id = idx;
-						return node;
-					}),
-					emphasis: {
-						focus: 'adjacency',
-						label: {
-							position: 'right',
-							show: true
-						}
-					},
-					selectedMode: 'series',
-					select: {
-						itemStyle: {
-							borderColor: '#666',
-							borderWidth: 2
-						},
-						label: {
-							show: true
-						}
-					},
-					categories: data.data.categories,
-					force: {
-						edgeLength: 50,
-						repulsion: 50,
-						gravity: 0.1,
-						layoutAnimation: true,
-						friction: 0.1,
-						initLayout: 'circular'
-					},
-					labelLayout: {
-						hideOverlap: true
-					},
-					edges: data.data.links,
-					lineStyle: {
-						curveness: 0.2,
-						color: 'source'
-					}
-				}
-			]
-		};
-
-		// use configuration item and data specified to show chart
-		chart.hideLoading();
-		chart.setOption(option);
-
-		// Handle click events
-		chart.on('click', function (params) {
-			if (params.dataType === 'node') {
-				// If clicking the same node, deselect it
-				if (currentEmphasisNodeId === params.data.id) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-					currentEmphasisNodeId = -1;
-				} else {
-					// Downplay previously selected node
-					if (currentEmphasisNodeId !== -1) {
-						chart.dispatchAction({
-							type: 'downplay',
-							dataIndex: currentEmphasisNodeId
-						});
-					}
-					// Highlight the clicked node and show labels of adjacent nodes
-					chart.dispatchAction({
-						type: 'highlight',
-						dataIndex: params.data.id
-					});
-					currentEmphasisNodeId = params.data.id;
-				}
-			} else {
-				// If clicking outside nodes, remove emphasis
-				if (currentEmphasisNodeId !== -1) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-					currentEmphasisNodeId = -1;
-				}
-			}
-		}); // Function to search and highlight node
-		const searchNode = (query: string) => {
-			// Find node by name
-			const node = data.data.nodes.find((n) => n.name.toLowerCase() === query.toLowerCase());
-			if (node) {
-				// Downplay previously highlighted node
-				if (currentEmphasisNodeId !== -1) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-				}
-
-				// Highlight the found node
-				chart.dispatchAction({
-					type: 'highlight',
-					dataIndex: node.id
-				});
-				currentEmphasisNodeId = node.id;
-			} else {
-				alert('Node not found!');
-			}
-		};
-
-		// Attach the search function to make it accessible
-		window.searchNode = searchNode;
-
-		// Handle window resize
-		const handleResize = () => {
-			chart.resize();
-		};
-		window.addEventListener('resize', handleResize);
-
-		// Cleanup on component destruction
-		return () => {
-			window.removeEventListener('resize', handleResize);
-			chart.dispose();
-		};
-	});
+	pageTitle.set(data.data.meta.display_name);
 </script>
 
-<div class="relative p-2">
-	<label for="Search" class="sr-only"> Search </label>
-	<input
-		type="text"
-		class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm"
-		bind:value={searchQuery}
-		placeholder="Search a requirement by id ..."
-		on:keydown={(event) => {
-			if (event.key === 'Enter') searchNode(searchQuery);
-		}}
-	/>
-	<span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
-		<button class="text-gray-600 hover:text-gray-700" on:click={() => searchNode(searchQuery)}>
-			<span class="sr-only">Search</span>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="size-4"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-				/>
-			</svg></button
-		>
-	</span>
+<div class="bg-white shadow flex overflow-x-auto">
+	<div class="w-full h-screen">
+		<GraphExplorer title="Mapping Explorer" {data} name="org_tree" />
+	</div>
 </div>
-<div id={chart_id} class="{width} {height} {classesContainer} p-8" />

From 53539e059ddcc3d982f4d28541e40752f5845d26 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 09:01:53 +0100
Subject: [PATCH 04/10] Clean up: reusable component

---
 .../components/DataViz/GraphExplorer.svelte   | 312 +++++++++---------
 .../mapping/[id=uuid]/+page.svelte            |   2 +-
 2 files changed, 159 insertions(+), 155 deletions(-)

diff --git a/frontend/src/lib/components/DataViz/GraphExplorer.svelte b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
index 1dca41e66..22d00129b 100644
--- a/frontend/src/lib/components/DataViz/GraphExplorer.svelte
+++ b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
@@ -1,193 +1,197 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	export let data: PageData;
 	import { onMount } from 'svelte';
-	let searchQuery = ''; // Search query for the node name
+	import type * as echarts from 'echarts';
+
+	export let data;
 	export let width = '';
 	export let height = 'h-full';
 	export let classesContainer = '';
 	export let title = '';
 	export let name = 'graph';
+
+	let searchQuery = '';
+	let chart: echarts.ECharts;
+	let currentEmphasisNodeId: number | null = null;
 	const chart_id = `${name}_div`;
-	onMount(async () => {
-		const echarts = await import('echarts');
-		let chart = echarts.init(document.getElementById(chart_id));
-		let currentEmphasisNodeId: number | null = null;
-
-		// specify chart configuration item and data
-		var option = {
-			legend: [
-				{
-					// selectedMode: 'single',
-					data: data.data.categories.map(function (a) {
-						return a.name;
-					})
-				}
-			],
-			tooltip: {
+	let resizeTimeout: ReturnType<typeof setTimeout>;
+
+	const getChartOptions = () => ({
+		legend: [
+			{
+				data: data.categories.map(function (a) {
+					return a.name;
+				})
+			}
+		],
+		tooltip: {
+			label: {
+				position: 'right',
+				show: true
+			}
+		},
+		title: {
+			text: title,
+			subtext: 'Force layout',
+			top: 'top',
+			left: 'right'
+		},
+		series: [
+			{
+				type: 'graph',
+				layout: 'force',
+				symbolSize: 20,
+				animation: false,
+				animationDurationUpdate: 1500,
+				animationEasingUpdate: 'quinticInOut',
+				edgeSymbol: ['circle', 'arrow'],
 				label: {
 					position: 'right',
-					show: true
-				}
-			},
-			title: {
-				text: title,
-				subtext: 'Force layout',
-				top: 'top',
-				left: 'right'
-			},
-			series: [
-				{
-					type: 'graph',
-					layout: 'force',
-					symbolSize: 20,
-					animation: false,
-					animationDurationUpdate: 1500,
-					animationEasingUpdate: 'quinticInOut',
-					edgeSymbol: ['circle', 'arrow'],
+					formatter: '{b}',
+					show: false
+				},
+				draggable: true,
+				roam: true,
+				data: data.nodes.map(function (node, idx) {
+					node.id = idx;
+					return node;
+				}),
+				emphasis: {
+					focus: 'adjacency',
 					label: {
 						position: 'right',
-						formatter: '{b}',
-						show: false
-					},
-					draggable: true,
-					roam: true,
-					data: data.data.nodes.map(function (node, idx) {
-						node.id = idx;
-						return node;
-					}),
-					emphasis: {
-						focus: 'adjacency',
-						label: {
-							position: 'right',
-							show: true
-						}
-					},
-					selectedMode: 'series',
-					select: {
-						itemStyle: {
-							borderColor: '#666',
-							borderWidth: 2
-						},
-						label: {
-							show: true
-						}
-					},
-					categories: data.data.categories,
-					force: {
-						edgeLength: 50,
-						repulsion: 50,
-						gravity: 0.1,
-						layoutAnimation: true,
-						friction: 0.1,
-						initLayout: 'circular'
-					},
-					labelLayout: {
-						hideOverlap: true
+						show: true
+					}
+				},
+				selectedMode: 'series',
+				select: {
+					itemStyle: {
+						borderColor: '#666',
+						borderWidth: 2
 					},
-					edges: data.data.links,
-					lineStyle: {
-						curveness: 0.2,
-						color: 'source'
+					label: {
+						show: true
 					}
+				},
+				categories: data.categories,
+				force: {
+					edgeLength: 50,
+					repulsion: 50,
+					gravity: 0.1,
+					layoutAnimation: true,
+					friction: 0.1,
+					initLayout: 'circular'
+				},
+				labelLayout: {
+					hideOverlap: true
+				},
+				edges: data.links,
+				lineStyle: {
+					curveness: 0.2,
+					color: 'source'
 				}
-			]
-		};
+			}
+		]
+	});
 
-		// use configuration item and data specified to show chart
-		chart.hideLoading();
-		chart.setOption(option);
+	const handleNodeEmphasis = (nodeId: number | null) => {
+		if (!chart) return;
 
-		// Handle click events
-		chart.on('click', function (params) {
-			if (params.dataType === 'node') {
-				// If clicking the same node, deselect it
-				if (currentEmphasisNodeId === params.data.id) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-					currentEmphasisNodeId = -1;
-				} else {
-					// Downplay previously selected node
-					if (currentEmphasisNodeId !== -1) {
-						chart.dispatchAction({
-							type: 'downplay',
-							dataIndex: currentEmphasisNodeId
-						});
-					}
-					// Highlight the clicked node and show labels of adjacent nodes
-					chart.dispatchAction({
-						type: 'highlight',
-						dataIndex: params.data.id
-					});
-					currentEmphasisNodeId = params.data.id;
-				}
-			} else {
-				// If clicking outside nodes, remove emphasis
-				if (currentEmphasisNodeId !== -1) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-					currentEmphasisNodeId = -1;
-				}
-			}
-		}); // Function to search and highlight node
-		const searchNode = (query: string) => {
-			// Find node by name
-			const node = data.data.nodes.find((n) => n.name.toLowerCase() === query.toLowerCase());
-			if (node) {
-				// Downplay previously highlighted node
-				if (currentEmphasisNodeId !== -1) {
-					chart.dispatchAction({
-						type: 'downplay',
-						dataIndex: currentEmphasisNodeId
-					});
-				}
+		if (currentEmphasisNodeId !== null) {
+			chart.dispatchAction({
+				type: 'downplay',
+				dataIndex: currentEmphasisNodeId
+			});
+		}
+
+		if (nodeId !== null && nodeId !== currentEmphasisNodeId) {
+			chart.dispatchAction({
+				type: 'highlight',
+				dataIndex: nodeId
+			});
+		}
+
+		currentEmphasisNodeId = nodeId !== currentEmphasisNodeId ? nodeId : null;
+	};
 
-				// Highlight the found node
-				chart.dispatchAction({
-					type: 'highlight',
-					dataIndex: node.id
-				});
-				currentEmphasisNodeId = node.id;
+	// Search function, maybe we can improve it later for fuzzy search?
+	const searchNode = (query: string) => {
+		if (!query.trim()) return;
+
+		const normalizedQuery = query.toLowerCase().trim();
+		const node = data.nodes.find((n) => n.name.toLowerCase().includes(normalizedQuery));
+
+		if (node && node.id !== undefined) {
+			handleNodeEmphasis(node.id);
+			chart?.dispatchAction({
+				type: 'focusNodeAdjacency',
+				dataIndex: node.id
+			});
+		} else {
+			alert('No matching nodes found');
+		}
+	};
+
+	onMount(async () => {
+		const echarts = await import('echarts');
+		const element = document.getElementById(chart_id);
+
+		if (!element) {
+			console.error(`Element with id ${chart_id} not found`);
+			return;
+		}
+
+		chart = echarts.init(element);
+		const options = getChartOptions();
+		chart.setOption(options);
+
+		chart.on('click', (params) => {
+			if (params.dataType === 'node') {
+				handleNodeEmphasis(params.data.id);
 			} else {
-				alert('Node not found!');
+				handleNodeEmphasis(null);
 			}
-		};
+		});
 
-		// Attach the search function to make it accessible
-		window.searchNode = searchNode;
-
-		// Handle window resize
 		const handleResize = () => {
-			chart.resize();
+			clearTimeout(resizeTimeout);
+			resizeTimeout = setTimeout(() => {
+				chart?.resize();
+			}, 250);
 		};
+
 		window.addEventListener('resize', handleResize);
 
-		// Cleanup on component destruction
 		return () => {
 			window.removeEventListener('resize', handleResize);
-			chart.dispose();
+			clearTimeout(resizeTimeout);
+			chart?.dispose();
 		};
 	});
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			searchNode(searchQuery);
+		}
+	};
 </script>
 
 <div class="relative p-2">
-	<label for="Search" class="sr-only"> Search </label>
+	<label for="graph-search" class="sr-only">Search</label>
 	<input
+		id="graph-search"
 		type="text"
 		class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm"
 		bind:value={searchQuery}
+		on:keydown={handleKeyDown}
 		placeholder="Search a requirement by id ..."
-		on:keydown={(event) => {
-			if (event.key === 'Enter') searchNode(searchQuery);
-		}}
 	/>
 	<span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
-		<button class="text-gray-600 hover:text-gray-700" on:click={() => searchNode(searchQuery)}>
-			<span class="sr-only">Search</span>
+		<button
+			type="button"
+			class="text-gray-600 hover:text-gray-700"
+			on:click={() => searchNode(searchQuery)}
+			aria-label="Search"
+		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -201,8 +205,8 @@
 					stroke-linejoin="round"
 					d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
 				/>
-			</svg></button
-		>
+			</svg>
+		</button>
 	</span>
 </div>
-<div id={chart_id} class="{width} {height} {classesContainer} p-8" />
+<div id={chart_id} class="{width} {height} {classesContainer} p-8" role="presentation" />
diff --git a/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
index b5aab97b3..d84054fdd 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/mapping/[id=uuid]/+page.svelte
@@ -8,6 +8,6 @@
 
 <div class="bg-white shadow flex overflow-x-auto">
 	<div class="w-full h-screen">
-		<GraphExplorer title="Mapping Explorer" {data} name="org_tree" />
+		<GraphExplorer title="Mapping Explorer" data={data.data} />
 	</div>
 </div>

From 0e7358a1c2bbe357dd005bde2f63b2cc1e2cf7a0 Mon Sep 17 00:00:00 2001
From: eric-intuitem <71850047+eric-intuitem@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:09:28 +0100
Subject: [PATCH 05/10] Fix 500 error with CJIS flash mode (#999)

---
 backend/core/models.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/backend/core/models.py b/backend/core/models.py
index e53c7604f..4dbb96886 100644
--- a/backend/core/models.py
+++ b/backend/core/models.py
@@ -2247,7 +2247,11 @@ def get_requirement_assessments(self, include_non_assessable=False):
             requirement
             for requirement in requirements
             if selected_implementation_groups_set
-            & set(requirement.requirement.implementation_groups)
+            & set(
+                requirement.requirement.implementation_groups
+                if requirement.requirement.implementation_groups
+                else []
+            )
         ]
 
         return requirement_assessments_list

From a8a9bcd1b4003c090412837f49c7576270ac9c7f Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 10:30:42 +0100
Subject: [PATCH 06/10] Basis for Assets graph

---
 backend/core/views.py                         | 68 ++++++++++++++-----
 .../components/DataViz/GraphExplorer.svelte   | 10 +--
 .../(internal)/assets/graph/+page.server.ts   |  2 +-
 .../(internal)/assets/graph/+page.svelte      |  8 ++-
 4 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/backend/core/views.py b/backend/core/views.py
index 512283b69..1e69941f4 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -299,26 +299,58 @@ class AssetViewSet(BaseModelViewSet):
     def type(self, request):
         return Response(dict(Asset.Type.choices))
 
-    @action(detail=False, name="Get assets tree")
-    def tree(self, request):
-        tree = {"name": "Global", "children": []}
+    @action(detail=False, name="Get assets graph")
+    def graph(self, request):
+        nodes = []
+        links = []
+        nodes_idx = dict()
+        categories = []
+        N = 0
+        for domain in Folder.objects.all():
+            categories.append({"name": domain.name})
+            nodes_idx[domain.name] = N
+            nodes.append(
+                {
+                    "name": domain.name,
+                    "category": N,
+                    "symbol": "roundRect",
+                    "symbolSize": 30,
+                    "value": "Domain",
+                }
+            )
+            N += 1
+        for asset in Asset.objects.all():
+            symbol = "circle"
+            if asset.type == "PR":
+                symbol = "diamond"
+            nodes.append(
+                {
+                    "name": asset.name,
+                    "symbol": symbol,
+                    "symbolSize": 25,
+                    "category": nodes_idx[asset.folder.name],
+                    "value": "Primary" if asset.type == "PR" else "Support",
+                }
+            )
+            nodes_idx[asset.name] = N
+            links.append(
+                {"source": nodes_idx[asset.folder.name], "target": N, "value": "scope"}
+            )
+            N += 1
+        for asset in Asset.objects.all():
+            for relationship in asset.parent_assets.all():
+                links.append(
+                    {
+                        "source": nodes_idx[relationship.name],
+                        "target": nodes_idx[asset.name],
+                        "value": "parent",
+                    }
+                )
+        meta = {"display_name": f"toto"}
 
-        (viewable_objects, _, _) = RoleAssignment.get_accessible_object_ids(
-            folder=Folder.get_root_folder(),
-            user=request.user,
-            object_type=Folder,
+        return Response(
+            {"nodes": nodes, "links": links, "categories": categories, "meta": meta}
         )
-        folders_list = list()
-        for folder in (
-            Folder.objects.exclude(content_type="GL")
-            .filter(id__in=viewable_objects, parent_folder=Folder.get_root_folder())
-            .distinct()
-        ):
-            entry = {"name": folder.name, "children": get_folder_content(folder)}
-            folders_list.append(entry)
-        tree.update({"children": folders_list})
-
-        return Response(tree)
 
 
 class ReferenceControlViewSet(BaseModelViewSet):
diff --git a/frontend/src/lib/components/DataViz/GraphExplorer.svelte b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
index 22d00129b..a83f7290f 100644
--- a/frontend/src/lib/components/DataViz/GraphExplorer.svelte
+++ b/frontend/src/lib/components/DataViz/GraphExplorer.svelte
@@ -7,6 +7,8 @@
 	export let height = 'h-full';
 	export let classesContainer = '';
 	export let title = '';
+	export let layout = 'force';
+	export let edgeLength = 50;
 	export let name = 'graph';
 
 	let searchQuery = '';
@@ -32,13 +34,13 @@
 		title: {
 			text: title,
 			subtext: 'Force layout',
-			top: 'top',
+			top: '30',
 			left: 'right'
 		},
 		series: [
 			{
 				type: 'graph',
-				layout: 'force',
+				layout: layout,
 				symbolSize: 20,
 				animation: false,
 				animationDurationUpdate: 1500,
@@ -74,7 +76,7 @@
 				},
 				categories: data.categories,
 				force: {
-					edgeLength: 50,
+					edgeLength: edgeLength,
 					repulsion: 50,
 					gravity: 0.1,
 					layoutAnimation: true,
@@ -183,7 +185,7 @@
 		class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm"
 		bind:value={searchQuery}
 		on:keydown={handleKeyDown}
-		placeholder="Search a requirement by id ..."
+		placeholder="Find a node ..."
 	/>
 	<span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
 		<button
diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
index 8d697268f..97b41256d 100644
--- a/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
@@ -4,7 +4,7 @@ import { BASE_API_URL } from '$lib/utils/constants';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
-  const endpoint = `${BASE_API_URL}/assets/tree/`;
+  const endpoint = `${BASE_API_URL}/assets/graph/`;
 
   const res = await fetch(endpoint);
   const data = await res.json();
diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
index 52b035925..f4acf57b2 100644
--- a/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	import TreeChart from '$lib/components/Chart/TreeChart.svelte';
+	import GraphExplorer from '$lib/components/DataViz/GraphExplorer.svelte';
+	import { pageTitle } from '$lib/utils/stores';
+	pageTitle.set('Assets graph');
 </script>
 
-<div class="bg-white p-6 shadow flex overflow-x-auto">
+<div class="bg-white shadow flex overflow-x-auto">
 	<div class="w-full h-screen">
-		<TreeChart title="Assets tree" tree={data.data} name="org_tree" />
+		<GraphExplorer title="Assets Explorer" data={data.data} edgeLength={100} />
 	</div>
 </div>

From 921b7bafc3ee7b3fece17c00323a3291ec915641 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 10:44:52 +0100
Subject: [PATCH 07/10] Add to experimental features

---
 .../routes/(app)/(internal)/assets/graph/+page.svelte  |  2 +-
 .../routes/(app)/(internal)/experimental/+page.svelte  | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
index f4acf57b2..108c1fcd2 100644
--- a/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.svelte
@@ -3,7 +3,7 @@
 	export let data: PageData;
 	import GraphExplorer from '$lib/components/DataViz/GraphExplorer.svelte';
 	import { pageTitle } from '$lib/utils/stores';
-	pageTitle.set('Assets graph');
+	pageTitle.set('Assets Explorer');
 </script>
 
 <div class="bg-white shadow flex overflow-x-auto">
diff --git a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
index fb04b2b55..7964bcdf6 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/+page.svelte
@@ -2,7 +2,7 @@
 	import Article from '$lib/components/DataViz/Article.svelte';
 </script>
 
-<div class="bg-white grid p-8 grid-cols-3 space-x-8">
+<div class="bg-white grid grid-cols-2 p-4 gap-4">
 	<Article
 		title="Controls Graph"
 		desc="Visualize dependencies and the impact of controls"
@@ -19,6 +19,12 @@
 		title="Frameworks mapping"
 		desc="Visualize applied mapping data as a graph"
 		link="experimental/mapping"
-		tags={['schedule', 'controls']}
+		tags={['analysis', 'mapping']}
+	/>
+	<Article
+		title="Assets explorer"
+		desc="Visualize assets and their relationships"
+		link="assets/graph"
+		tags={['analysis', 'assets']}
 	/>
 </div>

From e824d6aa84989f6f5b5fd087af385521298826f8 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 11:11:49 +0100
Subject: [PATCH 08/10] Fix rendering breaking on Article

---
 frontend/src/lib/components/DataViz/Article.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/DataViz/Article.svelte b/frontend/src/lib/components/DataViz/Article.svelte
index b94c556b6..75c742f43 100644
--- a/frontend/src/lib/components/DataViz/Article.svelte
+++ b/frontend/src/lib/components/DataViz/Article.svelte
@@ -8,8 +8,8 @@
 <article
 	class="hover:animate-background rounded-xl bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 p-0.5 shadow-xl transition hover:bg-[length:400%_400%] hover:shadow-sm hover:[animation-duration:_4s]"
 >
-	<div class="rounded-[10px] bg-white p-4 !pt-20 sm:p-6">
-		<time datetime="2022-10-10" class="block text-xs text-gray-500"> {desc} </time>
+	<div class="rounded-[10px] bg-white p-4 !pt-20 sm:p-6 h-full">
+		<div class="block text-xs text-gray-500 min-h-[2.5rem] flex items-end">{desc}</div>
 
 		<a href={link}>
 			<h3 class="mt-0.5 text-lg font-medium text-gray-900">
@@ -28,6 +28,3 @@
 		</div>
 	</div>
 </article>
-
-<style>
-</style>

From 124468e2ffaceb0d1327356629999c728ba7f183 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 11:22:04 +0100
Subject: [PATCH 09/10] Run formatter

---
 frontend/src/lib/utils/table.ts                          | 2 +-
 .../routes/(app)/(internal)/assets/graph/+page.server.ts | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
index 315b5866b..1d43c3290 100644
--- a/frontend/src/lib/utils/table.ts
+++ b/frontend/src/lib/utils/table.ts
@@ -504,4 +504,4 @@ export const listViewFields: ListViewFieldsConfig = {
 		head: ['email', 'entity', 'role'],
 		body: ['email', 'entity', 'role']
 	}
-};
\ No newline at end of file
+};
diff --git a/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
index 97b41256d..8a068f8fe 100644
--- a/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
+++ b/frontend/src/routes/(app)/(internal)/assets/graph/+page.server.ts
@@ -1,13 +1,12 @@
-
 import { BASE_API_URL } from '$lib/utils/constants';
 
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
-  const endpoint = `${BASE_API_URL}/assets/graph/`;
+	const endpoint = `${BASE_API_URL}/assets/graph/`;
 
-  const res = await fetch(endpoint);
-  const data = await res.json();
+	const res = await fetch(endpoint);
+	const data = await res.json();
 
-  return { data };
+	return { data };
 }) satisfies PageServerLoad;

From 75dec665dd6092f99d70fba84fa45479dccc7eb0 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Thu, 31 Oct 2024 12:35:54 +0100
Subject: [PATCH 10/10] fix display name

---
 backend/core/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/core/views.py b/backend/core/views.py
index eac13fec9..845a90bef 100644
--- a/backend/core/views.py
+++ b/backend/core/views.py
@@ -346,7 +346,7 @@ def graph(self, request):
                         "value": "parent",
                     }
                 )
-        meta = {"display_name": f"toto"}
+        meta = {"display_name": f"Assets Explorer"}
 
         return Response(
             {"nodes": nodes, "links": links, "categories": categories, "meta": meta}