Rebase branch (#29)

* added row and column to ZTComponent so that components can be displayed in a grid. * moved components with no id to bottom of layout * components with same row and column id still render * added column width as an attribute * resolved some merge issues * removed saving twice --------- Co-authored-by: Red-Giuliano <[email protected]>
Zero-True · Sep 20, 2023 · 483130a · 483130a
1 parent f48fe37
commit 483130a
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 8 deletions.
diff --git a/zt_backend/models/__init__.py b/zt_backend/models/__init__.py
@@ -2,5 +2,6 @@
 from .response import Response
 from .notebook import Notebook
 from .components.slider import Slider
+from .components.zt_component import ZTComponent
 
-__all__ = ['Request', 'Response', 'Slider', 'Notebook', 'ComponentRequest', 'DeleteRequest', 'CreateRequest']
+__all__ = ['Request', 'Response', 'Slider', 'Notebook', 'ComponentRequest', 'DeleteRequest','ZTComponent','CreateRequest']
diff --git a/zt_backend/models/components/slider.py b/zt_backend/models/components/slider.py
@@ -24,7 +24,7 @@ def validate_color(cls, color):
 
     @validator('value', always=True) #TODO: debug and replace with field validator
     def get_value_from_global_state(cls, value, values):
-        id = values['id']  # Get the id if it exists in the field values
+        id = values['id'] # Get the id if it exists in the field values
         try:
             if id and id in component_values:  # Check if id exists in global_state
                 return component_values[id]  # Return the value associated with id in global_state

diff --git a/zt_backend/models/components/zt_component.py b/zt_backend/models/components/zt_component.py
@@ -1,9 +1,13 @@
 from pydantic import BaseModel, Field, field_validator
 from zt_backend.models.state import created_components, context_globals
+from typing import Optional
 
 class ZTComponent(BaseModel):
     id: str = Field(description="Unique id for a component")
     variable_name: str = Field('fake', description="Optional variable name associated with a component")
+    row: Optional[int] = None 
+    column: Optional[int] = None
+    colWidth: Optional[float] = None
 
     @field_validator('id', mode='before')
     def validate_unique_component_id(cls, id):

diff --git a/zt_backend/router.py b/zt_backend/router.py
@@ -24,9 +24,8 @@ def health():
 
 @router.post("/api/runcode")
 def runcode(request: request.Request):
-    globalStateUpdate(run_request=request)
     response = execute_request(request)
-    globalStateUpdate(run_response=response)
+    globalStateUpdate(run_request=request,run_response=response)
     return response
 
 @router.post("/api/component_run")

diff --git a/zt_frontend/src/components/CodeComponent.vue b/zt_frontend/src/components/CodeComponent.vue
@@ -20,9 +20,11 @@
         <v-btn small color="primary" @click="deleteCell">Delete Cell</v-btn>
     </v-toolbar>
     <!-- Render Components -->
-    <div v-for="component in cellData.components" :key="component.id">
+    <v-row v-for="(row, rowIndex) in sortedRows" :key="'row-' + rowIndex" no-gutters>
+      <v-col v-for="component in row" :key="component.id">
         <component :is="component.component" v-bind="component" v-model="component.value" @end="runCode"></component>
-    </div>
+      </v-col>
+    </v-row>
     <div class="text-p">{{cellData.output}}</div>
 </v-card>
 </template>
@@ -36,7 +38,7 @@ import 'ace-builds/src-noconflict/snippets/python';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/theme-dracula';
 import { VSlider } from 'vuetify/lib/components/index.mjs';
-import { CodeCell } from '@/types/notebook';
+import { CodeCell,ZTComponent } from '@/types/notebook';
 
 
 export default {
@@ -52,6 +54,7 @@ export default {
     },
     methods: {
         runCode(){
+            console.log(this.cellData)
             this.$emit('runCode', this.cellData.id);
         },
         handleValueChange(newValue:any, componentId: string){
@@ -61,7 +64,44 @@ export default {
             this.$emit('deleteCell', this.cellData.id);
         }
     },
-}
+    computed: {
+        sortedRows(): ZTComponent[][] {
+            const rows: Record<number, ZTComponent[][]> = {};
+            const bottomRow: ZTComponent[] = [];  // For components without a row or column
+            
+            for (const component of this.cellData.components) {
+            if (component.row !== null && component.row !== undefined &&
+                component.column !== null && component.column !== undefined) {
+                const row = component.row;
+                if (!rows[row]) rows[row] = [];
+                const column = component.column;
+                
+                // Initialize the column as an array if it doesn't exist
+                if (!rows[row][column]) rows[row][column] = [];
+                
+                // Append the component to the existing column
+                rows[row][column].push(component);
+                
+            } else {
+                // Place components without a row or column at the bottom
+                bottomRow.push(component);
+            }
+            }
+            
+            // Sort by row number and add the bottom row at the end
+            const sortedRowNumbers = Object.keys(rows).sort((a, b) => Number(a) - Number(b));
+            const sortedRows = sortedRowNumbers.map(rowNum => {
+            const row = rows[Number(rowNum)];
+            return row.reduce((acc: ZTComponent[], col: ZTComponent[] = []) => acc.concat(col), []);
+            });
+            
+            sortedRows.push(bottomRow);  // Add the bottom row
+            
+            return sortedRows;
+        }
+        },
+
+  }
 </script>
 
 <style scoped>

diff --git a/zt_frontend/src/types/notebook.d.ts b/zt_frontend/src/types/notebook.d.ts
@@ -16,6 +16,9 @@ export type Id1 = string;
  * Optional variable name associated with a component
  */
 export type VariableName = string;
+export type Row = number | null;
+export type Column = number | null;
+export type Colwidth = number | null;
 export type Components = ZTComponent[];
 export type Celltype = "code" | "markdown" | "text";
 
@@ -37,5 +40,8 @@ export interface CodeCell {
 export interface ZTComponent {
   id: Id1;
   variable_name?: VariableName;
+  row?: Row;
+  column?: Column;
+  colWidth?: Colwidth;
   [k: string]: unknown;
 }
diff --git a/zt_frontend/src/types/response.d.ts b/zt_frontend/src/types/response.d.ts
@@ -14,6 +14,9 @@ export type Id1 = string;
  * Optional variable name associated with a component
  */
 export type VariableName = string;
+export type Row = number | null;
+export type Column = number | null;
+export type Colwidth = number | null;
 export type Components = ZTComponent[];
 export type Output = string;
 export type Cells = CellResponse[];
@@ -31,5 +34,8 @@ export interface CellResponse {
 export interface ZTComponent {
   id: Id1;
   variable_name?: VariableName;
+  row?: Row;
+  column?: Column;
+  colWidth?: Colwidth;
   [k: string]: unknown;
 }
diff --git a/zt_frontend/src/types/slider.d.ts b/zt_frontend/src/types/slider.d.ts
@@ -13,6 +13,9 @@ export type Id = string;
  * Optional variable name associated with a component
  */
 export type VariableName = string;
+export type Row = number | null;
+export type Column = number | null;
+export type Colwidth = number | null;
 /**
  * Vue component name.
  */
@@ -68,6 +71,9 @@ export type Rounded = boolean;
 export interface Slider {
   id: Id;
   variable_name?: VariableName;
+  row?: Row;
+  column?: Column;
+  colWidth?: Colwidth;
   component?: Component;
   value?: Value;
   min?: Min;

diff --git a/zt_schema/notebook.json b/zt_schema/notebook.json
@@ -53,6 +53,42 @@
           "description": "Optional variable name associated with a component",
           "title": "Variable Name",
           "type": "string"
+        },
+        "row": {
+          "anyOf": [
+            {
+              "type": "integer"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Row"
+        },
+        "column": {
+          "anyOf": [
+            {
+              "type": "integer"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Column"
+        },
+        "colWidth": {
+          "anyOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Colwidth"
         }
       },
       "required": [

diff --git a/zt_schema/response.json b/zt_schema/response.json
@@ -38,6 +38,42 @@
           "description": "Optional variable name associated with a component",
           "title": "Variable Name",
           "type": "string"
+        },
+        "row": {
+          "anyOf": [
+            {
+              "type": "integer"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Row"
+        },
+        "column": {
+          "anyOf": [
+            {
+              "type": "integer"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Column"
+        },
+        "colWidth": {
+          "anyOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "null"
+            }
+          ],
+          "default": null,
+          "title": "Colwidth"
         }
       },
       "required": [

diff --git a/zt_schema/slider.json b/zt_schema/slider.json
@@ -12,6 +12,42 @@
       "title": "Variable Name",
       "type": "string"
     },
+    "row": {
+      "anyOf": [
+        {
+          "type": "integer"
+        },
+        {
+          "type": "null"
+        }
+      ],
+      "default": null,
+      "title": "Row"
+    },
+    "column": {
+      "anyOf": [
+        {
+          "type": "integer"
+        },
+        {
+          "type": "null"
+        }
+      ],
+      "default": null,
+      "title": "Column"
+    },
+    "colWidth": {
+      "anyOf": [
+        {
+          "type": "number"
+        },
+        {
+          "type": "null"
+        }
+      ],
+      "default": null,
+      "title": "Colwidth"
+    },
     "component": {
       "default": "v-slider",
       "description": "Vue component name.",