├── .gitignore ├── .vscodeignore ├── .gitattributes ├── icon └── plotly-logo.png ├── dash-plotly-snippets-vs.gif ├── CHANGELOG.md ├── .vscode └── launch.json ├── vsc-extension-quickstart.md ├── package.json ├── snippets ├── dash-bootstrap-components.json ├── dash-core-components.json ├── dash-generics.json └── dash-html-components.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.vsix 3 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set default behavior to automatically normalize line endings. 2 | * text=auto 3 | 4 | -------------------------------------------------------------------------------- /icon/plotly-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monishski/plotly-dash-snippets/HEAD/icon/plotly-logo.png -------------------------------------------------------------------------------- /dash-plotly-snippets-vs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monishski/plotly-dash-snippets/HEAD/dash-plotly-snippets-vs.gif -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "plotly-dash-snippets" extension will be documented in this file. 4 | 5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 6 | 7 | ## [Unreleased] 8 | 9 | - Initial release -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ] 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | * This folder contains all of the files necessary for your extension. 6 | * `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets. 7 | * `snippets/snippets.json` - the file containing all snippets. 8 | 9 | ## Get up and running straight away 10 | 11 | * Press `F5` to open a new window with your extension loaded. 12 | * Create a new file with a file name suffix matching your language. 13 | * Verify that your snippets are proposed on intellisense. 14 | 15 | ## Make changes 16 | 17 | * You can relaunch the extension from the debug toolbar after making changes to the files listed above. 18 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 19 | 20 | ## Install your extension 21 | 22 | * To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code. 23 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension. 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plotly-dash-snippets", 3 | "displayName": "Plotly Dash Snippets", 4 | "description": "Snippets extension plugin for VS for the Plotly Dash microframework", 5 | "version": "0.0.6", 6 | "engines": { 7 | "vscode": "^1.52.0" 8 | }, 9 | "publisher": "PlotlyDashSnippets", 10 | "author": { 11 | "name": "Monish Vassantrai" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/monishski/plotly-dash-snippets" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/monishski/plotly-dash-snippets/issues" 19 | }, 20 | "icon": "icon/plotly-logo.png", 21 | "keywords": [ 22 | "Python", 23 | "Plotly", 24 | "Dash" 25 | ], 26 | "categories": [ 27 | "Snippets" 28 | ], 29 | "contributes": { 30 | "snippets": [ 31 | { 32 | "language": "python", 33 | "path": "./snippets/dash-html-components.json" 34 | }, 35 | { 36 | "language": "python", 37 | "path": "./snippets/dash-core-components.json" 38 | }, 39 | { 40 | "language": "python", 41 | "path": "./snippets/dash-bootstrap-components.json" 42 | }, 43 | { 44 | "language": "python", 45 | "path": "./snippets/dash-generics.json" 46 | } 47 | ] 48 | }, 49 | "homepage": "https://github.com/monishski/plotly-dash-snippets/master/README.md" 50 | } 51 | -------------------------------------------------------------------------------- /snippets/dash-bootstrap-components.json: -------------------------------------------------------------------------------- 1 | { 2 | "Dash Bootstrap Components - Alert": { 3 | "prefix": "dbcalert", 4 | "description": "Create a dbc.Alert element", 5 | "body": [ 6 | "dbc.Alert([$1], color='$2')$0" 7 | ] 8 | }, 9 | "Dash Bootstrap Components - Badge": { 10 | "prefix": "dbcbadge", 11 | "description": "Create a dbc.Badge element", 12 | "body": [ 13 | "dbc.Badge('$1', className='$2', color='$3')$0" 14 | ] 15 | }, 16 | "Dash Bootstrap Components - Button": { 17 | "prefix": "dbcbtn", 18 | "description": "Create a dbc.Button element", 19 | "body": [ 20 | "dbc.Button($1, id='$2', className='$3')$0" 21 | ] 22 | }, 23 | "Dash Bootstrap Components - Col": { 24 | "prefix": "dbccol", 25 | "description": "Create a dbc.Col element", 26 | "body": [ 27 | "dbc.Col([", 28 | "\t$1", 29 | "], lg='12', md='12', sm='12')$0" 30 | ] 31 | }, 32 | "Dash Bootstrap Components - Row": { 33 | "prefix": "dbcrow", 34 | "description": "Create a dbc.Row element", 35 | "body": [ 36 | "dbc.Row(className='$2', [", 37 | "\tdbc.Col([$1], lg='12')", 38 | "])$0" 39 | ] 40 | }, 41 | "Dash Bootstrap Components - Row with 2 cols": { 42 | "prefix": "dbcrows2cols", 43 | "description": "Create a dbc.Row element with 2 dbc.Col elements embedded.", 44 | "body": [ 45 | "dbc.Row(className='$3', [", 46 | "\tdbc.Col([$1], lg='6'),", 47 | "\tdbc.Col([$2], lg='6'),", 48 | "])$0" 49 | ] 50 | }, 51 | "Dash Bootstrap Components - Row with 3 cols": { 52 | "prefix": "dbcrows3cols", 53 | "description": "Create a dbc.Row element with 3 dbc.Col elements embedded.", 54 | "body": [ 55 | "dbc.Row(className='$4', [", 56 | "\tdbc.Col([$1], lg='4'),", 57 | "\tdbc.Col([$2], lg='4'),", 58 | "\tdbc.Col([$3], lg='4'),", 59 | "])$0" 60 | ] 61 | }, 62 | "Dash Bootstrap Components - Row with 4 cols": { 63 | "prefix": "dbcrows4cols", 64 | "description": "Create a dbc.Row element with 4 dbc.Col elements embedded.", 65 | "body": [ 66 | "dbc.Row(className='$5', [", 67 | "\tdbc.Col([$1], lg='3'),", 68 | "\tdbc.Col([$2], lg='3'),", 69 | "\tdbc.Col([$3], lg='3'),", 70 | "\tdbc.Col([$4], lg='3'),", 71 | "])$0" 72 | ] 73 | }, 74 | "Dash Bootstrap Components - Card": { 75 | "prefix": "dbccard", 76 | "description": "Create a dbc.Card element", 77 | "body": [ 78 | "dbc.Card([", 79 | "\tdbc.CardImg(src='$1', top=True),", 80 | "\tdbc.CardBody(className='card-text', [", 81 | "\t\thtml.H4('$2', className='card-title'),", 82 | "\t\thtml.P('$3', className='card-text'),", 83 | "\t]),", 84 | "\tdbc.Button('Go somewhere', color='primary'),", 85 | "], style={'width': '$4'})$0" 86 | ] 87 | }, 88 | "Dash Bootstrap Components - List Group": { 89 | "prefix": "dbccardlistgroup", 90 | "description": "Create a dbc.ListGroup element within dbc.Card", 91 | "body": [ 92 | "dbc.Card([", 93 | "\tdbc.ListGroup([", 94 | "\t\tdbc.ListGroupItem('$1'),", 95 | "\t\tdbc.ListGroupItem('$2'),", 96 | "\t\tdbc.ListGroupItem('$3'),", 97 | "\t]),$4", 98 | "], style={'width': '$4'})$0" 99 | ] 100 | }, 101 | "Dash Bootstrap Components - Card Header": { 102 | "prefix": "dbccardheader", 103 | "description": "Create a dbc.CardHeader element", 104 | "body": [ 105 | "dbc.CardHeader('$1')$0" 106 | ] 107 | }, 108 | "Dash Bootstrap Components - Card Footer": { 109 | "prefix": "dbccardfooter", 110 | "description": "Create a dbc.CardFooter element", 111 | "body": [ 112 | "dbc.CardFooter('$1')$0" 113 | ] 114 | } 115 | } 116 | 117 | -------------------------------------------------------------------------------- /snippets/dash-core-components.json: -------------------------------------------------------------------------------- 1 | { 2 | "Dash Core Component - Checklist": { 3 | "prefix": "dccchecklist", 4 | "description": "Create a dcc.Checklist element", 5 | "body": [ 6 | "dcc.Checklist(id='$1', className='$2',", 7 | "\toptions=[$4],", 8 | "\tvalue='$5'", 9 | ")$0" 10 | ] 11 | }, 12 | "Dash Core Component - Date Picker Range": { 13 | "prefix": "dccdatepickerrange", 14 | "description": "Create a dcc.DatePickerRange element", 15 | "body": [ 16 | "dcc.DatePickerRange(id='$1', className='$2',", 17 | "\tstart_date=$3,", 18 | "\tend_date=$4,", 19 | "\tdisplay_format='$5',", 20 | "\t#min_date_allowed=$6,", 21 | "\t#max_date_allowed=$7", 22 | ")$0" 23 | ] 24 | }, 25 | "Dash Core Component - Date Picker Single": { 26 | "prefix": "dccdatepickersingle", 27 | "description": "Create a dcc.DatePickerSingle element", 28 | "body": [ 29 | "dcc.DatePickerSingle(id='$1', className='$2',", 30 | "\tdate=$3,", 31 | "\tdisplay_format='$4',", 32 | "\t#min_date_allowed=$5,", 33 | "\t#max_date_allowed=$6", 34 | ")$0" 35 | ] 36 | }, 37 | "Dash Core Component - Dropdown": { 38 | "prefix": "dccdropdown", 39 | "description": "Create a dcc.Dropdown element", 40 | "body": [ 41 | "dcc.Dropdown(id='$1', className='$2',", 42 | "\toptions=[$2],", 43 | "\tvalue='$3',", 44 | "\t#placeholder='$4'", 45 | ")$0" 46 | ] 47 | }, 48 | "Dash Core Component - Graph": { 49 | "prefix": "dccgraph", 50 | "description": "Create a dcc.Graph element", 51 | "body": [ 52 | "dcc.Graph(id='$1', className='$2',", 53 | "\tfigure='$3'", 54 | ")$0" 55 | ] 56 | }, 57 | "Dash Core Component - Input": { 58 | "prefix": "dccinput", 59 | "description": "Create a dcc.Input element", 60 | "body": [ 61 | "dcc.Input(id='$1', className='$2',", 62 | "\ttype='$3',", 63 | "\tplaceholder='$4',", 64 | "\tvalue='$5'", 65 | ")$0" 66 | ] 67 | }, 68 | "Dash Core Component - Interval": { 69 | "prefix": "dccinterval", 70 | "description": "Create a dcc.Interval element", 71 | "body": [ 72 | "dcc.Interval(id='$1', interval=$2)$0" 73 | ] 74 | }, 75 | "Dash Core Component - Link": { 76 | "prefix": "dcclink", 77 | "description": "Create a dcc.Link element", 78 | "body": [ 79 | "dcc.Input(id='$1', className='$2',", 80 | "\thref='$3',", 81 | "\tchildren='$4'", 82 | ")$0" 83 | ] 84 | }, 85 | "Dash Core Component - Loading": { 86 | "prefix": "dccloading", 87 | "description": "Create a dcc.Loading element", 88 | "body": [ 89 | "dcc.Loading(className='$1', parent_className=$2, children=[", 90 | "\t$3", 91 | "], color='$4', type='circle')$0" 92 | ] 93 | }, 94 | "Dash Core Component - Location": { 95 | "prefix": "dcclocation", 96 | "description": "Create a dcc.Location element", 97 | "body": [ 98 | "dcc.Location(id='$1', className='$2', refresh=True$3,", 99 | "\thref='$4', pathname='$5')$0" 100 | ] 101 | }, 102 | "Dash Core Component - Markdown": { 103 | "prefix": "dccmarkdown", 104 | "description": "Create a dcc.Markdown element", 105 | "body": [ 106 | "dcc.Markdown(id='$1', className='$2', children='''", 107 | "\t$3", 108 | "''')$0" 109 | ] 110 | }, 111 | "Dash Core Component - Radio Items": { 112 | "prefix": "dccradioitems", 113 | "description": "Create a dcc.RadioItems element", 114 | "body": [ 115 | "dcc.RadioItems(id='$1', className='$2',", 116 | "\toptions=[$4],", 117 | "\tvalue='$5'", 118 | ")$0" 119 | ] 120 | }, 121 | "Dash Core Component - RangeSlider": { 122 | "prefix": "dccrangeslider", 123 | "description": "Create a dcc.RangeSlider element", 124 | "body": [ 125 | "dcc.RangeSlider(id='$1', className='$2',", 126 | "\tmin=$3, max=$4,", 127 | "\tstep=$5,", 128 | "\t#marks={$6}", 129 | "\tcount=$7,", 130 | "\tvalue=[$8, $9]", 131 | ")$0" 132 | ] 133 | }, 134 | "Dash Core Component - Slider": { 135 | "prefix": "dccslider", 136 | "description": "Create a dcc.Slider element", 137 | "body": [ 138 | "dcc.Slider(id='$1', className='$2',", 139 | "\tmin=$3, max=$4,", 140 | "\tstep=$5,", 141 | "\tvalue=$6", 142 | ")$0" 143 | ] 144 | }, 145 | "Dash Core Component - Tab": { 146 | "prefix": "dcctab", 147 | "description": "Create a dcc.Tab element", 148 | "body": [ 149 | "dcc.Tab(id='$1', className='$2',", 150 | "\tlabel='$3', value='$4')$0" 151 | ] 152 | }, 153 | "Dash Core Component - Tabs": { 154 | "prefix": "dcctabs", 155 | "description": "Create a dcc.Tabs element", 156 | "body": [ 157 | "dcc.Tabs(id='$1', className='$2', value='$3', children=[", 158 | "\t$4", 159 | "])$0" 160 | ] 161 | }, 162 | "Dash Core Component - Textarea": { 163 | "prefix": "dcctextarea", 164 | "description": "Create a dcc.Textarea element", 165 | "body": [ 166 | "dcc.Textarea(id='$1', className='$2',", 167 | "\tplaceholder='$4',", 168 | "\tvalue='$5'", 169 | ")$0" 170 | ] 171 | } 172 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plotly Dash Snippets Plugin 2 | 3 | This is a snippets extension plugin for Visual Studio Code for the Plotly Dash microframework. 4 | 5 | [Plotly Dash](https://plotly.com/dash/) is a great Open Source/Enterprise tool for technical business/data analysts to share their data within their organisations. Plotly Dash in Python can be considered as the equivalent of what the React framework is in JavaScript. 6 | 7 | ## Features 8 | 9 | The snippets in this pluggin cover components from the Dash HTML Components, Dash Core Components & some from the Dash Bootstrap Componens Python packages. 10 | 11 | For example, predefined Dash HTML Components start with the prefix `html`, Dash Core Component start with the prefix `dcc` . 12 | 13 | In addition, abstractions such as callbacks live on their own (e.g. for an uncontrolled callback, you would call `dashcb`, while for a controlled stateful callback, you would call `dashcbstate`) 14 | 15 | #### Example 16 | 17 | ![gif](./dash-plotly-snippets-vs.gif) 18 | 19 | 20 | ## To do 21 | 22 | - Create snippets for Dash Bootstrap Components (developed by [faculty.ai](https://faculty.ai)) & Plotly packages. Ideally, Plotly objects should start with `plotly` & Dash Bootstrap Components should start with the prefix `dbc` 23 | 24 | - Create snippets for other abstractions [?] 25 | 26 | ### Dash Generic Snippets: 27 | 28 | - `imdash` - Import Dash 29 | - `iminoutstate` - Import Dash Dependencies 30 | - `imdcc` - Import Dash Core Components 31 | - `imhtml` - Import Dash HTML Components 32 | - `imdbc` - Import Dash Boostrap Components 33 | - `imflask` - Import Flask 34 | - `imflaskcache` - Import Flask Cache 35 | - `dashcb` - Uncontrolled State Callback 36 | - `dashcbstate` - Controlled State Callback 37 | - `dashapp` - Create Dash App Instace 38 | - `dashrunserver` - Run Dash App 39 | - `dashencodeimg` - Image Encoding Function 40 | - `dashhtmltemplate` - Customize Dash's HTML Index Template 41 | - `dashinlinestyle` - Dash Inline Styling 42 | - `flaskserver` - Create Flask Server Instace 43 | - `cacheredis` - Create Flask Cache Redis 44 | - `cachefilesystem` - Create Flask Cache File System 45 | - `memoize` - Create Flask Cache Memoize Function 46 | 47 | ### Dash HTML Component Snippets: 48 | 49 | - `htmla` - HTML Anchor - Tag 50 | - `htmla` - HTML Component - Anchor 51 | - `htmlbr` - HTML Component - Break 52 | - `htmlbtn` - HTML Component - Button 53 | - `htmldiv` - HTML Component - Div 54 | - `htmlfig` - HTML Component - Figure 55 | - `htmlform` - HTML Component - Form 56 | - `htmlframe` - HTML Component - Frame 57 | - `htmlh1` - HTML Component - H1 58 | - `htmlh2` - HTML Component - H2 59 | - `htmlh3` - HTML Component - H3 60 | - `htmlh4` - HTML Component - H4 61 | - `htmlh5` - HTML Component - H5 62 | - `htmlh6` - HTML Component - H6 63 | - `htmlheader` - HTML Component - Header 64 | - `htmlhr` - HTML Component - Hr 65 | - `htmli` - HTML Component - I 66 | - `htmliframe` - HTML Component - Iframe 67 | - `htmlimg` - HTML Component - Img 68 | - `htmllabel` - HTML Component - Label 69 | - `htmlli` - HTML Component - Li 70 | - `htmllink` - HTML Component - Link 71 | - `htmlnav` - HTML Component - Strong 72 | - `htmlspan` - HTML Component - Span 73 | - `htmltable` - HTML Component - Table 74 | - `htmltbody` - HTML Component - Tbody 75 | - `htmltd` - HTML Component - Td 76 | - `htmltextarea` - HTML Component - Textarea 77 | - `htmlth` - HTML Component - Th 78 | - `htmlthead` - HTML Component - Thead 79 | - `htmltr` - HTML Component - Tr 80 | - `htmlul` - HTML Component - Ul 81 | 82 | ### Dash Core Component Snippets: 83 | 84 | - `dccchecklist` - Core Component - Checklist 85 | - `dccdatepickerrange` - Core Component - Date Picker Range 86 | - `dccdatepickersingle` - Core Component - Date Picker Single 87 | - `dccdropdown` - Core Component - Dropdown 88 | - `dccgraph` - Core Component - Graph 89 | - `dccinput` - Core Component - Input 90 | - `dccinterval` - Core Component - Interval 91 | - `dcclink` - Core Component - Link 92 | - `dccloading` - Core Component - Loading 93 | - `dcclocation` - Core Component - Location 94 | - `dccmarkdown` - Core Component - Markdown 95 | - `dccradioitems` - Core Component - Radio Items 96 | - `dccrangeslider` - Core Component - RangeSlider 97 | - `dccslider` - Core Component - Slider 98 | - `dcctab` - Core Component - Tab 99 | - `dcctabs` - Core Component - Tabs 100 | - `dcctextarea` - Core Component - Textarea 101 | 102 | ### Dash Boostrap Component Snippets: 103 | 104 | - `dbcalert` - Bootstrap Components - Alert 105 | - `dbcbadge` - Bootstrap Components - Badge 106 | - `dbcbtn` - Bootstrap Components - Button 107 | - `dbccol` - Bootstrap Components - Col 108 | - `dbcrow` - Bootstrap Components - Row 109 | - `dbcrow2cols` - Bootstrap Components - Row with 2 columns embedded 110 | - `dbcrow3cols` - Bootstrap Components - Row with 3 columns embedded 111 | - `dbcrow4cols` - Bootstrap Components - Row with 4 columns embedded 112 | 113 | ## Known Issues 114 | 115 | Please add known issues here. 116 | 117 | ## Release Notes / Latest Changes 118 | 119 | - Bootstrap Card related components added 120 | - 'children' property was moved up 1 line in most components 121 | - Additional Bootstrap Components Added (dbcrow2cols etc.) 122 | - Further Generic Snippets Added (imports/applications generation) 123 | - Dash HTML Components prefix has been changed from `dashhtml` to `html`, Dash Core Components prefix has been changed from `dashcore` for `dcc` & similarly Dash Bootstrap Components will start with `dbc` 124 | - Dash HTML Component Snippets Added 125 | - Dash Core Component Snippets Added 126 | 127 | -------------------------------------------------------------------------------- /snippets/dash-generics.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import Dash": { 3 | "prefix": "imdash", 4 | "description": "from dash import Dash", 5 | "body": [ 6 | "from dash import Dash", 7 | "$0" 8 | ] 9 | }, 10 | "Import Dash Dependencies": { 11 | "prefix": "iminoutstate", 12 | "description": "from dash.dependencies import Input, Output, State", 13 | "body": [ 14 | "from dash.dependencies import Input, Output, State", 15 | "$0" 16 | ] 17 | }, 18 | "Import Dash Core Components": { 19 | "prefix": "imdcc", 20 | "description": "import dash_core_components as dcc", 21 | "body": [ 22 | "import dash_core_components as dcc", 23 | "$0" 24 | ] 25 | }, 26 | "Import Dash HTML Components": { 27 | "prefix": "imhtml", 28 | "description": "import dash_html_components as html", 29 | "body": [ 30 | "import dash_html_components as html", 31 | "$0" 32 | ] 33 | }, 34 | "Import Dash Boostrap Components": { 35 | "prefix": "imdbc", 36 | "description": "import dash_bootstrap_components as dbc", 37 | "body": [ 38 | "import dash_bootstrap_components as dbc", 39 | "$0" 40 | ] 41 | }, 42 | "Import Flask": { 43 | "prefix": "imflask", 44 | "description": "import flask", 45 | "body": [ 46 | "import flask", 47 | "$0" 48 | ] 49 | }, 50 | "Import Flask Cache": { 51 | "prefix": "imflaskcache", 52 | "description": "from flask_caching import Cache", 53 | "body": [ 54 | "import flask_caching import Cache", 55 | "$0" 56 | ] 57 | }, 58 | "Create Flask Server Instace": { 59 | "prefix": "flaskserver", 60 | "description": "Create Flask Server Instance", 61 | "body": [ 62 | "server = flask.Flask(__name__)", 63 | "$0" 64 | ] 65 | }, 66 | "Create Dash App Instace": { 67 | "prefix": "dashapp", 68 | "description": "Create Dash App Instance", 69 | "body": [ 70 | "app = dash.Dash(__name__,", 71 | "\tserver=server,", 72 | "\texternal_stylesheets=[dbc.themes.BOOTSTRAP, $1],", 73 | "\texternal_scripts=$2)", 74 | "$0" 75 | ] 76 | }, 77 | "Run Dash App": { 78 | "prefix": "dashrunserver", 79 | "description": "Run Dash App", 80 | "body": [ 81 | "if __name__ == '__main__':", 82 | "\tapp.run_server(debug=True, port=$1)" 83 | ] 84 | }, 85 | "Create Flask Cache Redis": { 86 | "prefix": "cacheredis", 87 | "description": "Create Redis Cache Instance", 88 | "body": [ 89 | "cache = Cache(app.server, config={", 90 | "\t'CACHE_TYPE': 'redis'", 91 | "\t'CACHE_REDIS_URL': '$1'", 92 | "})$0" 93 | ] 94 | }, 95 | "Create Flask Cache File System": { 96 | "prefix": "cachefilesystem", 97 | "description": "Create File System Cache Instance", 98 | "body": [ 99 | "cache = Cache(app.server, config={", 100 | "\t'CACHE_TYPE': 'filesystem'", 101 | "\t'CACHE_DIR': 'cache-directory'", 102 | "})$0" 103 | ] 104 | }, 105 | "Create Flask Cache Memoize Function": { 106 | "prefix": "memoize", 107 | "description": "Create Flask Cache Memoize Function", 108 | "body": [ 109 | "@cache.memoize(timeout=$1)", 110 | "def ${fn}($2):", 111 | "\treturn $0" 112 | ] 113 | }, 114 | "Dash - Image Encoding Function": { 115 | "prefix": "dashencodeimg", 116 | "description": "Create a function that encodes img into base64", 117 | "body": [ 118 | "def b64_image(${image_filename})", 119 | "\t'''Encode jpg/png image into base64 img'''", 120 | "\twith open(${image_filename}, 'rb') as file:", 121 | "\t\timage = file.read()", 122 | "\treturn 'data:image/png;base64'+base64.b64encode(image).decode('utf-8')" 123 | ] 124 | }, 125 | "Dash - Customize Dash's HTML Index Template": { 126 | "prefix": "dashhtmltemplate", 127 | "description": "Customize Dash's HTML Index Template", 128 | "body": [ 129 | "app.index_string = '''", 130 | "", 131 | "", 132 | "\t", 133 | "\t\t{%metas%}", 134 | "\t\t{%${title}%}", 135 | "\t\t{%favicon%}", 136 | "\t\t{%css%}", 137 | "\t", 138 | "\t", 139 | "\t\t{%app_entry%}", 140 | "\t\t", 145 | "\t", 146 | "", 147 | "'''" 148 | ] 149 | }, 150 | "Dash - Uncontrolled State Callback": { 151 | "prefix": "dashcb", 152 | "description": "Create uncontrolled state callback function", 153 | "body": [ 154 | "@app.callback(Output('${output_id}', '${output_prop}'), ", 155 | "\t\t\tInput('${input_id}', '${input_prop}'))", 156 | "def ${fn}(${input_prop}):", 157 | "\treturn $0" 158 | ] 159 | }, 160 | "Dash - Controlled State Callback": { 161 | "prefix": "dashcbstate", 162 | "description": "Create controlled state callback function", 163 | "body": [ 164 | "@app.callback(Output('${output_id}', '${output_prop}'), ", 165 | "\t\t\tInput('${input_id}', '${input_prop}'),", 166 | "\t\t\tState('${state_id}', '${state_prop}'))", 167 | "def ${fn}(${input_prop}, ${state_prop}):", 168 | "\treturn $0" 169 | ] 170 | }, 171 | "Dash Inline Styling": { 172 | "prefix": "dashinlinestyle", 173 | "description": "Create a style dictionary", 174 | "body": [ 175 | "style={'$1': '$2'}$0" 176 | ] 177 | } 178 | } -------------------------------------------------------------------------------- /snippets/dash-html-components.json: -------------------------------------------------------------------------------- 1 | { 2 | "Dash HTML Component - Anchor": { 3 | "prefix": "htmla", 4 | "description": "Create a HTML element", 5 | "body": [ 6 | "html.A(id='$1', className='$2', children=[$3]", 7 | "\thref='$4')$0" 8 | ] 9 | }, 10 | "Dash HTML Component - Break": { 11 | "prefix": "htmlbr", 12 | "description": "Create a
HTML element", 13 | "body": [ 14 | "html.Br(id='$1', className='$2', children=[$3])$0" 15 | ] 16 | }, 17 | "Dash HTML Component - Button": { 18 | "prefix": "htmlbtn", 19 | "description": "Create a HTML element", 20 | "body": [ 21 | "html.Button(id='$1', className='$2', children=[", 22 | "\t$3", 23 | "])$0" 24 | ] 25 | }, 26 | "Dash HTML Component - Div": { 27 | "prefix": "htmldiv", 28 | "description": "Create a
HTML element", 29 | "body": [ 30 | "html.Div(id='$1', className='$2', children=[", 31 | "\t$3", 32 | "])$0" 33 | ] 34 | }, 35 | "Dash HTML Component - Figure": { 36 | "prefix": "htmlfig", 37 | "description": "Create a
HTML element", 38 | "body": [ 39 | "html.Figure(id='$1', className='$2', children=[$3])$0" 40 | ] 41 | }, 42 | "Dash HTML Component - Form": { 43 | "prefix": "htmlform", 44 | "description": "Create a
HTML element", 45 | "body": [ 46 | "html.Form(id='$1', className='$2', children=[", 47 | "\t$3", 48 | "], action='$4', encType='$5', method='POST')$0" 49 | ] 50 | }, 51 | "Dash HTML Component - Frame": { 52 | "prefix": "htmlframe", 53 | "description": "Create a HTML element", 54 | "body": [ 55 | "html.Frame(id='$1', className='$2', children=[", 56 | "\t$3", 57 | "])$0" 58 | ] 59 | }, 60 | "Dash HTML Component - H1": { 61 | "prefix": "htmlh1", 62 | "description": "Create a

