Fixed scrollbar, will work on CSS and centering

dashBoard.py

@@ -2,17 +2,13 @@ from tkinter import *
 from tkinter import ttk
 from tkinter import filedialog
 import ERFormatConstants as const
+import customtkinter
+
 
 
 from components import Diagram
 import diagramParser as parse
 
-guiRoot = Tk()
-
-guiRoot.title("Indicator Analyzer for SSC Risk")
-guiRoot.geometry("1000x300")
-
-
 def openFile():
     fileName = filedialog.askopenfilename(initialdir= "/",
                                           title= "Select lucidchart diagram file",
@@ -45,8 +41,6 @@ def openFile():
     
     canvas.create_window((0,0), window=canvasFrame, anchor="nw")
     
-def createThreats(diagram: Diagram, top):
-    
     rowIndex = 0
     
     for threat in diagram.threats.values():
@@ -87,18 +81,34 @@ def createThreats(diagram: Diagram, top):
         listofIndicators.grid(row=4, column=10)    
         linkedComponents.grid(row = 4, column = 15)       
                 
-def createMetrics(diagram: Diagram, topWindow):
 
-    metrics = diagram.metrics.values()
-    rowIndex = 0
-    frameWidth = 1980
+def tempTestFunction():
+    windowWidth = 1250
+    windowHeight = 1200
+    
+    diagram = parse.parseDiagramFile("diagrams/DiagramTest3.csv")    
+    
+    top = Toplevel(guiRoot, bg="blue")
+    top.title("Result Window")
+    top.geometry("1250x1200")
+    top.minsize(windowWidth, windowHeight)
+    
+    mainFrame = customtkinter.CTkScrollableFrame(top, width=windowWidth, height=windowHeight)
+    mainFrame.grid()
+    mainFrame.grid_rowconfigure(0, weight=1)
+    
+    canvasFrame = createMetrics(diagram, mainFrame, 1550)
     
-    rankedFrame = ttk.Frame(topWindow, padding=10, width=frameWidth) # Frame for the ranked metrics, should cover 80% of the window and stack vertically
-    rankedFrame.grid(sticky="nsew")
-    rankedFrame.grid_columnconfigure(0, weight=1)
     
+def createMetrics(diagram: Diagram, frame, canvasWidth):
+    s = ttk.Style()
+    s.theme_use('classic')
+    s.configure('RankFrame.TFrame', background='red', relief='raised')
     
-    topLabel = ttk.Label(rankedFrame, text="Ranked metrics", font=("Helvetica", 20, "bold"))
+    metrics = diagram.metrics.values()
+    rowIndex = 0
+    
+    topLabel = ttk.Label(frame, text="Ranked metrics", font=("Helvetica", 20, "bold"))
     topLabel.grid(row=0, column=0, sticky="nw")
     
     associatedList = {} # Needed to keep track of the number of associated components per metric 
@@ -109,7 +119,6 @@ def createMetrics(diagram: Diagram, topWindow):
     
     rankedList = sorted(associatedList.items(), key=lambda x: x[1], reverse=True)
       
-    
     for i in rankedList:
         amountOFComponents = i[1]
         metricID = i[0]
@@ -117,14 +126,13 @@ def createMetrics(diagram: Diagram, topWindow):
         metricValue = diagram.metrics[metricID].value
         metricDate = diagram.metrics[metricID].date
         
-        s = ttk.Style()
-        s.theme_use('classic')
         s.configure('Test.TFrame', background='white', relief='raised')
         s.configure('Head.TLabel', background='white', font=('Helvetica', 20, 'bold'))
         s.configure('Test.TLabel', background='white', font=('Helvetica', 20))
     
-        metricFrame = ttk.Frame(rankedFrame ,style='Test.TFrame', height= 200, width=frameWidth) # Frame for each metric, should cover 80% of the window and stack vertically
+        metricFrame = ttk.Frame(frame ,style='Test.TFrame', height= 200, width=canvasWidth, padding=5) # Frame for each metric, should cover 80% of the window and stack vertically
         metricFrame.grid(padx=10, pady=10, sticky="nsew")
+        metricFrame.grid_rowconfigure(0, weight=1)
         metricFrame.grid_columnconfigure(0, weight=1)
         
         rowIndex +=1 # Increment the row index for the next frame
@@ -132,69 +140,33 @@ def createMetrics(diagram: Diagram, topWindow):
         
         ttk.Label(metricFrame, text= f"Metric Name: {metricName}", style="Test.TLabel").grid(row=1, column=0, sticky="nw") # First label = Metric id and description
         
-        ttk.Label(metricFrame, text= f"Metric value: {metricValue}", style="Test.TLabel", wraplength=0.5*frameWidth).grid(row=2, column=0, sticky="nw") # First label = Metric id and description
+        ttk.Label(metricFrame, text= f"Metric value: {metricValue}", style="Test.TLabel", wraplength=0.5*canvasWidth).grid(row=2, column=0, sticky="nw") # First label = Metric id and description
 
         ttk.Label(metricFrame, text = f"Number of associated components: {amountOFComponents}", style="Test.TLabel").grid(row=1, column=2, sticky="n") # Second label = Number of associated components in both diagrams
         
         ttk.Label (metricFrame, text = f"Last update: {metricDate}", style="Test.TLabel").grid(row=2, column=2, sticky="e") # Third label = Last update of the metric
         
         for child in metricFrame.winfo_children():
-            child.grid_configure(padx=3, pady=3,)
-            child.grid_columnconfigure(0, weight=3)
+            child.grid_configure(padx=3, pady=3) 
             
-    return rankedFrame
+    return frame
 
+guiRoot = Tk()
 
-        
-def findMetrics(diagram, id:int, typeOfObject:str):
-    relevantMetrics = []
-    relatedComponents = []
-    
-    for metric in diagram.metrics.values():           
-        if typeOfObject == "bowtie":            
-            
-            if id in metric.bowtieID:
-                relevantMetrics.append(metric.name)
-                relatedComponents.append(metric.erID)
-                
-        elif typeOfObject == "er":    
-            if id in metric.erID:
-                relevantMetrics.append(metric.name)
-                relatedComponents.append(metric.bowtieID)
-    
-    return relevantMetrics, relatedComponents
-
-def createDynamic(diagram: Diagram, top):
-    
-    for dynamic in diagram.dynamics.values():
-        if dynamic.type == "ER":        # If the dynamic is of type ER 
-            dynamicDescription = dynamic.description
-            entityRelationshipComps = dynamic.associatedERComponents
-            label = f"Architecture dynamic, Description: {dynamicDescription}"
-            
-            textList = []
-            
-            for i in entityRelationshipComps:
-                componentTitle = i[const.textArea1].item()
-                componentDescription = i[const.textArea2].item()
-
-                componentLabel1 = Label(top, text= f"Component: {componentTitle}")
-                componentLabel1.config(font=("Comic Sans MS", 15))
-                componentLabel1.pack()
-                
-            
-            
-        else:                           # If not it is a bowtie dynamic
-            pass
-
-
-
-labelWindow = Label(guiRoot, text="Please select CSV export file containing ER diagram, BowTie diagram and dynamics matrix", font=("Arial", 20))
-
-buttonGetFile = Button(guiRoot, text="Select file", command=openFile, width=20, height=2)
-
-labelWindow.grid(column = 1, row = 1)
-buttonGetFile.grid(column = 1, row = 1)
-
+guiRoot.title("Indicator Analyzer for SSC Risk")
+guiRoot.geometry("600x300")
+label = ttk.Label(guiRoot, text="Welcome to the Indicator Analyzer for SSC Risk", font=("Arial", 20))
+label.grid(column=1, row=3)
+label2 = ttk.Label(guiRoot, text="Please select CSV export file containing", font=("Arial", 15))
+label3 = ttk.Label(guiRoot, text="BowTie risk diagram, Software supply chain architecture diagram and dynamics matrix", font=("Arial", 15))
+label2.grid(column=1, row=4)
+label3.grid(column=1, row=5)
+
+#labelWindow = Label(guiRoot, text="Please select CSV export file containing ER diagram, BowTie diagram and dynamics matrix", font=("Arial", 20))
+#buttonGetFile = Button(guiRoot, text="Select file", command=openFile, width=20, height=2)
+#labelWindow.grid(column = 1, row = 1)
+#buttonGetFile.grid(column = 1, row = 1)
+
+tempTestFunction()
 
 guiRoot.mainloop()

dashboardUtils.py

+from tkinter import * 
+from tkinter import ttk
+from tkinter import filedialog
+import ERFormatConstants as const
+
+
+from components import Diagram
+import diagramParser as parse
+
+
+def findMetrics(diagram, id:int, typeOfObject:str):
+    relevantMetrics = []
+    relatedComponents = []
+    
+    for metric in diagram.metrics.values():           
+        if typeOfObject == "bowtie":            
+            
+            if id in metric.bowtieID:
+                relevantMetrics.append(metric.name)
+                relatedComponents.append(metric.erID)
+                
+        elif typeOfObject == "er":    
+            if id in metric.erID:
+                relevantMetrics.append(metric.name)
+                relatedComponents.append(metric.bowtieID)
+    
+    return relevantMetrics, relatedComponents
+
+def createDynamic(diagram: Diagram, top):
+    
+    for dynamic in diagram.dynamics.values():
+        if dynamic.type == "ER":        # If the dynamic is of type ER 
+            dynamicDescription = dynamic.description
+            entityRelationshipComps = dynamic.associatedERComponents
+            label = f"Architecture dynamic, Description: {dynamicDescription}"
+            
+            textList = []
+            
+            for i in entityRelationshipComps:
+                componentTitle = i[const.textArea1].item()
+                componentDescription = i[const.textArea2].item()
+
+                componentLabel1 = Label(top, text= f"Component: {componentTitle}")
+                componentLabel1.config(font=("Comic Sans MS", 15))
+                componentLabel1.pack()
+                
+        else:                           # If not it is a bowtie dynamic
+            pass