@@ -4,79 +4,81 @@ from .upload import UploadComponent
|
||||
|
||||
|
||||
class SidebarComponent:
|
||||
|
||||
def __init__(self):
|
||||
self.upload_component = UploadComponent()
|
||||
|
||||
|
||||
def create_layout(self):
|
||||
return dbc.Col([
|
||||
html.H5("Upload Data", className="mb-3"),
|
||||
self.upload_component.create_data_upload(),
|
||||
self.upload_component.create_prompts_upload(),
|
||||
self.upload_component.create_reset_button(),
|
||||
|
||||
html.H5("Visualization Controls", className="mb-3"),
|
||||
self._create_method_dropdown(),
|
||||
self._create_color_dropdown(),
|
||||
self._create_dimension_toggle(),
|
||||
self._create_prompts_toggle(),
|
||||
|
||||
html.H5("Point Details", className="mb-3"),
|
||||
html.Div(id='point-details', children="Click on a point to see details")
|
||||
|
||||
], width=3, style={'padding-right': '20px'})
|
||||
|
||||
return dbc.Col(
|
||||
[
|
||||
html.H5("Upload Data", className="mb-3"),
|
||||
self.upload_component.create_data_upload(),
|
||||
self.upload_component.create_prompts_upload(),
|
||||
self.upload_component.create_reset_button(),
|
||||
html.H5("Visualization Controls", className="mb-3"),
|
||||
self._create_method_dropdown(),
|
||||
self._create_color_dropdown(),
|
||||
self._create_dimension_toggle(),
|
||||
self._create_prompts_toggle(),
|
||||
html.H5("Point Details", className="mb-3"),
|
||||
html.Div(
|
||||
id="point-details", children="Click on a point to see details"
|
||||
),
|
||||
],
|
||||
width=3,
|
||||
style={"padding-right": "20px"},
|
||||
)
|
||||
|
||||
def _create_method_dropdown(self):
|
||||
return [
|
||||
dbc.Label("Method:"),
|
||||
dcc.Dropdown(
|
||||
id='method-dropdown',
|
||||
id="method-dropdown",
|
||||
options=[
|
||||
{'label': 'PCA', 'value': 'pca'},
|
||||
{'label': 't-SNE', 'value': 'tsne'},
|
||||
{'label': 'UMAP', 'value': 'umap'}
|
||||
{"label": "PCA", "value": "pca"},
|
||||
{"label": "t-SNE", "value": "tsne"},
|
||||
{"label": "UMAP", "value": "umap"},
|
||||
],
|
||||
value='pca',
|
||||
style={'margin-bottom': '15px'}
|
||||
)
|
||||
value="pca",
|
||||
style={"margin-bottom": "15px"},
|
||||
),
|
||||
]
|
||||
|
||||
|
||||
def _create_color_dropdown(self):
|
||||
return [
|
||||
dbc.Label("Color by:"),
|
||||
dcc.Dropdown(
|
||||
id='color-dropdown',
|
||||
id="color-dropdown",
|
||||
options=[
|
||||
{'label': 'Category', 'value': 'category'},
|
||||
{'label': 'Subcategory', 'value': 'subcategory'},
|
||||
{'label': 'Tags', 'value': 'tags'}
|
||||
{"label": "Category", "value": "category"},
|
||||
{"label": "Subcategory", "value": "subcategory"},
|
||||
{"label": "Tags", "value": "tags"},
|
||||
],
|
||||
value='category',
|
||||
style={'margin-bottom': '15px'}
|
||||
)
|
||||
value="category",
|
||||
style={"margin-bottom": "15px"},
|
||||
),
|
||||
]
|
||||
|
||||
|
||||
def _create_dimension_toggle(self):
|
||||
return [
|
||||
dbc.Label("Dimensions:"),
|
||||
dcc.RadioItems(
|
||||
id='dimension-toggle',
|
||||
id="dimension-toggle",
|
||||
options=[
|
||||
{'label': '2D', 'value': '2d'},
|
||||
{'label': '3D', 'value': '3d'}
|
||||
{"label": "2D", "value": "2d"},
|
||||
{"label": "3D", "value": "3d"},
|
||||
],
|
||||
value='3d',
|
||||
style={'margin-bottom': '20px'}
|
||||
)
|
||||
value="3d",
|
||||
style={"margin-bottom": "20px"},
|
||||
),
|
||||
]
|
||||
|
||||
|
||||
def _create_prompts_toggle(self):
|
||||
return [
|
||||
dbc.Label("Show Prompts:"),
|
||||
dcc.Checklist(
|
||||
id='show-prompts-toggle',
|
||||
options=[{'label': 'Show prompts on plot', 'value': 'show'}],
|
||||
value=['show'],
|
||||
style={'margin-bottom': '20px'}
|
||||
)
|
||||
]
|
||||
id="show-prompts-toggle",
|
||||
options=[{"label": "Show prompts on plot", "value": "show"}],
|
||||
value=["show"],
|
||||
style={"margin-bottom": "20px"},
|
||||
),
|
||||
]
|
||||
|
@@ -3,58 +3,51 @@ import dash_bootstrap_components as dbc
|
||||
|
||||
|
||||
class UploadComponent:
|
||||
|
||||
@staticmethod
|
||||
def create_data_upload():
|
||||
return dcc.Upload(
|
||||
id='upload-data',
|
||||
children=html.Div([
|
||||
'Drag and Drop or ',
|
||||
html.A('Select Files')
|
||||
]),
|
||||
id="upload-data",
|
||||
children=html.Div(["Drag and Drop or ", html.A("Select Files")]),
|
||||
style={
|
||||
'width': '100%',
|
||||
'height': '60px',
|
||||
'lineHeight': '60px',
|
||||
'borderWidth': '1px',
|
||||
'borderStyle': 'dashed',
|
||||
'borderRadius': '5px',
|
||||
'textAlign': 'center',
|
||||
'margin-bottom': '20px'
|
||||
"width": "100%",
|
||||
"height": "60px",
|
||||
"lineHeight": "60px",
|
||||
"borderWidth": "1px",
|
||||
"borderStyle": "dashed",
|
||||
"borderRadius": "5px",
|
||||
"textAlign": "center",
|
||||
"margin-bottom": "20px",
|
||||
},
|
||||
multiple=False
|
||||
multiple=False,
|
||||
)
|
||||
|
||||
|
||||
@staticmethod
|
||||
def create_prompts_upload():
|
||||
return dcc.Upload(
|
||||
id='upload-prompts',
|
||||
children=html.Div([
|
||||
'Drag and Drop Prompts or ',
|
||||
html.A('Select Files')
|
||||
]),
|
||||
id="upload-prompts",
|
||||
children=html.Div(["Drag and Drop Prompts or ", html.A("Select Files")]),
|
||||
style={
|
||||
'width': '100%',
|
||||
'height': '60px',
|
||||
'lineHeight': '60px',
|
||||
'borderWidth': '1px',
|
||||
'borderStyle': 'dashed',
|
||||
'borderRadius': '5px',
|
||||
'textAlign': 'center',
|
||||
'margin-bottom': '20px',
|
||||
'borderColor': '#28a745'
|
||||
"width": "100%",
|
||||
"height": "60px",
|
||||
"lineHeight": "60px",
|
||||
"borderWidth": "1px",
|
||||
"borderStyle": "dashed",
|
||||
"borderRadius": "5px",
|
||||
"textAlign": "center",
|
||||
"margin-bottom": "20px",
|
||||
"borderColor": "#28a745",
|
||||
},
|
||||
multiple=False
|
||||
multiple=False,
|
||||
)
|
||||
|
||||
|
||||
@staticmethod
|
||||
def create_reset_button():
|
||||
return dbc.Button(
|
||||
"Reset All Data",
|
||||
id='reset-button',
|
||||
color='danger',
|
||||
id="reset-button",
|
||||
color="danger",
|
||||
outline=True,
|
||||
size='sm',
|
||||
className='mb-3',
|
||||
style={'width': '100%'}
|
||||
)
|
||||
size="sm",
|
||||
className="mb-3",
|
||||
style={"width": "100%"},
|
||||
)
|
||||
|
Reference in New Issue
Block a user