0
# Web Interface and Views
1

2
Panoramix provides a Flask-based web interface with admin views for data source management, visualization endpoints, and user interaction. The interface is built using Flask-AppBuilder for consistent admin functionality.
3

4
## Capabilities
5

6
### Main Application View
7

8
The core Panoramix view class handles visualization requests and data exploration endpoints.
9

10
```python { .api }
11
class Panoramix(BaseView):
12
    """
13
    Main visualization controller for the web interface.
14
    
15
    Provides endpoints for table and datasource visualization,
16
    metadata management, and interactive data exploration.
17
    """
18
    
19
    @expose("/table/<table_id>/")
20
    def table(self, table_id):
21
        """
22
        SQL table visualization endpoint.
23
        
24
        Args:
25
            table_id (str): ID of the table to visualize
26
            
27
        Returns:
28
            str: Rendered HTML page with visualization interface
29
        """
30
    
31
    @expose("/datasource/<datasource_name>/")  
32
    def datasource(self, datasource_name):
33
        """
34
        Druid datasource visualization endpoint.
35
        
36
        Args:
37
            datasource_name (str): Name of the datasource to visualize
38
            
39
        Returns:
40
            str: Rendered HTML page with visualization interface
41
        """
42
    
43
    @expose("/refresh_datasources/")
44
    def refresh_datasources(self):
45
        """
46
        Refresh metadata for all Druid datasources.
47
        
48
        Triggers synchronization of datasource metadata
49
        from all configured Druid clusters.
50
        
51
        Returns:
52
            str: Success/failure message
53
        """
54
    
55
    @expose("/autocomplete/<datasource>/<column>/")
56
    def autocomplete(self, datasource, column):
57
        """
58
        Autocomplete endpoint for column values.
59
        
60
        Args:
61
            datasource (str): Datasource name
62
            column (str): Column name for value suggestions
63
            
64
        Returns:
65
            list: JSON list of suggested values
66
        """
67
```
68

69
### Admin Views for Data Sources
70

71
Flask-AppBuilder model views provide CRUD operations for managing data sources through the web interface.
72

73
```python { .api }
74
class DatabaseView(ModelView):
75
    """
76
    Admin view for managing SQL database connections.
77
    
78
    Features:
79
    - Create/edit database connections
80
    - Test connectivity
81
    - Manage connection parameters
82
    - View connection status
83
    """
84
    datamodel = SQLAInterface(Database)
85
    list_columns = ['database_name', 'sqlalchemy_uri', 'created_by', 'created_on']
86
    add_columns = ['database_name', 'sqlalchemy_uri', 'extra', 'cache_timeout']
87
    edit_columns = add_columns
88
    
89
class ClusterModelView(ModelView):
90
    """
91
    Admin view for managing Druid cluster connections.
92
    
93
    Features:
94
    - Configure cluster endpoints
95
    - Test cluster connectivity
96
    - Manage cluster metadata
97
    - Monitor cluster status
98
    """
99
    datamodel = SQLAInterface(Cluster)
100
    list_columns = ['cluster_name', 'coordinator_host', 'broker_host', 'created_on']
101
    add_columns = ['cluster_name', 'coordinator_host', 'coordinator_port', 
102
                   'broker_host', 'broker_port']
103
    edit_columns = add_columns
104

105
class TableView(ModelView):
106
    """
107
    Admin view for managing SQL tables.
108
    
109
    Features:
110
    - Register tables from databases
111
    - Configure table metadata
112
    - Define metrics and columns
113
    - Set access permissions
114
    """
115
    datamodel = SQLAInterface(Table)
116
    list_columns = ['table_link', 'database', 'owner', 'created_on']
117
    add_columns = ['table_name', 'database', 'main_datetime_column', 'description']
118
    edit_columns = add_columns
119

120
class DatasourceModelView(ModelView):
121
    """
122
    Admin view for managing Druid datasources.
123
    
124
    Features:
125
    - Configure datasource metadata  
126
    - Define dimensions and metrics
127
    - Set caching and permissions
128
    - Sync from Druid clusters
129
    """
130
    datamodel = SQLAInterface(Datasource)
131
    list_columns = ['datasource_link', 'cluster', 'owner', 'created_on']
132
    add_columns = ['datasource_name', 'cluster', 'description', 'is_featured']
133
    edit_columns = add_columns
134
```
135

136
### Inline Editing Views
137

138
Inline views provide embedded editing capabilities for related objects.
139