HTML element", 63 | "body": [ 64 | "html.H1(id='$1', className='$2', children='$3')$0" 65 | ] 66 | }, 67 | "Dash HTML Component - H2": { 68 | "prefix": "htmlh2", 69 | "description": "Create a

HTML element", 70 | "body": [ 71 | "html.H2(id='$1', className='$2', children='$3')$0" 72 | ] 73 | }, 74 | "Dash HTML Component - H3": { 75 | "prefix": "htmlh3", 76 | "description": "Create a

HTML element", 77 | "body": [ 78 | "html.H3(id='$1', className='$2', children='$3')$0" 79 | ] 80 | }, 81 | "Dash HTML Component - H4": { 82 | "prefix": "htmlh4", 83 | "description": "Create a

HTML element", 84 | "body": [ 85 | "html.H4(id='$1', className='$2', children='$3')$0" 86 | ] 87 | }, 88 | "Dash HTML Component - H5": { 89 | "prefix": "htmlh5", 90 | "description": "Create a
HTML element", 91 | "body": [ 92 | "html.H5(id='$1', className='$2', children='$3')$0" 93 | ] 94 | }, 95 | "Dash HTML Component - H6": { 96 | "prefix": "htmlh6", 97 | "description": "Create a
HTML element", 98 | "body": [ 99 | "html.H6(id='$1', className='$2', children=$3')$0" 100 | ] 101 | }, 102 | "Dash HTML Component - Header": { 103 | "prefix": "htmlheader", 104 | "description": "Create a
HTML element", 105 | "body": [ 106 | "html.Header(id='$1', className='$2', children=[$3])$0" 107 | ] 108 | }, 109 | "Dash HTML Component - Hr": { 110 | "prefix": "htmlhr", 111 | "description": "Create a
HTML element", 112 | "body": [ 113 | "html.Hr(id='$1', className='$2', children=[$3])$0" 114 | ] 115 | }, 116 | "Dash HTML Component - I": { 117 | "prefix": "htmli", 118 | "description": "Create a HTML element", 119 | "body": [ 120 | "html.I(id='$1', className='$2', children=[$3])$0" 121 | ] 122 | }, 123 | "Dash HTML Component - Iframe": { 124 | "prefix": "htmliframe", 125 | "description": "Create a HTML element", 126 | "body": [ 127 | "html.Iframe(id='$1', className='$2', children=[", 128 | "\t$3", 129 | "], src='$4')$0" 130 | ] 131 | }, 132 | "Dash HTML Component - Img": { 133 | "prefix": "htmlimg", 134 | "description": "Create a HTML element", 135 | "body": [ 136 | "html.Img(id='$1', className='$2', children=[$3],", 137 | "\tsrc='$4', alt='$5')$0" 138 | ] 139 | }, 140 | "Dash HTML Component - Label": { 141 | "prefix": "htmllabel", 142 | "description": "Create a HTML element", 143 | "body": [ 144 | "html.Label(id='$1', className='$2', children='$3')$0" 145 | ] 146 | }, 147 | "Dash HTML Component - Li": { 148 | "prefix": "htmlli", 149 | "description": "Create a
  • HTML element", 150 | "body": [ 151 | "html.Li(id='$1', className='$2', children=[", 152 | "\t$3", 153 | "])$0" 154 | ] 155 | }, 156 | "Dash HTML Component - Link": { 157 | "prefix": "htmllink", 158 | "description": "Create a HTML element", 159 | "body": [ 160 | "html.Link(id='$1', className='$2', children=[$3],", 161 | "\thref='$4')$0" 162 | ] 163 | }, 164 | "Dash HTML Component - Nav": { 165 | "prefix": "htmlnav", 166 | "description": "Create a HTML element", 167 | "body": [ 168 | "html.Nav(id='$1', className='$2', children=[", 169 | "\t$3", 170 | "])$0" 171 | ] 172 | }, 173 | "Dash HTML Component - Strong": { 174 | "prefix": "htmlstrong", 175 | "description": "Create a HTML element", 176 | "body": [ 177 | "html.Strong(children=[$1], className='$2')$0" 178 | ] 179 | }, 180 | "Dash HTML Component - Span": { 181 | "prefix": "htmlspan", 182 | "description": "Create a HTML element", 183 | "body": [ 184 | "html.Span(id='$1', className='$2', children=[$3])$0" 185 | ] 186 | }, 187 | "Dash HTML Component - Table": { 188 | "prefix": "htmltable", 189 | "description": "Create a
    HTML element", 190 | "body": [ 191 | "html.Table(id='$1', className='$2', children=[", 192 | "\t$3", 193 | "])$0" 194 | ] 195 | }, 196 | "Dash HTML Component - Tbody": { 197 | "prefix": "htmltbody", 198 | "description": "Create a HTML element", 199 | "body": [ 200 | "html.Tbody(id='$1', className='$2', children=[", 201 | "\t$3", 202 | "])$0" 203 | ] 204 | }, 205 | "Dash HTML Component - Td": { 206 | "prefix": "htmltd", 207 | "description": "Create a HTML element", 208 | "body": [ 209 | "html.Td(id='$1', className='$2', children='$3')$0" 210 | ] 211 | }, 212 | "Dash HTML Component - Textarea": { 213 | "prefix": "htmltextarea", 214 | "description": "Create a HTML element", 215 | "body": [ 216 | "html.Textarea(id='$1', className='$2', children=[", 217 | "\t$5", 218 | "], rows=$3, cols=$4)$0" 219 | ] 220 | }, 221 | "Dash HTML Component - Th": { 222 | "prefix": "htmlTh", 223 | "description": "Create a HTML element", 224 | "body": [ 225 | "html.Th(id='$1', className='$2', children='$3')$0" 226 | ] 227 | }, 228 | "Dash HTML Component - Thead": { 229 | "prefix": "htmlthead", 230 | "description": "Create a HTML element", 231 | "body": [ 232 | "html.Thead(id='$1', className='$2', children=[", 233 | "\t$3", 234 | "])$0" 235 | ] 236 | }, 237 | "Dash HTML Component - Tr": { 238 | "prefix": "htmltr", 239 | "description": "Create a HTML element", 240 | "body": [ 241 | "html.Tr(id='$1', className='$2', children='$3')$0" 242 | ] 243 | }, 244 | "Dash HTML Component - Ul": { 245 | "prefix": "htmlul", 246 | "description": "Create a HTML element", 247 | "body": [ 248 | "html.Ul(id='$1', className='$2', children=[", 249 | "\t$3", 250 | "])$0" 251 | ] 252 | } 253 | } 254 | --------------------------------------------------------------------------------