GUI is taking shape, scrollbar next

dashBoard.py

@@ -10,7 +10,7 @@ import diagramParser as parse
 guiRoot = Tk()
 
 guiRoot.title("Indicator Analyzer for SSC Risk")
-guiRoot.geometry("1080x1920")
+guiRoot.geometry("1000x300")
 
 
 def openFile():
@@ -20,20 +20,16 @@ def openFile():
     )
     diagram = parse.parseDiagramFile(fileName)    
     
-    
-
     top = Toplevel(guiRoot)
-    top.title("Parsed diagram")
-    top.geometry("500x500")
+    top.title("Result Window")
+    top.geometry("1920x1080")
+                
+    createMetrics(diagram, top)
     
-    lab = Label(top, text="Metrics in the diagrams ranked by number of associated components")
-    lab.config(font= ("Helvetica", 20, "bold"))
-    lab.grid()
     
-    createMetrics(diagram, top)    
-            
-    return diagram
-
+    
+def createResults(diagram: Diagram, top):
+    pass
 def createThreats(diagram: Diagram, top):
     
     rowIndex = 0
@@ -76,9 +72,17 @@ def createThreats(diagram: Diagram, top):
         listofIndicators.grid(row=4, column=10)    
         linkedComponents.grid(row = 4, column = 15)        
         
-def createMetrics(diagram: Diagram, top):
+def createMetrics(diagram: Diagram, topWindow):
     metrics = diagram.metrics.values()
     rowIndex = 0
+    frameWidth = 1600
+    
+    rankedFrame = ttk.Frame(topWindow, padding=10) # Frame for the ranked metrics, should cover 80% of the window and stack vertically
+    rankedFrame.grid(sticky="nsew")
+    
+    
+    topLabel = ttk.Label(rankedFrame, 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 
 
@@ -87,6 +91,7 @@ def createMetrics(diagram: Diagram, top):
         associatedList[metric.ID] = numberOfAssociates 
 
     rankedList = sorted(associatedList.items(), key=lambda x: x[1], reverse=True)
+      
     
     for i in rankedList:
         amountOFComponents = i[1]
@@ -94,26 +99,29 @@ def createMetrics(diagram: Diagram, top):
         metricName = diagram.metrics[metricID].name
         metricValue = diagram.metrics[metricID].value
         metricDate = diagram.metrics[metricID].date
-
-        
         
-        metricFrame = Frame(top) # Frame for each metric, should cover 80% of the window and stack vertically
+        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.grid(padx=10, pady=10, sticky="nsew")        
         rowIndex +=1 # Increment the row index for the next frame
+        ttk.Label(metricFrame, text= f"Metric number: {rowIndex}", style="Head.TLabel").grid(row=0, column=0, sticky="nw")
         
-        l1 = Label(metricFrame, text= f"Metric Name: {metricName} \n Metric value: {metricValue}") # First label = Metric id and description
-        l2 = Label(metricFrame, text = f"Number of associated components: {amountOFComponents}") # Second label = Number of associated components in both diagrams
-        l3 = Label (metricFrame, text = f"Last update: {metricDate}") # Third label = Last update of the metric
-        
-        l1.config(font=("Helvetica", 15, "bold"))
-        l2.config(font=("Helvetica", 15))
-        l3.config(font=("Helvetica", 15))
+        ttk.Label(metricFrame, text= f"Metric Name: {metricName}", style="Test.TLabel").grid(row=1, column=0, sticky="nw") # First label = Metric id and description
         
-        l1.grid(row = 0, column = 0)
-        l2.grid(row=0, column = 10)
-        l3.grid(row=0, column = 15)
+        ttk.Label(metricFrame, text= f"Metric value: {metricValue}", style="Test.TLabel", wraplength=0.3*frameWidth).grid(row=2, column=0, sticky="nw") # First label = Metric id and description
 
-        metricFrame.grid(row=rowIndex) # Grid the frame in the window
+        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,)
+            
 
         
 def findMetrics(diagram, id:int, typeOfObject:str):
@@ -157,12 +165,12 @@ def createDynamic(diagram: Diagram, top):
         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), width=100, height=2)
+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 = 2)
-buttonGetFile.grid(column = 1, row = 5)
+labelWindow.grid(column = 1, row = 1)
+buttonGetFile.grid(column = 1, row = 1)
 
 
 guiRoot.mainloop()

requirements.txt

 pandas==2.2.1
-numpy==1.26.4
-
+numpy==1.26.4
\ No newline at end of file
-
-15: <dynamics.Metric object at 0x11ef92c00>, 
-1: <dynamics.Metric object at 0x11ef93e60>, 
-2: <dynamics.Metric object at 0x11efc0650>, 
-3: <dynamics.Metric object at 0x11efc0860>, 
-10: <dynamics.Metric object at 0x11efc0a70>,
- 11: <dynamics.Metric object at 0x11efc0c80>, 
- 12: <dynamics.Metric object at 0x11efc0e90>, 
- 13: <dynamics.Metric object at 0x11efc10d0>, 
- 4: <dynamics.Metric object at 0x11ef93b90>, 
- 5: <dynamics.Metric object at 0x11efc0e00>, 
- 6: <dynamics.Metric object at 0x11efc0bc0>, 
- 7: <dynamics.Metric object at 0x11efc0a10>, 
- 9: <dynamics.Metric object at 0x11efc0dd0>, 
- 16: <dynamics.Metric object at 0x11efc0440>, 
- 19: <dynamics.Metric object at 0x11efc12e0>, 
- 20: <dynamics.Metric object at 0x11efc1e50>, 
- 8: <dynamics.Metric object at 0x11efecf80>, 
- 17: <dynamics.Metric object at 0x11efed760>,
-  18: <dynamics.Metric object at 0x11efeda90>
\ No newline at end of file