140
```python { .api }
141
class TableColumnInlineView(CompactCRUDMixin, ModelView):
142
    """
143
    Inline view for editing table columns.
144
    
145
    Allows editing column metadata directly within
146
    the table edit interface.
147
    """
148
    datamodel = SQLAInterface(TableColumn)
149
    edit_columns = ['column_name', 'verbose_name', 'type', 'groupby', 'filterable']
150

151
class ColumnInlineView(CompactCRUDMixin, ModelView):
152
    """
153
    Inline view for editing datasource dimensions.
154
    
155
    Allows editing dimension metadata directly within
156
    the datasource edit interface.
157
    """
158
    datamodel = SQLAInterface(Column)
159
    edit_columns = ['column_name', 'verbose_name', 'type', 'groupby', 'filterable']
160

161
class SqlMetricInlineView(CompactCRUDMixin, ModelView):
162
    """Inline view for editing SQL metrics"""
163
    datamodel = SQLAInterface(SqlMetric)
164
    edit_columns = ['metric_name', 'verbose_name', 'expression', 'metric_type']
165

166
class MetricInlineView(CompactCRUDMixin, ModelView):
167
    """Inline view for editing Druid metrics"""
168
    datamodel = SQLAInterface(Metric)
169
    edit_columns = ['metric_name', 'verbose_name', 'metric_type', 'json']
170
```
171

172
### Utility Mixins and Validators
173

174
```python { .api }
175
class DeleteMixin:
176
    """
177
    Mixin providing bulk delete functionality.
178
    
179
    Adds bulk delete operations to model views
180
    with proper permission checking.
181
    """
182
    
183
def validate_json(form, field):
184
    """
185
    Validator for JSON fields in forms.
186
    
187
    Args:
188
        form: WTForms form instance
189
        field: Form field to validate
190
        
191
    Raises:
192
        ValidationError: If field contains invalid JSON
193
    """
194
```
195

196
## Health and Status Endpoints
197

198
```python { .api }
199
@app.route('/health')
200
def health():
201
    """
202
    System health check endpoint.
203
    
204
    Returns:
205
        dict: System status and health information
206
    """
207

208
@app.route('/ping')
209
def ping():
210
    """
211
    Simple ping endpoint for connectivity testing.
212
    
213
    Returns:
214
        str: "OK" response
215
    """
216
```
217

218
## Usage Examples
219

220
### Accessing Visualization Interfaces
221

222
```python
223
# SQL table visualization
224
# GET /panoramix/table/1/
225
# Opens visualization interface for table with ID 1
226

227
# Druid datasource visualization  
228
# GET /panoramix/datasource/events/
229
# Opens visualization interface for 'events' datasource
230
```
231

232
### Using Autocomplete
233

234
```python
235
# Get autocomplete suggestions for a column
236
# GET /panoramix/autocomplete/events/country/
237
# Returns: ["US", "UK", "CA", "DE", "FR", ...]
238

239
# Client-side JavaScript usage
240
fetch('/panoramix/autocomplete/sales/product_category/')
241
    .then(response => response.json())
242
    .then(values => {
243
        // Populate autocomplete dropdown
244
        updateAutocompleteOptions(values);
245
    });
246
```
247

248
### Refreshing Metadata
249

250
```python
251
# Refresh all datasource metadata
252
# GET /panoramix/refresh_datasources/
253
# Triggers cluster.refresh_datasources() for all clusters
254
```
255

256
## Template System
257

258
Panoramix uses Jinja2 templates for rendering the web interface:
259

260
```python { .api }
261
# Base templates
262
'panoramix/base.html'           # Main application layout
263
'index.html'                    # Home page template
264
'panoramix/viz_table.html'      # Table visualization template
265

266
# Form templates
267
'appbuilder/general/model/edit.html'    # Edit forms
268
'appbuilder/general/model/list.html'    # List views
269
```
270

271
## Security and Permissions
272

273
The web interface integrates with Flask-AppBuilder's security system:
274

275
- User authentication and authorization
276
- Role-based access control  
277
- Object-level permissions
278
- CSRF protection
279
- SQL injection prevention
280

281
```python { .api }
282
# Permission strings
283
'datasource_access'     # Access to specific datasources
284
'database_access'       # Access to specific databases
285
'can_edit'             # Edit permissions
286
'can_delete'           # Delete permissions
287
```
288

289
## Static Assets and Resources
290

291
```python { .api }
292
# Static file paths
293
'/static/chaudron_white.png'    # Application icon
294
'/static/css/'                  # Stylesheets
295
'/static/js/'                   # JavaScript files
296
'/static/img/'                  # Images and icons
297
```
298

299
The web interface provides a complete admin experience for managing data sources and an intuitive visualization interface for data exploration and analysis.