├── .gitignore ├── LICENSE ├── README.md ├── REPLugger LIVE 2018.txt ├── build_mock_environment.sh ├── compile.sh ├── electron_app.js ├── index.html ├── mock_environment.js ├── new_index.html ├── package.json ├── splash_video.txt └── staged_src ├── .babelrc ├── index.html ├── interpreter.js ├── interpreter.py ├── main.js ├── renderer.js ├── style.less └── visualizations.js /.gitignore: -------------------------------------------------------------------------------- 1 | # REPLugger-specific 2 | /mock_environment 3 | /last_run.js 4 | 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | 24 | # nyc test coverage 25 | .nyc_output 26 | 27 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 28 | .grunt 29 | 30 | # Bower dependency directory (https://bower.io/) 31 | bower_components 32 | 33 | # node-waf configuration 34 | .lock-wscript 35 | 36 | # Compiled binary addons (http://nodejs.org/api/addons.html) 37 | build/Release 38 | 39 | # Dependency directories 40 | node_modules/ 41 | jspm_packages/ 42 | 43 | # Typescript v1 declaration files 44 | typings/ 45 | 46 | # Optional npm cache directory 47 | .npm 48 | 49 | # Optional eslint cache 50 | .eslintcache 51 | 52 | # Optional REPL history 53 | .node_repl_history 54 | 55 | # Output of 'npm pack' 56 | *.tgz 57 | 58 | # Yarn Integrity file 59 | .yarn-integrity 60 | 61 | # dotenv environment variables file 62 | .env 63 | 64 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Glen Chiacchieri 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | REPLugger: a pleasant and scalable live code editor prototype 2 | ============================================================= 3 | 4 | REPLugger is a research prototype code editor that integrates the features of a REPL and a debugger directly into the editing experience. **[See the 10 minute demo video here](https://youtu.be/F8p5bj01UWk).** 5 | 6 | You can view [my website](http://glench.com) to see more of my projects. You can also sign up for my [UI Design for the Future of Programming newsletter](https://tinyletter.com/Flowsheets) to be updated about my research and analysis of programming. 7 | 8 | A note: REPLugger is research code meant to demonstrate an idea, not to be well-engineered. You're probably better off trying to invent your own way of making the features possible than to figure out how I did it. 9 | 10 | ## Installing 11 | 12 | `npm install` / `yarn` 13 | 14 | ## Running 15 | 16 | `npm start` / `yarn start` 17 | 18 | I would not recommend trying to run this project since it was made for demo purposes only, not to be a robust editing experience. 19 | -------------------------------------------------------------------------------- /REPLugger LIVE 2018.txt: -------------------------------------------------------------------------------- 1 | REPLugger LIVE 2018 Talk 2 | 3 | 4 | Hi! I'll be presenting REPLugger, a live code editor, but first I want to give just some context for where it came from. 5 | 6 | It's been about 7 years since Bret Victor came out with his amazing programming demos in his presentation Inventing on Principle and his essay Learnable Programming. 7 | 8 | From a programming perspective, I think the main thing Bret did with these demos is show us one of the biggest and most under-appreciated problems with programming — that programmers can't see what their programs are doing. Programmers look at a bunch of text and have to imagine most of what the program does in their heads. And his demos not only pointed out this problem but provided some plausible solutions — showing concrete data in the editing experience. 9 | 10 | 11 | 12 | This sounds like a great research direction to me, but I wanted to see for myself. After working with Bret for several years, I made Flowsheets v2 in 2017. This was a prototype programming environment for creating small data transformation programs. Its main idea was that you always saw the data associated with the code, kind of like a spreadsheet or a reactive notebook, though it felt distinct from these. Even though it was just a prototype, it quickly became my preferred programming environment, mostly because it felt so great to see the data as I programmed. Instead of blindly typing code and guessing if it worked, I had concrete evidence that the code did what I expected. Having this evidence gave me an informed sense of confidence in my code, and as a result programming basically just felt *good*, it felt nice! 13 | 14 | So from using Flowsheets I verified that seeing data as I programmed actually can feel good in practice. But Flowsheets was only designed for making small programs — showing all the data in a large program would be overwhelming. So I began to wonder, how could runtime data be brought into the programming exprience in large and complex systems, ones that professional programmers tend to work on? What data is actually useful for these programmers to see when they're creating large systems? 15 | 16 | I built REPLugger, the prototype I'm about to show you, as one possible answer to these questions. 17 | 18 | But before I show you REPLugger, I first wanted to address three of the main criticisms of programming research projects: 19 | 20 | - "this only works for toy programs" - not representative of real programs 21 | - "this is fine for beginners but not me" - doesn't address actual intermediate or expert programmer concerns 22 | - "this isn't useful enough for me to adopt" - not practical 23 | 24 | To me, all these criticisms point to one underlying concern: that programming research doesn't adequately address the lived human experience of programming, a concern I share. 25 | 26 | So with REPLugger I tried to address these by 27 | 28 | - testing it with the code for Flowsheets, a real program I made with a few thousand lines of JS 29 | - using it myself 30 | - and seeing empirically if it actually provided tangible benefits 31 | 32 | My hope is that addressing these criticisms, I can help bring some of the promise we saw in Bret Victor's demos to reality, to improve the everyday experience of the 20 million or so programmers of the world, and the countless number of potential programmers in the future. 33 | 34 | I made this demo for 35 | - an advanced programmer (not beginners) 36 | - writing (not reading) 37 | - a real program (not a toy program) 38 | - to see what concrete program data is empirically useful when programming 39 | 40 | wanted an empirical approach in some ways and a suggstive approach in other ways 41 | 42 | 43 | [REPLugger intro] 44 | 45 | So with the context out of the way, this is REPLugger. 46 | 47 | On the left there's a text editor. In this case I'm editing a real file from the Flowsheets codebase. 48 | 49 | On the right we have a table listing scopes, names, and values from a sample run of the program. Kind of like a debugger. 50 | 51 | And on the bottom we show the output of the line the cursor is on. Kind of like a REPL. Get it? REPL and a debugger makes REPLugger. 52 | 53 | Anyway, changing the cursor changes the debugger and output UIs. You can see as I move the cursor, the output at the bottom changes, and names are added to the table. REPLugger basically tries to run the code up to the current line. 54 | 55 | These UIs also changed as I type. If I type 1+1, the REPL shows the result of that expression. 56 | 57 | for example, 1+1 = 2 58 | 59 | Like any other REPL, I can do little experiments and try things out. But unlike most REPLs, the results are just right there, available as I type in my text editor, without switching windows or having to do anything. Also unlike most REPLs, REPLugger has access to the entire program's state without having to laboriously copy and paste code. 60 | 61 | For example, if I wanted to see how many cells there were in this grid I can just type 62 | 63 | rows * columns 64 | 65 | And there's the total number of cells. And if I found I wanted to use this value in my program, I could just assign it to a variable. 66 | 67 | var num_cells = rows * columns; 68 | 69 | And it shows up here in the debugger. 70 | 71 | The idea of REPLugger is that the REPL and debugger live alongside your code editor so you're never programming blind. You can see all the values in the program, get feedback as you type, try experiments like you would in a REPL, etc. And most of this happens without having to interact with the UI, you just type code as normal and the UIs are available if you want to use them. From my experience watching people program, I think something like this will not only prevent simple bugs, but make programming just feel more plasant. 72 | 73 | Let's do a little simple programming to see what I mean. 74 | 75 | 76 | [Programming with REPLugger] 77 | 78 | First I want to add a little code that changes the background's height based on the window height. so I start writing my if-statement 79 | 80 | in initialize_grid: 81 | 82 | if (window.innerHeight > height) { 83 | 84 | } 85 | 86 | 87 | We see something interesting here. I haven't finished writing the expression but REPLugger still finds a valid expression to run and shows me what that evaluates to. The point of this is to give me feedback as I type so that I can be assured my code is actually doing what I imagine it's doing. So I'll finish writing the expression... and the REPL continues to show me that this line evaluates to true. 88 | 89 | If I wanted to check why it evaluates to true, I could just highlight parts of the expression and REPLugger shows me the value of that part. 90 | 91 | But let's continue writing and make the background height twice the window's height. 92 | 93 | height = window.innerHeight * 2; 94 | 95 | Again we see the value updated in the REPL and the table. 96 | 97 | I have to say, programming with this kind of feedback feels nice. This idea comes directly out of my experience with programming — often, I simply want to know — does the current line I'm writing work? I can't know in most programming environments or I have to jump through hoops to print out the value. It's really frustrating! But in REPLugger, it's right there. 98 | 99 | of course, a lot of this is UI code, so we'd probably want to run the program to see how it looks visually. [ run code ] yeah, looks right 100 | 101 | While it would probably be nice to see the visual output of the program change as I type, I wanted REPLugger to be able to work for programs with and without UIs, so I chose to have REPLugger work at the symbolic level of the code instead of the visual level of the UI. 102 | 103 | Let's see more of how that works. 104 | 105 | 106 | 107 | [Filling in example arguments] 108 | 109 | The main idea of REPLugger is you can always see concrete values. 110 | 111 | In some code, like in functions with abstract arguments, REPLugger doesn't have any values to show. 112 | 113 | To demonstrate this, we'll make a new function, clamp, that takes three arguments. When we do this, we see that REPLugger highlights those arguments in red, showing they don't have values. So what we can do is click in these cells and fill in some values. [1 2 10] They turn yellow to show they've been manually edited. 114 | 115 | And then we can write the rest of the function and we'll have concrete feedback as we do it... 116 | if (num < min) { 117 | return min; 118 | } else if (num > max) { 119 | return max; 120 | } 121 | return num; 122 | 123 | Clamp is a simple function so we don't really need much feedback here. But we can use the feedback to play around and try things out. 124 | 125 | So what if we tried to clamp null between 1 and 2? 1? huh? Let's see why that happened. We can go back into the function and manually edit the argument here and see that in this first comparison it thinks null is less than 1. Wow, thank you javascript. 126 | 127 | So again this concrete feedback comes in handy, not just as we're writing code but as we're reading it, especially when we have the ability to manually edit data in the program to see what would happen in different cases. Although seeing the results of one line at a time when reading code isn't very useful — REPLugger was made more for writing code. 128 | 129 | So say we felt like this null case was important and that we wanted to make sure we were aware of when we went back to the code later. We can go to this dropdown over here and save this set of arguments and name it. We see a little number appear here in this dropdown showing that there is one saved case. 130 | 131 | If we change this argument back to what we had before and save that too, we call it default. So now we have two cases. Default is the one shown right now, but by selecting the other it changes the value. And I can switch back. 132 | 133 | So imagine I leave the program and come back in a few months when I forgot about it. When I click in here I see, oh, there are two cases I wanted myself to know about when looking at this function. There's this case, and there's this case. Thanks, past me! 134 | 135 | 136 | Or imagine I'm on a team of programmers all using REPLugger. I wrote this function and saved these two examples in source control. So when a different team member comes into this function and is using REPLugger, they can see those examples. These saved examples provide additional context for what I had in mind when writing this code, what conditions I expected this code to run under, almost like user-facing unit tests. 137 | 138 | We've all tried to read unfamiliar code and had questions like, "why did the person write it like this? how did they expect this to work?" And we can't really answer those questions because they're not in the code. By having these filled-in examples in REPLugger, we not only get live feedback as we're writing the code, but also some context when we're reading or modifying the code later. 139 | 140 | But clamp is just a simple example I'm using to demonstrate the features of REPLugger. Where I think this stuff is more useful is more complicated code. So let's look at that now. 141 | 142 | 143 | [Deeper nested code] 144 | 145 | So if we come down here we can see we're down in a few different scopes. This code handles mouse movements, mostly when clicking and dragging parts of boxes in Flowsheets. 146 | 147 | First we see this yellow evt parameter. I previously filled in this evt parameter with an example. Clicking in here we see that this value was created from a short expression I wrote. When I hit enter, it evaluates the expression and shows the value. 148 | 149 | new window.MouseEvent('mousemove'); evt.pageX = 0; evt.pageY = 0; 150 | 151 | But here's something else: REPLugger is saying there's an error. And all the values in this table are blank. If we look here, we see the code is looking for resize_drag to have a truthy value but resize_drag is null! So REPLugger ignored the if-statement in order to try to run up until where the cursor is. 152 | 153 | So what we can do is come to this dropdown and choose "add name". We can call this resize_drag and give it a value: 154 | 155 | new Resize_Drag(create_ui_block()) 156 | 157 | So what this is doing is saying... "ignore whatever the value of resize_drag was and instead make it this value, but only in this scope". We're overwriting the value temporarily to get the program into a useful state. 158 | 159 | And we see that by doing that all the variables in this table now have values and the error went away. Using this overwrite, we put the program in a state. 160 | 161 | I think overwriting is a really exciting feature. We can overwrite any part of the program with any values we want. 162 | 163 | So right here we can say, I don't want dx to be that, I want to see what would happen when it's 10, or the same as cell_width. 164 | 165 | The idea for overwrites comes out of my experience as a software engineer. Often, I'd suspect bugs were coming from a program because of a particular state, but had no way of getting the program into that state or that codepath in order to check. 166 | 167 | In fact, I'd say a lot of what makes programming difficult is that programs can get into many different states and code has to handle those many states. To help programmers with that, we give them explicit control over the states so they can see for themselves how their code works under different conditions. This can be especially useful in debugging where often we have hypotheses about what's going on in our code but it's not straightforward to test that hypothesis and get feedback. Overwrites in REPLugger are an attempt to let programmers quickly and fluidly try their hypotheses and get an understanding of how large programs work in different conditions. 168 | 169 | 170 | Our tools are designed to solve problems. To borrow an analogy from Bret Victor, looking at a hammer you can see - oh okay, focusing human force. The hard part is the "hard part" the hammerhead. 171 | 172 | if you look at programming environments today and try to reason backward to figure out what the difficult parts of programming are, you'd come to the conclusion that finding and manipulating text. But this obviously isn't the hard part of programming. The hard part is understanding how pieces fit together. 173 | 174 | a lot of debugging depends on intuition, and intuition depends on data. "we have this value, this value, and this value" -> intuition -> oh this one thing explains. one problem with print statements is that you have to beg for information. it completely precludes the idea of discovery. and getting the program to give us this information is often arduous 175 | 176 | 177 | 178 | 179 | 180 | 181 | [Getting runtime data] 182 | 183 | freezing program state, importing it into REPLugger 184 | 185 | 186 | [TODO] 187 | 188 | time? 189 | show more data? (chrome debugger) 190 | visualization types? tables? ipython notebooks? 191 | solid model for sample environment? 192 | 193 | 194 | [Things to take away] 195 | 196 | concrete data to bring clarity 197 | 198 | when writing lines 199 | when reading code 200 | 201 | feedback when writing current line 202 | showing whole program context 203 | 204 | the ability to try things out, save 205 | making states explicit and manipulable 206 | 207 | calm experience 208 | When I showed REPLugger to two friends, both remarked on how calm the experience felt. There's very little interaction necessary. Instead of frantically switching between windows, REPLugger's extra UI provides a stable frame for answering questions about program state. When I call REPLugger "pleasant", this is part of what I mean. It just feels good. 209 | 210 | overwrites - ways of working with states of program interactively, show context 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | ---------------------------------------- 219 | ---------------------------------------- 220 | ---------------------------------------- 221 | ---------------------------------------- 222 | ---------------------------------------- 223 | ---------------------------------------- 224 | ---------------------------------------- 225 | ---------------------------------------- 226 | ---------------------------------------- 227 | ---------------------------------------- 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | it's been almost 7 years since Bret's inventing on principle, where he demonstrated an inspiring direction to improve programming — showing program data. yet I still haven't seen any compelling examples of how that work could be done in a practical way. 236 | 237 | also felt some criticisms about programming research projects, including Bret's work: 238 | - made for beginner programmers, 239 | - they only work for toy problems 240 | - they don't provide enough utility for programmers to adopt them 241 | 242 | Like many of us here, I'm inspired by Bret's work, but offers more of a good framing of the problem and provocative examples of what else could be done, but not solutions. So I wanted a solution that actually provided tangible benefits. 243 | 244 | inspired by Bret 245 | flowsheets felt good 246 | With Flowsheets, it felt good! It wasn't based on principle — it just felt good. it was biased 247 | 248 | no theorizing — what feedback is actually useful to programmers? I examined my own experience and Jonathan Blow and found that most of the time I just wanted some feedback to see if the line I just wrote worked as I expected. and same goes for reading code - just want to see an example of what the thing is doing (often don't need to know its general behavior) 249 | 250 | 251 | common underlying criticism: programming research doesn't actually address the human experience of programming. good that researchers are divorced from everyday experience since it allows for greater freedom of ideas, but gotta come back into the realm of human experience at some point. and my argument is that doing this actually provides a lot of inspiration. some of the best scientists are those working at the intersection of ideas and human experience 252 | 253 | 254 | 255 | Watched Jonathan Blow, show clips of him going "wait what's happening?" 256 | 257 | stop arguing on principles, argue on evidence! 258 | 259 | new feature: 260 | replugger() captures state 261 | actually do some programming to show how it works in practice 262 | - add number of overwrite groups as badge to dropdown, to show other programmers there are things to check out 263 | 264 | 265 | REPLugger is calm - provides stable context, not fleeting like many programs running through time. also calm since there's no flipping back and forth between windows. 266 | 267 | 268 | design values - be clear about what circumstances an intervention was designed for, who it would help, and when it's appropriate 269 | 270 | 271 | get across that this is USEFUL WHILE PROGRAMMING 272 | show the team-based programming thing more clearly 273 | 274 | show the data 275 | 276 | look on programming environment? What does this interface say about what's hard about programming? text editors and IDEs say the hard thing is about finding and manipulating text. 277 | 278 | show concrete example of how overwrites can be useful to programmers 279 | show example of how states can be useful to other programmers 280 | -------------------------------------------------------------------------------- /build_mock_environment.sh: -------------------------------------------------------------------------------- 1 | mkdir -p mock_environment 2 | cd staged_src/ 3 | cp * ../mock_environment/ -------------------------------------------------------------------------------- /compile.sh: -------------------------------------------------------------------------------- 1 | cd staged_src/ && babel . --out-dir ../mock_environment/ && cp interpreter.py ../mock_environment/ -------------------------------------------------------------------------------- /electron_app.js: -------------------------------------------------------------------------------- 1 | const {app, BrowserWindow} = require('electron') 2 | const path = require('path') 3 | const url = require('url') 4 | 5 | // Keep a global reference of the window object, if you don't, the window will 6 | // be closed automatically when the JavaScript object is garbage collected. 7 | let win 8 | 9 | function createWindow () { 10 | // Create the browser window. 11 | win = new BrowserWindow({width: 1400, height: 900}) 12 | 13 | // and load the index.html of the app. 14 | win.loadURL(url.format({ 15 | pathname: path.join(__dirname, 'new_index.html'), 16 | protocol: 'file:', 17 | slashes: true 18 | })) 19 | 20 | // Open the DevTools. 21 | win.webContents.openDevTools() 22 | 23 | // Emitted when the window is closed. 24 | win.on('closed', () => { 25 | // Dereference the window object, usually you would store windows 26 | // in an array if your app supports multi windows, this is the time 27 | // when you should delete the corresponding element. 28 | win = null 29 | }) 30 | } 31 | 32 | // This method will be called when Electron has finished 33 | // initialization and is ready to create browser windows. 34 | // Some APIs can only be used after this event occurs. 35 | app.on('ready', createWindow) 36 | 37 | // Quit when all windows are closed. 38 | app.on('window-all-closed', () => { 39 | // On macOS it is common for applications and their menu bar 40 | // to stay active until the user quits explicitly with Cmd + Q 41 | if (process.platform !== 'darwin') { 42 | app.quit() 43 | } 44 | }) 45 | 46 | app.on('activate', () => { 47 | // On macOS it's common to re-create a window in the app when the 48 | // dock icon is clicked and there are no other windows open. 49 | if (win === null) { 50 | createWindow() 51 | } 52 | }) 53 | 54 | // In this file you can include the rest of your app's specific main process 55 | // code. You can also put them in separate files and require them here. -------------------------------------------------------------------------------- /mock_environment.js: -------------------------------------------------------------------------------- 1 | const parse_flow_src = require('flow-parser'); 2 | const flow_remove_types = require('flow-remove-types'); 3 | 4 | 5 | function prepare_current_file_to_act_as_server(file_src, names_of_interest) { 6 | var server_src = `console.log('server would be running here')` 7 | var mock_server_src = `${file_src.replace(/const /g, 'var ')} 8 | 9 | /* ----- REPLUGGER MOCK SERVER ----- */ 10 | 11 | const replugger_circular_json = require('circular-json'); 12 | const replugger_undescore = require('underscore'); 13 | function replugger_json_replacer(key, value) { 14 | if (typeof value === 'function') { 15 | return value.toLocaleString(); 16 | } 17 | return value; 18 | } 19 | var replugger_output = { 20 | ${names_of_interest.map(name => `${name}: replugger_circular_json.stringify(${name}, replugger_json_replacer).slice(0, 100)`).join(',\n')} 21 | } 22 | process.stdin.setEncoding('utf-8') 23 | process.stdin.on('data', function(buffer) { 24 | var lines = buffer.toString().split('\\n'); 25 | for (var i = 0; i < lines.length; ++i) { 26 | var data = lines[i]; 27 | if (data.startsWith('replugger_summary_info:')) { 28 | var name = data.replace(/^replugger_summary_info:/, ''); 29 | try { 30 | var output = eval(name) 31 | if (typeof output === 'object' && output !== null && output.isTrusted === false) { 32 | output.isTrusted = true; 33 | } 34 | var json_output = replugger_circular_json.stringify(output, replugger_json_replacer); 35 | if (json_output === undefined) { 36 | process.stdout.write('undefined\\n') 37 | } else { 38 | process.stdout.write(json_output.slice(0, 100).replace(/\\n/g, '__REPLUGGERNL__')+'\\n') 39 | } 40 | } catch(e) { 41 | process.stdout.write('replugger_error:'+e.toString().replace(/\\n/g, '__REPLUGGERNL__')+'\\n') 42 | } 43 | } else if (data.startsWith('replugger_full_info:')) { 44 | var name = data.replace(/^replugger_full_info:/, ''); 45 | try { 46 | var output = eval(name); 47 | // why is typeof null an object?!?!?! 48 | if (output !== null && typeof output === 'object') { 49 | var json_output = '{'; 50 | _.each(output, function(value, key) { 51 | var value = replugger_circular_json.stringify(value, replugger_json_replacer) 52 | json_output += '"'+ key +'": '+ (value !== undefined ? value.slice(0, 100) : 'undefined') + ',,' 53 | }) 54 | json_output += '}' 55 | } else { 56 | try { 57 | json_output = replugger_circular_json.stringify(output, replugger_json_replacer).slice(0,500); 58 | } catch(e) { 59 | json_output = 'undefined' 60 | } 61 | } 62 | process.stdout.write(json_output.replace(/\\n/g, '__REPLUGGERNL__')+'\\n') 63 | } catch(e) { 64 | process.stdout.write('replugger_error:'+e.toString().replace(/\\n/g, '__REPLUGGERNL__')+'\\n') 65 | } 66 | } else if (data.startsWith('replugger_run_code:')) { 67 | var code = data.replace('replugger_run_code:', '').replace(/__REPLUGGERNL__/g, '\\n'); 68 | try { 69 | eval(code); 70 | process.stdout.write('ok\\n') 71 | } catch(e) { 72 | process.stdout.write('replugger_error:'+e.toString().replace(/\\n/g, '__REPLUGGERNL__')+'\\n') 73 | } 74 | } 75 | } 76 | }); 77 | process.stdout.setEncoding('utf-8') 78 | process.stdout.write('ok\\n'); 79 | ` 80 | return mock_server_src; 81 | } 82 | module.exports.prepare_current_file_to_act_as_server = prepare_current_file_to_act_as_server; 83 | 84 | function scopes_and_names(file_src, line_number) { 85 | var scopes = []; 86 | /* e.g. 87 | [ 88 | {scope_name: 'function (evt) {', 89 | line_number: 102, 90 | names_in_scope: ['evt', 'dx', 'dy'], 91 | fill_in_names: ['evt'], 92 | } 93 | ] 94 | */ 95 | 96 | var lines = file_src.split('\n'); 97 | var scope_stack = [{scope_name: 'file', line_number: null, names_in_scope: [], fill_in_names: []}]; 98 | for (var i = 0; i < lines.length; ++i) { 99 | if (i >= line_number) { 100 | return scope_stack; 101 | } 102 | 103 | var line = lines[i].trim(); 104 | if (line.startsWith('const ') || line.startsWith('var ')) { 105 | var name = line.split('=')[0].replace(/(const|var)/g, '').trim(); 106 | scope_stack[scope_stack.length-1].names_in_scope.push(name) 107 | // } else if (line.startsWith('function') && scope_stack.length == 1) { 108 | // // defining global function 109 | } else if (line.startsWith('class ') && scope_stack.length == 1) { 110 | var name = line.replace(/ \{.*/, '').replace('class ', '') 111 | scope_stack[0].names_in_scope.push(name); 112 | } else if (line.includes('this.') || line.includes('this,')) { 113 | var current_scope_stack = scope_stack[scope_stack.length-1]; 114 | if (!current_scope_stack.names_in_scope.includes('this')) { 115 | current_scope_stack.names_in_scope.push('this') 116 | } 117 | } else if (line.startsWith('function ') && scope_stack.length == 1) { 118 | var name = line.replace(/\(.*\) \{.*/, '').replace('function ', ''); 119 | scope_stack[0].names_in_scope.push(name); 120 | } else if (line.startsWith('}')) { 121 | if (scope_stack.length > 1) { 122 | scope_stack.pop(); 123 | } 124 | } 125 | if (line.endsWith('{')) { 126 | scope_stack.push({scope_name: line, line_number: i+1, names_in_scope: [], fill_in_names: []}) 127 | var current_scope_stack = scope_stack[scope_stack.length-1]; 128 | 129 | var function_re = /function[\w\s]*\(([\w,\s]+)\)\s?\{$/; 130 | var match_groups = line.match(function_re) 131 | if (match_groups) { 132 | var arguments = match_groups[match_groups.length-1].split(',').map(arg => arg.trim()) 133 | arguments.forEach(function(arg) { 134 | current_scope_stack.names_in_scope.push(arg) 135 | current_scope_stack.fill_in_names.push(arg) 136 | }) 137 | } 138 | } 139 | } 140 | } 141 | module.exports.scopes_and_names = scopes_and_names; 142 | 143 | function add_parens(src) { 144 | // thing.map(function () { 145 | // -> thing.map(function() {}) 146 | var length = src.length; 147 | var paren_queue = []; 148 | for (var i = 0; i < length; ++i) { 149 | var character = src[i]; 150 | if (character == '(') { 151 | paren_queue.push(')') 152 | } else if (character == '{') { 153 | paren_queue.push('}') 154 | } else if (character == ')' || character == '}') { 155 | paren_queue.pop(); 156 | } 157 | } 158 | return src+'\n'+ paren_queue.reverse().join(''); 159 | } 160 | module.exports.add_parens = add_parens; 161 | 162 | function ast_to_list_of_scopes(node, scope_name, current_line_number, src, output) { 163 | // produce a list of scopes with variable names in each scope: 164 | // [ 165 | // {name: 'file': names_in_scope: ['module', 'clamp']}, 166 | // {name: 'function initialize_grid() {', names_in_scope: ['width', 'height']}] 167 | // ] 168 | 169 | var scope = {name: scope_name, names_in_scope: []} 170 | 171 | var nodes = null; 172 | if (node.type == 'Program') { 173 | scope.names_in_scope.push('module') 174 | nodes = node.body; 175 | } else if (node.type == 'FunctionDeclaration' || node.type == 'FunctionExpression') { 176 | node.params.forEach(param => scope.names_in_scope.push(param.name)) 177 | nodes = node.body.body; 178 | } else if (node.type == 'BlockStatement') { 179 | nodes = node.body; 180 | } else if (node.type == 'CallExpression') { 181 | nodes = node.arguments; //node.arguments[node.arguments.length-1].body; 182 | } else if (node.type == 'IfStatement') { 183 | nodes = node.consequent.body; 184 | } 185 | 186 | if (!nodes) return output; 187 | 188 | 189 | // find declarations 190 | nodes = nodes.filter(decl => decl.loc.start.line <= current_line_number); 191 | nodes.forEach(decl => { 192 | switch (decl.type) { 193 | case 'VariableDeclaration': 194 | decl.declarations.forEach(inner_decl => { 195 | scope.names_in_scope.push(inner_decl.id.name) 196 | }) 197 | return; 198 | // case 'ExpressionStatement': 199 | // return; 200 | case 'ClassDeclaration': 201 | scope.names_in_scope.push(decl.id.name); 202 | return; 203 | case 'FunctionDeclaration': 204 | case 'FunctionExpression': 205 | if (decl.id) { 206 | scope.names_in_scope.push(decl.id.name) 207 | } 208 | return; 209 | } 210 | }) 211 | 212 | if (scope.names_in_scope.length > 0) { 213 | output.push(scope); 214 | } 215 | 216 | const last_node = nodes[nodes.length-1]; 217 | if (!last_node) return output; 218 | if (last_node.loc.start.line == current_line_number && last_node.loc.end.line == current_line_number) { 219 | return output; 220 | } 221 | 222 | var current_line_src = src.split('\n')[last_node.loc.start.line-1]; 223 | 224 | if (last_node.type == 'FunctionDeclaration' || last_node.type == 'FunctionExpression') { 225 | 226 | ast_to_list_of_scopes(last_node, current_line_src, current_line_number, src, output); 227 | } else if (last_node.type == 'ExpressionStatement') { 228 | ast_to_list_of_scopes(last_node.expression, current_line_src, current_line_number, src, output); 229 | } else if (last_node.type == 'CallExpression') { 230 | ast_to_list_of_scopes(last_node.arguments[last_node.arguments.length-1], current_line_src, current_line_number, src, output); 231 | } else if (last_node.type == 'IfStatement') { 232 | // find which branch of the if statement contains the current line 233 | var test_node = last_node; 234 | while (test_node.type == 'IfStatement') { 235 | if (test_node.consequent.loc.start.line <= current_line_number && test_node.consequent.loc.end.line >= current_line_number) { 236 | break 237 | } 238 | test_node = test_node.alternate; 239 | } 240 | ast_to_list_of_scopes(test_node, src.split('\n')[test_node.loc.start.line-1], current_line_number, src, output); 241 | } else if (last_node.type == 'FunctionExpression') { 242 | ast_to_list_of_scopes(last_node.body, current_line_src, current_line_number, src, output); 243 | } else if (last_node.type == 'BlockStatement') { 244 | ast_to_list_of_scopes(last_node.body, current_line_src, current_line_number, src, output); 245 | } else { 246 | // console.log('error-causing node:', last_node) 247 | // throw 'unhandled AST node type: '+last_node.type; 248 | } 249 | 250 | return output; 251 | } 252 | 253 | 254 | 255 | function ast_node_to_js(node, scopes) { 256 | if (!node.type) { // array of nodes 257 | var nodes = node; 258 | var output = ''; 259 | var done = false; 260 | nodes.forEach(node => { 261 | if (done) { return; } 262 | if (scopes && node.loc.end.line == current_line_number && node.loc.start.line == current_line_number) { 263 | output += `replugger_values = {};\n${scopes.map(scope => { return scope.names_in_scope.map(name => `try { replugger_values['${name}'] = ${name} } catch(e) { replugger_values['${name}'] = '...' }`).join('\n')}).join('\n')}\n${ast_node_to_js(node, scopes)}` 264 | done = true; 265 | return 266 | } 267 | output += ast_node_to_js(node, scopes)+'\n' 268 | }) 269 | return output; 270 | } 271 | switch (node.type) { 272 | case 'Program': 273 | return `try { 274 | ${ast_node_to_js(node.body, scopes)} 275 | } catch (e) { 276 | replugger_values = {}; 277 | ${scopes.map(scope => { return scope.names_in_scope.map(name => `try { replugger_values['${name}'] = ${name} } catch(e) { replugger_values['${name}'] = '...' }`).join('\n')}).join('\n')} 278 | } 279 | ` 280 | case 'ExpressionStatement': 281 | if (node.loc.start.line < current_line_number && node.loc.end.line >= current_line_number) { 282 | var test_node = node.expression; 283 | // find the part of this expression that the cursor is in 284 | while (test_node.type == 'CallExpression') { 285 | test_node = test_node.arguments[test_node.arguments.length-1]; 286 | } 287 | return `// function as argument 288 | ${ast_node_to_js(test_node, scopes)}` 289 | } 290 | return ast_node_to_js(node.expression, scopes); 291 | case 'ClassDeclaration': 292 | return `class ${ast_node_to_js(node.id, scopes)} ${ast_node_to_js(node.body, scopes)}`; 293 | case 'ClassProperty': 294 | return ``; 295 | case 'MethodDefinition': 296 | return `${ast_node_to_js(node.key, scopes)}(${node.value.params.map(param => param.name).join(', ')}) ${ast_node_to_js(node.value.body, scopes)}`; 297 | case 'ClassBody': 298 | case 'BlockStatement': 299 | return `{ 300 | ${ast_node_to_js(node.body, scopes)} 301 | }` 302 | case 'VariableDeclaration': 303 | var output = '' 304 | node.declarations.forEach((decl,i) => { 305 | output += ast_node_to_js(decl, scopes); 306 | if (i !== node.declarations.length-1) { 307 | output += ',\n' 308 | } else { 309 | output += ';' 310 | } 311 | }); 312 | return output; 313 | case 'IfStatement': 314 | if (node.loc.start.line <= current_line_number && node.loc.end.line >= current_line_number) { 315 | // find which branch the cursor is in 316 | var test_node = node; 317 | while (test_node.type == 'IfStatement') { 318 | if (test_node.consequent.loc.start.line <= current_line_number && test_node.consequent.loc.end.line >= current_line_number) { 319 | break 320 | } 321 | test_node = test_node.alternate; 322 | } 323 | return `// if ${ast_node_to_js(test_node.test, scopes)} 324 | ${ast_node_to_js(test_node.consequent.body, scopes)} 325 | ` 326 | } 327 | var else_clause = ''; 328 | if (node.alternate) { 329 | else_clause = `else ${ast_node_to_js(node.alternate, scopes)}` 330 | } 331 | 332 | return `if (${ast_node_to_js(node.test, scopes)}) ${ast_node_to_js(node.consequent, scopes)} ${else_clause}`; 333 | case 'ConditionalExpression': 334 | return `${ast_node_to_js(node.test, scopes)} ? ${ast_node_to_js(node.consequent, scopes)} : ${ast_node_to_js(node.alternate, scopes)}` 335 | case 'AssignmentExpression': 336 | return `${ast_node_to_js(node.left, scopes)} ${node.operator} ${ast_node_to_js(node.right, scopes)}`; 337 | case 'MemberExpression': 338 | if (node.computed) { 339 | return `${ast_node_to_js(node.object, scopes)}[${ast_node_to_js(node.property, scopes)}]` 340 | } else { 341 | return `${ast_node_to_js(node.object, scopes)}.${ast_node_to_js(node.property, scopes)}` 342 | } 343 | case 'VariableDeclarator': 344 | if (variable_overrides[current_line_number] && node.id.name in variable_overrides[current_line_number]) { 345 | return `var ${node.id.name} = ${variable_overrides[current_line_number][node.id.name]}`; 346 | } 347 | return `var ${node.id.name} = ${ast_node_to_js(node.init, scopes)}`; 348 | case 'NewExpression': 349 | var arguments_str = ''; 350 | node.arguments.forEach((arg,i) => { 351 | arguments_str += ast_node_to_js(arg, scopes)+ (i == node.arguments.length-1 ? '' : ', '); 352 | }) 353 | return `new ${ast_node_to_js(node.callee, scopes)}(${arguments_str})`; 354 | case 'CallExpression': 355 | var arguments_str = ''; 356 | node.arguments.forEach((arg,i) => { 357 | arguments_str += ast_node_to_js(arg, scopes)+ (i == node.arguments.length-1 ? '' : ', '); 358 | }) 359 | return `${ast_node_to_js(node.callee, scopes)}(${arguments_str})`; 360 | case 'FunctionExpression': 361 | if (node.loc.start.line <= current_line_number && node.loc.end.line >= current_line_number) { 362 | return `{ 363 | ${node.params.map(param => `var ${param.name} = ${variable_overrides[current_line_number] ? variable_overrides[current_line_number][param.name] : 'null'};`).join('\n')} 364 | ${ast_node_to_js(node.body, scopes)} 365 | }` 366 | } else { 367 | var params_str = ''; 368 | node.params.forEach((param,i) => { 369 | params_str += ast_node_to_js(param, scopes)+ (i == node.params.length-1 ? '' : ', '); 370 | }) 371 | return `${node.async ? 'async ':''} function(${params_str}) ${ast_node_to_js(node.body, scopes)}`; 372 | } 373 | case 'FunctionDeclaration': 374 | if (node.loc.start.line <= current_line_number && node.loc.end.line >= current_line_number) { 375 | return `{ // function ${ast_node_to_js(node.id, scopes)} 376 | ${node.params.map(param => `var ${param.name} = null;`).join('\n')} 377 | ${ast_node_to_js(node.body, scopes)} 378 | }` 379 | } else { 380 | var params_str = ''; 381 | node.params.forEach((param,i) => { 382 | params_str += ast_node_to_js(param, scopes)+ (i == node.params.length-1 ? '' : ', '); 383 | }) 384 | return `${node.async ? 'async ':''}function ${ast_node_to_js(node.id, scopes)}(${params_str}) ${ast_node_to_js(node.body, scopes)}`; 385 | } 386 | case 'ArrowFunctionExpression': 387 | return `(${node.params.map(param => ast_node_to_js(param, scopes)).join(', ')}) => ${ast_node_to_js(node.body, scopes)}` 388 | case 'ForStatement': 389 | return `for (${ast_node_to_js(node.init, scopes)} ${ast_node_to_js(node.test, scopes)}; ${ast_node_to_js(node.update, scopes)}) ${ast_node_to_js(node.body, scopes)}` 390 | case 'ReturnStatement': 391 | return `return ${node.argument ? ast_node_to_js(node.argument, scopes) : ''};` 392 | case 'UnaryExpression': 393 | return `${node.operator} ${ast_node_to_js(node.argument, scopes)}` 394 | case 'BinaryExpression': 395 | case 'LogicalExpression': 396 | return `${ast_node_to_js(node.left, scopes)} ${node.operator} ${ast_node_to_js(node.right, scopes)}`; 397 | case 'UpdateExpression': 398 | if (node.prefix) { 399 | return `${node.operator}${ast_node_to_js(node.argument, scopes)}`; 400 | } 401 | return `${ast_node_to_js(node.argument, scopes)}${node.operator}`; 402 | case 'TryStatement': 403 | return `try ${ast_node_to_js(node.block, scopes)} ${ast_node_to_js(node.handler, scopes)}` 404 | case 'CatchClause': 405 | return `catch(${node.param.name || ''}) ${ast_node_to_js(node.body, scopes)}` 406 | case 'ArrayExpression': 407 | var output = ''; 408 | node.elements.forEach(element => { 409 | output += ast_node_to_js(element, scopes); 410 | if (i !== node.declarations.length-1) { 411 | output += ' ,\n' 412 | } 413 | }) 414 | return `[${output}]` 415 | case 'ObjectExpression': 416 | return `{${node.properties.map(prop => ast_node_to_js(prop, scopes))}}` 417 | case 'Property': 418 | return `${ast_node_to_js(node.key, scopes)}: ${ast_node_to_js(node.value, scopes)}` 419 | case 'Identifier': 420 | return node.name; 421 | case 'ThisExpression': 422 | return 'this'; 423 | case 'TemplateLiteral': 424 | return '`'+ ast_node_to_js(node.quasis, scopes) + '`' 425 | case 'TemplateElement': 426 | return node.value.raw; 427 | case 'Literal': 428 | return node.raw; 429 | case 'EmptyStatement': 430 | return '' 431 | default: 432 | console.log(node) 433 | return '!!!UH OH!!!' 434 | } 435 | } 436 | -------------------------------------------------------------------------------- /new_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | REPLugger 6 | 204 | 205 | 206 | 207 | 217 | 218 | 219 | 220 |
221 | 222 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 299 | 927 | 928 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "replugger", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "electron_app.js", 6 | "dependencies": { 7 | "babel-plugin-transform-flow-strip-types": "^6.22.0", 8 | "canvas": "^1.6.11", 9 | "circular-json": "^0.4.0", 10 | "codemirror": "^5.31.0", 11 | "deepcopy": "^0.6.3", 12 | "diff": "^3.5.0", 13 | "electron": "^1.7.9", 14 | "electron-prompt": "^1.1.0-1", 15 | "filbert": "^0.1.20", 16 | "flow-parser": "^0.58.0", 17 | "flow-remove-types": "^1.2.3", 18 | "jquery": "^3.2.1", 19 | "less": "^3.8.1", 20 | "mousetrap": "^1.6.2", 21 | "react": "^16.1.1", 22 | "react-dom": "^16.1.1", 23 | "underscore": "^1.8.3", 24 | "window": "^4.2.5" 25 | }, 26 | "devDependencies": {}, 27 | "scripts": { 28 | "start": "electron .", 29 | "test": "echo \"Error: no test specified\" && exit 1" 30 | }, 31 | "author": "Glen Chiacchieri", 32 | "license": "ISC" 33 | } 34 | -------------------------------------------------------------------------------- /splash_video.txt: -------------------------------------------------------------------------------- 1 | SPLASH VIDEO: 2 | - In this video I'm going to demonstrate a research prototype, a live code editor that mixes features of a REPL and a debugger, naturally called REPLugger. But first, a little context. 3 | 4 | - In the modern programming experience, most programmers type text into a text editor and imagine how the program works in their heads. They have to reconstruct the program's behavior mentally without much feedback from the program itself. This doesn't make any sense and leads to some problems. 5 | 6 | - The lack of feedback makes programming hard for beginners to understand, and this tragically limits the type of people that can access programming. The lack of feedback also leads to the creation of easily avoidable software bugs, and makes programming an unpleasant experience even for experts. 7 | 8 | - So instead of "playing computer" in our heads, how can we get the real computer in front of us to show us directly what our programs are doing? 9 | 10 | - We have some hints. 11 | 12 | - In a previous research prototype I made called Flowsheets, users type python code and see the results of that code immediately in a grid, kind of like a spreadsheet. This combination of code, data, and immediate feedback made programming in Flowsheets feel great, and Flowsheets became my preferred way to manipulate data even though it was just a research prototype. But the experience was geared more toward smaller scripts and not large programs. I began to wonder if there was a way of getting some of the benefits of Flowsheets in more complex software projects. So I created another prototype to test some of these ideas, which I'll show you now. 13 | 14 | There are basically three ways programmers get feedback about how their programs work today: 15 | 16 | 1. they can run the program using print statements 17 | 2. they can run the program with a debugger 18 | 3. and they can use a REPL or notebook environment 19 | 20 | these methods have some serious drawbacks 21 | 22 | 1. print statements aren't great because a programmer has to beg for information about their programs, which is like peeking through a tiny pinhole, especially for larger programs. 23 | 24 | 2. debuggers show more information about the state of the program at a particular place in the code, but stepping through code is slow and cumbersome, and the feedback loop between modifying the program and seeing the effects of those changes is long 25 | 26 | 3. And finally, REPLs and notebooks are fast and flexible, allowing programmers to try things out quickly, but there's a limit on the complexity of those experiments and it's hard to fold the results of experiments back into larger programs 27 | 28 | - But there's a fourth option that we're just beginning to explore: we can incorporate the results of running programs directly into the programming environment. I made a research environment called Flowsheets that runs python code and shows the results in a grid, kind of like a spreadsheet. Using Flowsheets it felt great to program and get immediate feedback about what my program was doing, but the experience was geared more toward smaller scripts and not large programs. 29 | 30 | - So, is there a way to bring some of the benefits of an environment like Flowsheets to larger programs without the drawbacks of print statements, debuggers, or REPLs? 31 | 32 | ------ 33 | 34 | - This is REPLugger, an editor that integrates the liveliness of a REPL and the comprehensiveness of a debugger directly into the programming experience 35 | 36 | - on the left we have an editor. In this case we're editing a real file from a project with a few thousand lines of code 37 | 38 | - on the right we have a debugging interface, a table listing scopes, names, and values from a sample run of the program 39 | 40 | - and at the bottom we show the output of the line the cursor is on 41 | 42 | - changing the cursor changes the debugger and output UIs. You can see as I move the cursor, the names under the cursor are added to this table, and the output at the bottom changes too. And the same applies if I type new code. [[ type 1+1*3 ]] 43 | 44 | - why is this useful? here's an example from my experience. there's a function I often forget the order of the arguments to. In REPLugger, the values are shown and I can examine them directly [[ click down arrow in table ]], 45 | 46 | or I can simply type the function into the editor and see its definition right there, no looking up documentation. This feature is a standard part of many IDEs, but in REPLugger inline documentation comes for free. 47 | 48 | - The live output isn't just for documentation though, it's also useful in the ways a REPL is useful - I can write little expressions and see what happens. For example, in this program there's a grid and I want to see that grid's height. I can multiply the number of rows in the grid by the height of each row to see the total height of the grid [[ rows * cell_height ]]. I can change values this expression depends on and see how it affects the expression's output. 49 | 50 | - REPLugger tries to be smart about evaluating code. For example, say I wanted to create a condition if the grid height is bigger than the window's height. I can write this if-statement [[ if (height > window.innerHeight) { ]], and even though this isn't a valid line to type in a REPL by itself, REPLugger evaluates just the condition of this line. In this instance, we see the condition is true, but if I wanted more information I could highlight just one part of the expression and see that value of that part [[ window.innerHeight ]], letting me answer questions about why this code works the way it does directly in the editor. 51 | 52 | - Even with these simple features, REPLugger gives programmers useful concrete feedback about their programs. This could help beginners understand how their program is being interpreted, and help experts sharpen their mental models. 53 | 54 | - Unlike a REPL or notebook, expressions in REPLugger are evaluated within a larger program's context, closer to the conditions the actual program is running under. Let's look at that idea more closely. 55 | 56 | --------- 57 | 58 | The basic idea of REPLugger is to create a sample environment that gives us just enough feedback to be useful as we're programming. 59 | 60 | For example, when we move the cursor around [[ move in to clamp() function ]], REPLugger tries to execute the program up to the current line, but here it needs some context. These three names shown in red are arguments to this function. REPLugger doesn't know what the values of those arguments could be, so it asks you to fill them in. Let's do that [[ 10, 9, 11 ]] 61 | 62 | The values turn yellow to show they've been modified. 63 | 64 | 65 | Once they're filled in, the function's behavior can be explored. [[ cursor around ]] 66 | 67 | The arguments can be changed further to test out specific scenarios [[ null ]]. 68 | 69 | And they're saved in the editor, so they can be reused when returning to the code later. 70 | 71 | 72 | ---------- 73 | 74 | 75 | Filling in values is especially useful in more complex nested code [[ move to line 145 ]]. For example, on this line, we see a couple things. First, we see this line is in a function that needs an argument to be filled. Let's do that: I'll paste in a little code here: [[ new window.MouseEvent('mousemove'); evt.pageX = 0; evt.pageY = 0; ]] REPLugger evaluates that code and shows the result. I can click back on the value and REPLugger will show me the original expression. 76 | 77 | Next we see an error on line 139. What happened is REPLugger ignored this if-statement in an attempt to run up until the current line, but it encountered an error. As we can see from this table, resize_drag is null. This code expects resize_drag to be non-null. So what we can do is introduce an overwrite in this scope. I'll add a new name from this dropdown, and then enter a short expression. [[ new Resize_Drag(create_ui_block()) ]] 78 | 79 | What this does is create a new entry in the table that overwrites any previous values, but only in the context of this particular scope. If I navigate out of this scope, the overwrite is no longer active. Overwriting is useful in creating specific system states so that certain parts of code can run. In this case, we now have enough context to modify this part of the code, and we'll have live feedback as we do it. We can see all the expressions that relied on resize_drag now have sample values. 80 | 81 | These overwrites can be saved and used later, too. I'll save this one and name it "default". If I change this value to something else, I can get back to the scenario I named default by going to this dropdown menu and clicking it. 82 | 83 | You can imagine overwrites being useful for teams of programmers. If the overwrites were saved in source control, then any team member using REPLugger could use overwrites other programmers created to get live feedback as they program. Shared overwrites would also have the added benefit of giving programmers unfamiliar with a piece of code some context about what states the original programmer expected the code to run under. 84 | 85 | ------- 86 | 87 | 88 | 89 | Finally, REPLugger also supports overwrites as a way of quickly and fluidly creating and validating experiments. Earlier, we tried changing a variable called cell_height directly in the code, but say we wanted to experiment with that value while we're in a completely different place in the code and to see what happens. 90 | 91 | What we can do is we can edit the value directly in this table. The value will be overwritten temporarily and anything that depends on that value will be updated accordingly. You can see the height variable changes as I change cell_height. These experiments can be saved as shown before. 92 | 93 | A lot of what makes programming hard, especially in big systems, is that there are so many different states a program can have. REPLugger gives programmers the ability to quickly modify these states directly and see what happens. Intuition is one of a programmer's best friends, but intuition works best given feedback and a low barrier to experimentation. 94 | 95 | --------- 96 | 97 | So that's REPLugger. I think it represents a scalable live programming environment that could be useful for both beginners and experts. In particular, I think the introduction of actual program data into the programming experience grounds understanding, making it so programmers don't have to imagine what the program is doing in their heads. 98 | 99 | As I said, REPLugger is a research prototype, which means I built it to demonstrate the idea. It's not a production-ready system, and would take a lot of engineering to get to a usable state. Unfortunately, I don't have the time to do this, but I think it would be worth the effort if someone did. If you're excited about turning REPLugger into a full-fledged product, I'd love to talk with you. 100 | 101 | And if you're interested in the future of programming, you might be interested in my newsletter where I send out very occasional emails about my projects. There's a link to it in the description. Thanks for watching! 102 | 103 | -------- 104 | 105 | feedback from Michael Nagle: 106 | - overwrites felt powerful 107 | - the "working on team" statement felt provocative, but Michael didn't understand that the overwrites were saved 108 | - also didn't understand that the (evt) statement got evaluated. could show that more clearly, and that expressions are evaluated and can be edited later 109 | - programming felt so much calmer, instead of having code and then meta-code with print statements 110 | 111 | Geoffrey feedback: 112 | - surprised about amount of functionality 113 | - since program output was visual, wondering if he could somehow fold that into REPLugger 114 | 115 | 116 | -------- 117 | 118 | thoughts: 119 | - working with teams: imagine having scenarios saved for other people working on code. Another programmer could use these examples to browse the code and see what it does concretely, and an idea of which conditions the original programmer expected the code to run in 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | - explain how running model works 128 | - basic idea is to get some kind of environment up and running, enough to be able to usefully play with things 129 | - tries to run the program until the line the cursor is on, but needs some context 130 | - for clamp, wants to call the function, but needs you to specify arguments 131 | - once inputted, arguments are saved for future use 132 | - especially useful for nested (show more complicated example, line 140) 133 | 134 | - setup context for function 135 | - line 140, error, to execute this line the environment ignored the if-statement 136 | - so resize_drag is null, want to populate it, new Resize_Drag(create_ui_block()) 137 | - ability to save context, if these are saved in source control could imagine useful in collaborative code projects 138 | 139 | - finally, what-if situations 140 | - change name in any scope to see effects 141 | - quickly try out different values 142 | - earlier, we tried changing cell_height directly, but here we're editing code elsewhere - instead of going to find that value, we can just edit it directly, overwriting its value temporarily to experiment and see how the program changes (if more parts of the program depended on cell_height we'd see all those values change too) 143 | - can save these overwrites as before to be used again later if desired 144 | - imagine turning these into unit tests, but really more important are human factors 145 | - experimentation and intuition are programmers' best friends, but those capacities work better with more data. today, tools don't support fluid intuition and experimentation 146 | 147 | - speculative: use program, save state, see in REPLugger 148 | 149 | - important features: 150 | - instant feedback - does the thing work as I expect? 151 | - shows how model works - good for beginners and experts 152 | - what-if situations allow and encourage quickly trying out alternate states 153 | 154 | - future directions: 155 | - hacked together, better model 156 | - collaborative coding 157 | - save -------------------------------------------------------------------------------- /staged_src/.babelrc: -------------------------------------------------------------------------------- 1 | // 2 | {"plugins": ["transform-flow-strip-types"]} 3 | -------------------------------------------------------------------------------- /staged_src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flowsheets v2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 | 42 |
43 | 44 | 47 | 48 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /staged_src/interpreter.js: -------------------------------------------------------------------------------- 1 | const spawn = require('child_process').spawn; 2 | const filbert = require('filbert'); 3 | const _ = require('underscore'); 4 | 5 | // @Cleanup: probably move to utils at some point 6 | function assert(condition) { 7 | if (!condition) { 8 | throw 'Assertion failed!'; 9 | } 10 | } 11 | 12 | const ui = require('./renderer.js'); 13 | 14 | module.exports.WARN_ON_CLOSE = true; 15 | 16 | var python_interpreter = spawn('python', [__dirname + '/interpreter.py']); 17 | python_interpreter.on('close', function (data) { 18 | if (module.exports.WARN_ON_CLOSE) alert("Python processes closed! Probably due to interpreter.py error. Error code: " + data); 19 | }); 20 | process.on('exit', function () { 21 | python_interpreter.kill(); 22 | }); 23 | module.exports.python_interpreter = python_interpreter; 24 | 25 | function get_user_identifiers(python_code) { 26 | var advance_token = filbert.tokenize(python_code); 27 | var token = advance_token(); 28 | var names = {}; 29 | while (token.type.type !== 'eof') { 30 | if (token.type.type === 'name') { 31 | names[token.value] = true; 32 | } 33 | token = advance_token(); 34 | } 35 | // remove all references to built-ins 36 | var current_names = blocks.map(block => block.name); 37 | return _.keys(names).filter(key => { 38 | return !_.has(filbert.pythonRuntime, key) && !_.has(filbert.pythonRuntime.functions, key) && !_.has(filbert.pythonRuntime.ops, key) && (_.contains(current_names, key) || _.contains(current_names, key.slice(0, key.length - 1))); 39 | }); 40 | } 41 | 42 | function get_user_identifiers_with_positions(python_code) { 43 | var advance_token = filbert.tokenize(python_code, { locations: true }); 44 | var token = advance_token(); 45 | var names_and_positions = []; 46 | while (token.type.type !== 'eof') { 47 | if (token.type.type === 'name') { 48 | var location = { 49 | name: token.value, 50 | start_line: token.startLoc.line - 1, // 1-based index for some reason 51 | start_ch: token.startLoc.column, 52 | end_line: token.endLoc.line - 1, // 1-based index for some reason 53 | end_ch: token.endLoc.column 54 | }; 55 | names_and_positions.push(location); 56 | } 57 | token = advance_token(); 58 | } 59 | // remove all references to built-ins 60 | var current_names = blocks.map(block => block.name); 61 | return names_and_positions.filter(location => { 62 | var key = location.name; 63 | return !_.has(filbert.pythonRuntime, key) && !_.has(filbert.pythonRuntime.functions, key) && !_.has(filbert.pythonRuntime.ops, key) && (_.contains(current_names, key) || _.contains(current_names, key.slice(0, key.length - 1))); 64 | // remove tail _ from name 65 | }); 66 | } 67 | module.exports.get_user_identifiers_with_positions = get_user_identifiers_with_positions; 68 | 69 | function replace_python_names(old_code, to_replace, replace_with) { 70 | // replace `to_replace` with `replace_with` in `old_code` 71 | 72 | // 'a+1' => ['b','+1'] 73 | // '1+a+1' => ['1+', 'b', '+1'] 74 | // 'a_+1' => ['b_','+1'] 75 | var advance_token = filbert.tokenize(old_code); 76 | var new_code = ['']; 77 | var token = advance_token(); 78 | // @TODO @Robustness: keep track of spaces from original string and reinsert them 79 | while (token.type.type !== 'eof') { 80 | if (token.value === to_replace) { 81 | new_code.push(replace_with); 82 | new_code.push(''); 83 | } else if (token.value === to_replace + '_') { 84 | new_code.push(replace_with + '_'); 85 | new_code.push(''); 86 | } else { 87 | if (_.isUndefined(token.value)) { 88 | if (token.type.type === 'newline') { 89 | // e.g. token = {value: undefined, type: {type: 'newline'}} 90 | token.value = '\n'; 91 | } else { 92 | // e.g. token = {value: undefined, type: {type: '['}} 93 | token.value = token.type.type; 94 | } 95 | } else if (token.type.type === 'string') { 96 | // e.g. token = {value: 'hi there', type: {type: 'string'}}, it removes the quotes from string literals... 97 | token.value = `${old_code[token.start]}${token.value}${old_code[token.end - 1]}`; 98 | } else if (token.value === 'return' && token.type.keyword === 'return') { 99 | // e.g. token = {value: 'return', type: {keyword: 'return'}} 100 | token.value = 'return '; // needs to have space on the end 101 | } 102 | 103 | new_code[new_code.length - 1] += token.value; 104 | } 105 | token = advance_token(); 106 | } 107 | return new_code.join(''); 108 | } 109 | 110 | // get stdout character-by-character until newline 111 | var stdout_accumulation = []; 112 | python_interpreter.stdout.setEncoding('utf8'); 113 | python_interpreter.stdout.on('readable', () => { 114 | 115 | var character = python_interpreter.stdout.read(1); 116 | 117 | // pipe.read(1) returns null when nothing to read 118 | while (character) { 119 | character = character.toString(); 120 | if (character === '\n') { 121 | 122 | // run callbacks 123 | if (fail_queue.length && success_queue.length) { 124 | var success_func = success_queue.shift(); 125 | fail_queue.shift(); 126 | success_func(stdout_accumulation.join('')); 127 | } 128 | 129 | stdout_accumulation = []; 130 | character = python_interpreter.stdout.read(1); 131 | continue; 132 | } 133 | 134 | stdout_accumulation.push(character); // @Speed? This is probably hella slow. Is .join() faster? 135 | character = python_interpreter.stdout.read(1); 136 | } 137 | }); 138 | 139 | var stderr_accumulation = []; 140 | python_interpreter.stderr.setEncoding('utf8'); 141 | python_interpreter.stderr.on('readable', () => { 142 | 143 | var character = python_interpreter.stderr.read(1); 144 | 145 | while (character) { 146 | character = character.toString(); 147 | 148 | if (character === '\n') { 149 | 150 | // run callbacks 151 | if (fail_queue.length && success_queue.length) { 152 | var fail_func = fail_queue.shift(); 153 | success_queue.shift(); 154 | fail_func(stderr_accumulation.join('')); 155 | } 156 | 157 | stderr_accumulation = []; 158 | character = python_interpreter.stderr.read(1); 159 | continue; 160 | } 161 | 162 | stderr_accumulation.push(character); // @Speed? This is probably hella slow. Is .join() faster? 163 | character = python_interpreter.stderr.read(1); 164 | } 165 | }); 166 | 167 | function python_exec(python_code) { 168 | assert(success_queue.length !== 0 && fail_queue.length !== 0); // should never have something on the queue without a success and error handler 169 | python_interpreter.stdin.write(`__EXEC:${python_code.replace(/\n/g, '__NEWLINE__')}\n`); 170 | }; 171 | 172 | var blocks = []; 173 | module.exports.blocks = blocks; 174 | 175 | function generate_unique_name() { 176 | // 'a', 'b', 'c', ... 177 | var existing_names = blocks.map(block => block.name); 178 | var alpha_index = 'a'; 179 | var current_test_name = alpha_index; 180 | while (existing_names.indexOf(current_test_name) >= 0) { 181 | alpha_index = String.fromCharCode(alpha_index.charCodeAt(0) + 1); 182 | current_test_name = alpha_index; 183 | } 184 | return current_test_name; 185 | } 186 | function generate_unique_name_from_name(test_name) { 187 | // 'usernames' => 'usernames_1' => 'usernames_2' 188 | var existing_names = blocks.map(block => block.name); 189 | var number_index = 0; 190 | var current_test_name = test_name.replace(/\s/g, '_'); 191 | if (_.has(filbert.pythonRuntime, current_test_name) || _.has(filbert.pythonRuntime.functions, current_test_name) || _.has(filbert.pythonRuntime.ops, current_test_name)) { 192 | 193 | // e.g. someone tries to name something 'sum' or 'json' 194 | current_test_name = '_' + current_test_name; 195 | } 196 | while (existing_names.indexOf(current_test_name) >= 0) { 197 | number_index += 1; 198 | current_test_name = test_name + '_' + number_index; 199 | } 200 | return current_test_name; 201 | } 202 | 203 | // Basically, queue up commands to run on the python processes's stdin, 204 | // and queue up what to do if a command succeeds or fails as well. If 205 | // it succeeds, then the fail function is thrown away. If it fails, 206 | // then the succeed function is thrown away. 207 | var success_queue = []; 208 | var fail_queue = []; 209 | 210 | var imports = []; 211 | module.exports.imports = imports; 212 | 213 | class Import {} 214 | module.exports.Import = Import; 215 | 216 | function create_import(code) { 217 | var import_ = new Import(); 218 | import_.code = code; 219 | 220 | imports.push(import_); 221 | return import_; 222 | } 223 | module.exports.create_import = create_import; 224 | 225 | function change_import_code(import_, code) { 226 | import_.code = code; 227 | 228 | success_queue.push(function (data) { 229 | import_.error = null; 230 | ui.render_import_error(import_); 231 | }); 232 | fail_queue.push(function (data) { 233 | import_.error = data; 234 | ui.render_import_error(import_); 235 | }); 236 | python_exec(import_.code); 237 | } 238 | module.exports.change_import_code = change_import_code; 239 | 240 | class Block { 241 | 242 | constructor() { 243 | this.depends_on = []; 244 | this.is_string_concat = false; 245 | } //JSONType; 246 | 247 | 248 | toString() { 249 | return `Block ${this.name}`; 250 | } 251 | } 252 | module.exports.Block = Block; 253 | 254 | function create_block(name, code) { 255 | var block = new Block(); 256 | if (name) { 257 | block.name = generate_unique_name_from_name(name); 258 | } else { 259 | block.name = generate_unique_name(); 260 | } 261 | block.code = code; 262 | 263 | blocks.push(block); 264 | 265 | python_declare(block); 266 | 267 | recompute_this_and_dependent_blocks(block); 268 | 269 | return block; 270 | } 271 | module.exports.create_block = create_block; 272 | 273 | // === b === 274 | // a.split('\n') 275 | // 'itunes:duration' in b_ 276 | 277 | // (want to be able to refer to "self", e.g. b) 278 | 279 | function python_declare(block) { 280 | var code = block.code; 281 | if (block.is_string_concat) { 282 | var token_re = /\$\{.+?\}/g; // e.g. ${butts} 283 | var tokens = code.match(token_re); 284 | if (tokens && tokens.length) { 285 | tokens.forEach(token => code = code.replace(token, '{}')); 286 | var expressions = tokens.map(token => token.replace(/^\$\{/, '').replace(/\}$/, '')); // remove ${ and } from ${butts}, leaving only 'butts' 287 | code = `return """${code}""".format(${expressions.join(',')})`; 288 | } else { 289 | code = `return """${code}"""`; 290 | } 291 | } 292 | 293 | var python_filter_function_declaration = ''; 294 | var filter_code = block.filter_clause; // stupid workaround 295 | if (filter_code) { 296 | var python_filter_function_name = `_${block.name}_filter_function`; 297 | 298 | // a_ means 'for a_ in a: ...' 299 | var map_variables = _.uniq(get_user_identifiers(filter_code).filter(name => _.last(name) == '_' && name !== block.name + '_')); 300 | 301 | if (filter_code.indexOf('return') > -1) { 302 | // function 303 | if (map_variables.length > 0) { 304 | // need arguments 305 | python_filter_function_declaration = `def ${python_filter_function_name}(${block.name}_, ${map_variables.join(', ')}): 306 | ${filter_code.split('\n').join('\n ')}`; 307 | } else { 308 | python_filter_function_declaration = `def ${python_filter_function_name}(): 309 | ${filter_code.split('\n').join('\n ')}`; 310 | } 311 | } else { 312 | // an expression with 0 or more variables 313 | python_filter_function_declaration = `${python_filter_function_name} = lambda ${block.name}_, ${map_variables.join(', ')}: (${filter_code})`; 314 | // ^-- filter function can refer to its own block's results 315 | } 316 | } 317 | 318 | var python_function_declaration = ''; 319 | var python_function_name = `_${block.name}_function`; 320 | var argument_names = _.uniq(get_user_identifiers(code)); // can't use Block.depends_on because some identifiers are name e.g. 'a_' 321 | 322 | 323 | // turn a() into function, _a_function() 324 | block.depends_on.forEach(function (parent_block) { 325 | var re = new RegExp('\\b(' + parent_block.name + ')\\(', 'g'); 326 | code = code.replace(re, '_$1_function('); 327 | }); 328 | 329 | if (code.indexOf('return') > -1) { 330 | // function 331 | python_function_declaration = `def ${python_function_name}(${argument_names}): 332 | ${code.split('\n').join('\n ')}`; 333 | } else { 334 | // lambda for just an expression 335 | python_function_declaration = `${python_function_name} = lambda ${argument_names}: (${code})`; 336 | } 337 | 338 | var no_op = function () {}; 339 | var success = function (data) { 340 | block.error = ''; 341 | ui.render_error(block); 342 | }; 343 | var fail = function (data) { 344 | success_queue[0] = no_op; // remove callback handling running this function 345 | success_queue[1] = no_op; // remove callback handling getting the result of this function 346 | fail_queue[0] = no_op; // remove callback handling running this function 347 | fail_queue[1] = no_op; // remove callback handling getting the result of this function 348 | 349 | block.error = data; 350 | ui.render_error(block); 351 | }; 352 | 353 | var filter_declaraction_success = function (data) { 354 | block.error = ''; 355 | ui.render_error(block); 356 | }; 357 | var filter_declaration_fail = function (data) { 358 | if (python_function_declaration) { 359 | success_queue[0] = no_op; // remove callback for declaring the non-filter function 360 | success_queue[1] = no_op; // remove callback for running the function 361 | success_queue[2] = no_op; // remove callback handling getting the result of this function 362 | fail_queue[0] = no_op; // remove callback for declaring the non-filter function 363 | fail_queue[1] = no_op; // remove callback handling running this function 364 | fail_queue[2] = no_op; // remove callback handling getting the result of this function 365 | } else { 366 | success_queue[0] = no_op; 367 | success_queue[1] = no_op; 368 | fail_queue[0] = no_op; // remove callback calling 369 | fail_queue[1] = no_op; // remove callback that handles getting value of variable 370 | } 371 | 372 | block.error = data; 373 | ui.render_error(block); 374 | }; 375 | 376 | if (python_filter_function_declaration) { 377 | success_queue.push(success); 378 | fail_queue.push(fail); 379 | python_exec(python_filter_function_declaration); 380 | // console.log('declaring python filter:', python_filter_function_declaration); 381 | } 382 | 383 | if (python_function_declaration) { 384 | success_queue.push(success); 385 | fail_queue.push(fail); 386 | python_exec(python_function_declaration); 387 | // console.log('declaring python:', python_function_declaration); 388 | } 389 | } 390 | 391 | function python_run(block) { 392 | 393 | var code = block.code; 394 | if (block.is_string_concat) { 395 | var token_re = /\$\{.+?\}/g; // e.g. ${butts} 396 | var tokens = code.match(token_re); 397 | if (tokens && tokens.length) { 398 | tokens.forEach(token => code = code.replace(token, '{}')); 399 | var expressions = tokens.map(token => token.replace(/^\$\{/, '').replace(/\}$/, '')); // remove ${ and } from ${butts}, leaving only 'butts' 400 | code = `"""${code}""".format(${expressions.join(',')})`; 401 | } else { 402 | code = `"""${code}"""`; 403 | } 404 | } 405 | 406 | var python_code; 407 | var python_expression; 408 | 409 | // a_ means 'for a_ in a: ...' 410 | var argument_names = _.uniq(get_user_identifiers(code)); 411 | var has_mapped_variables = _.any(argument_names, name => name.endsWith('_')); 412 | if (has_mapped_variables) { 413 | var zip_variables = argument_names.map(name => { 414 | if (name.endsWith('_')) { 415 | return name.slice(0, name.length - 1); // remove trailing '_' 416 | } 417 | return `_iter_repeat(${name})`; // make value into an iterator 418 | }); 419 | 420 | // can't just use map(f, a,b,c) because python's map uses zip_longest behavior 421 | python_expression = `starmap(_${block.name}_function, izip(${zip_variables.join(',')}))`; // 'startmap(_a_function, izip(a, b))' 422 | } else { 423 | python_expression = `_${block.name}_function(${argument_names})`; 424 | } 425 | 426 | // @TODO @Robustness: should be able to have filter clause using arguments (a_, b) - mapped and non-mapped, right now ignoring non-mapped arguments 427 | if (block.filter_clause) { 428 | var filter_map_variables = _.uniq(get_user_identifiers(block.filter_clause).filter(name => _.last(name) == '_' && name !== block.name + '_')); 429 | var filter_zip_variables = filter_map_variables.map(name => name.slice(0, name.length - 1)); // 'a_' => 'a' 430 | python_expression = `tuple( starfilter(_${block.name}_filter_function, izip(${filter_zip_variables.join(',')}), ${python_expression}) )`; 431 | } else if (python_expression.indexOf('starmap') > -1) { 432 | // if auto-mapping, make sure to not return iterator and instead return whole list 433 | python_expression = `tuple(${python_expression})`; 434 | } 435 | 436 | python_code = `${block.name} = ${python_expression}`; 437 | 438 | // console.log('running python:', python_code); 439 | 440 | var no_op = function () {}; 441 | var success = function (data) { 442 | block.error = ''; 443 | ui.render_error(block); 444 | }; 445 | var fail = function (data) { 446 | success_queue[0] = no_op; // remove callback trying to get value of this function 447 | fail_queue[0] = no_op; // remove callback trying to get value of this function 448 | 449 | block.error = data; 450 | ui.render_error(block); 451 | }; 452 | 453 | success_queue.push(success); 454 | fail_queue.push(fail); 455 | python_exec(python_code); 456 | } 457 | 458 | function get_python_value(block) { 459 | // get the value of an expression 460 | success_queue.push(function (data) { 461 | try { 462 | // for some reason, eval-ing JSON object literals is a syntax error?? 463 | eval(`block.output = ${data}`); 464 | block.error = ''; 465 | ui.render_error(block); 466 | } catch (e) { 467 | throw `Error on evaluating. Data coming out of 'Block ${block.name}' is bad: ${data}`; 468 | } 469 | 470 | ui.render_output(block); 471 | }); 472 | fail_queue.push(function (data) { 473 | block.error = `${data}`; 474 | ui.render_error(block); 475 | }); 476 | // console.log('getting python value:', block.name) 477 | python_interpreter.stdin.write(`__EVAL:stringify(${block.name})\n`); 478 | } 479 | 480 | function change_name(block, name) { 481 | var old_name = block.name; 482 | block.name = generate_unique_name_from_name(name); 483 | 484 | // Update references to this block in other blocks' code 485 | // Anything that depends on `block` should have its code updated 486 | blocks.forEach(test_block => { 487 | if (test_block.depends_on.includes(block)) { 488 | if (test_block.is_string_concat) { 489 | var token_re = /\$\{.+?\}/g; // e.g. ${butts} 490 | var tokens = test_block.code.match(token_re); 491 | if (tokens && tokens.length) { 492 | var expressions = tokens.map(token => token.replace(/^\$\{/, '').replace(/\}$/, '')); // remove ${ and } from ${butts}, leaving only 'butts' 493 | _.zip(tokens, expressions).forEach(function (tokenexpression) { 494 | var token = tokenexpression[0]; 495 | var expression = tokenexpression[1]; 496 | var new_token = '${' + replace_python_names(expression, old_name, block.name) + '}'; 497 | test_block.code = test_block.code.replace(token, new_token); 498 | }); 499 | } 500 | ui.render_code(test_block); 501 | } else { 502 | test_block.code = replace_python_names(test_block.code, old_name, block.name); 503 | ui.render_code(test_block); 504 | if (test_block.filter_clause) { 505 | test_block.filter_clause = replace_python_names(test_block.filter_clause, old_name, block.name); 506 | ui.render_filter_clause(test_block); 507 | } 508 | } 509 | } 510 | 511 | var ui_block = _.find(ui.ui_blocks, iter_ui_block => iter_ui_block.block == test_block); 512 | if (ui_block.visualization_options) { 513 | ui_block.visualization_options.change_name(old_name, block.name); 514 | } 515 | }); 516 | if (block.filter_clause) { 517 | block.filter_clause = replace_python_names(block.filter_clause, old_name, block.name); 518 | ui.render_filter_clause(block, old_name); 519 | } 520 | 521 | var old_function_name = `_${old_name}_function`; 522 | var new_function_name = `_${block.name}_function`; 523 | var python_code = `${block.name} = ${old_name}; del ${old_name}; ${new_function_name} = ${old_function_name}; del ${old_function_name};`; 524 | 525 | if (block.filter_clause) { 526 | var old_filter_function_name = `_${old_name}_filter_function`; 527 | var new_filter_function_name = `_${block.name}_filter_function`; 528 | 529 | python_code += `${new_filter_function_name} = ${old_filter_function_name}; del ${old_filter_function_name}; ${python_code}`; 530 | } 531 | // console.log('executing python in `change_name`:', python_code); 532 | var callback = () => {}; 533 | success_queue.push(callback); 534 | fail_queue.push(callback); 535 | python_exec(python_code); 536 | 537 | return block.name; 538 | } 539 | module.exports.change_name = change_name; 540 | 541 | function set_dependencies(block) { 542 | 543 | var names = []; 544 | try { 545 | if (block.is_string_concat) { 546 | // @Cleanup @Refactor: move this logic to more central location 547 | var token_re = /\$\{.+?\}/g; // e.g. ${butts} 548 | var tokens = block.code.match(token_re); 549 | if (tokens && tokens.length) { 550 | var expressions = tokens.map(token => token.replace(/^\$\{/, '').replace(/\}$/, '')); // remove ${ and } from ${butts}, leaving only 'butts' 551 | expressions.forEach(expression => { 552 | var new_names = get_user_identifiers(expression); 553 | new_names.forEach(name => names.push(name)); 554 | }); 555 | } 556 | } else { 557 | names = get_user_identifiers(block.code); 558 | 559 | // TODO: do more robust cycle detection 560 | // For now, just trying to catch dumb mistakes 561 | var is_referrering_to_self = false; 562 | names.forEach(name => { 563 | if (name == block.name || name.replace(/_$/, '') == block.name) { 564 | is_referrering_to_self = true; 565 | } 566 | }); 567 | if (is_referrering_to_self) throw "Can't refer to own block: " + block.name; 568 | } 569 | } catch (e) { 570 | // syntax error in filbert parsing most likely 571 | block.error = e; 572 | ui.render_error(block); 573 | return false; 574 | } 575 | 576 | if (block.filter_clause) { 577 | try { 578 | get_user_identifiers(block.filter_clause).forEach(function (name) { 579 | // don't include self-references even though they're valid in filter clauss 580 | if (name !== block.name && name.slice(0, name.length - 1) !== block.name) { 581 | names.push(name); 582 | } 583 | }); 584 | } catch (e) { 585 | // syntax error in filbert parsing most likely 586 | block.error = e; 587 | ui.render_error(block); 588 | return false; 589 | } 590 | } 591 | 592 | block.depends_on = blocks.filter(function (test_block) { 593 | return names.includes(test_block.name) || names.includes(test_block.name + '_'); 594 | }); 595 | return true; 596 | } 597 | 598 | function change_code(block, code) { 599 | block.code = code; 600 | 601 | var success = set_dependencies(block); 602 | if (!success) return; 603 | 604 | python_declare(block); 605 | 606 | recompute_this_and_dependent_blocks(block); 607 | } 608 | module.exports.change_code = change_code; 609 | 610 | function change_filter_clause(block, code) { 611 | block.filter_clause = code; 612 | 613 | set_dependencies(block); 614 | 615 | python_declare(block); 616 | 617 | recompute_this_and_dependent_blocks(block); 618 | } 619 | module.exports.change_filter_clause = change_filter_clause; 620 | 621 | function change_sort_clause(block, code) { 622 | block.sort_clause = code; 623 | 624 | set_dependencies(block); 625 | 626 | python_declare(block); 627 | 628 | recompute_this_and_dependent_blocks(block); 629 | } 630 | module.exports.change_sort_clause = change_sort_clause; 631 | 632 | function remove_filter_clause(block) { 633 | block.filter_clause = null; 634 | 635 | // @TODO: delete filter clause, rerun code with filter removed 636 | var python_code = `del _${block.name}_filter_function;`; 637 | 638 | var no_op = function () {}; 639 | success_queue.push(no_op); 640 | fail_queue.push(no_op); 641 | 642 | // console.log('executing python code from `remove_filter_clause`:', python_code); 643 | python_exec(python_code); 644 | 645 | python_declare(block); 646 | recompute_this_and_dependent_blocks(block); 647 | } 648 | module.exports.remove_filter_clause = remove_filter_clause; 649 | 650 | function remove_sort_clause(block) { 651 | // @TODO 652 | } 653 | module.exports.remove_sort_clause = remove_sort_clause; 654 | 655 | function delete_(block_to_delete) { 656 | throw 'Need to delete block from interpreter'; 657 | // blocks = _.reject(blocks, block => block === block_to_delete); 658 | // blocks.forEach(function(block) { 659 | // block.depends_on = _.reject(block.depends_on, 660 | // }) 661 | } 662 | module.exports.delete_ = delete_; 663 | 664 | function recompute_this_and_dependent_blocks(updatedBlock) { 665 | // if a block's value changes, update it and go update all the other blocks that depend on that block 666 | var updated_blocks = [updatedBlock]; 667 | while (updated_blocks.length) { 668 | var block = updated_blocks.shift(); // pop off front of array 669 | python_run(block); 670 | get_python_value(block); 671 | blocks.forEach(function (should_update_block) { 672 | if (should_update_block.depends_on.includes(block)) { 673 | updated_blocks.push(should_update_block); 674 | } 675 | }); 676 | } 677 | } 678 | module.exports.recompute_this_and_dependent_blocks = recompute_this_and_dependent_blocks; 679 | -------------------------------------------------------------------------------- /staged_src/interpreter.py: -------------------------------------------------------------------------------- 1 | import sys 2 | import json 3 | from itertools import izip, starmap, izip_longest, repeat 4 | from datetime import datetime 5 | 6 | class FlowsheetsJSONEncoder(json.JSONEncoder): 7 | def default(self, obj): 8 | try: 9 | return json.dumps(obj) 10 | except: 11 | d = {} 12 | for key in dir(obj): 13 | if key.startswith('__'): 14 | continue 15 | try: 16 | d[key] = json.dumps(getattr(obj, key, None)) 17 | except: 18 | d[key] = repr(getattr(obj, key, None)) 19 | d['repr'] = repr(obj) 20 | return d 21 | 22 | def stringify(obj): 23 | return json.dumps(obj, sort_keys=True, cls=FlowsheetsJSONEncoder) 24 | 25 | def starfilter(filter_expression, args_iterable, map_expression_result_iterable): 26 | # _c_filter_function(c_, a_,b_) = ... 27 | # c = starfilter( _c_filter_function, izip(d,e), starmap(_c_function, izip(a,b)) ) 28 | # c = starfilter( _c_filter_function, izip(d,e), a.split('\n') ) 29 | 30 | empty = tuple() 31 | for args, result in izip_longest(args_iterable, map_expression_result_iterable): 32 | if filter_expression(result, *(args or empty)): 33 | yield result 34 | 35 | user_globals = { 36 | 'stringify': stringify, 37 | 'izip': izip, 38 | 'starmap': starmap, 39 | 'starfilter': starfilter, 40 | '_iter_repeat': repeat, 41 | } 42 | 43 | with open(str(datetime.now())+'.txt', 'wb') as log_file: 44 | 45 | while True: 46 | 47 | # I would use sys.stdin.readline() here, but it seems like there's a bug where 48 | # if input is being sent in too fast then readlines takes incoming pieces instead of 49 | # separating by new line. 50 | 51 | accumulating_payload = [] 52 | next_character = sys.stdin.read(1) 53 | # Data format is one line per command, with newlines within a command displayed as __NEWLINE__ 54 | while next_character != '\n': 55 | accumulating_payload.append(next_character) 56 | next_character = sys.stdin.read(1) # Note: I believe the program execution is paused while waiting for the next character. 57 | 58 | payload = ''.join(accumulating_payload) 59 | # payload = '__EXEC:a = 1' 60 | # payload = '__EVAL:json.dumps(a)' 61 | 62 | # payload = '__EXEC:def _b_function():__NEWLINE__x = 5__NEWLINE__return x' 63 | # payload = '__EXEC:b = _b_function()' 64 | # payload = '__EVAL:json.dumps(b)' 65 | 66 | if payload: 67 | 68 | cleaned_payload = payload.replace('__NEWLINE__', '\n') 69 | 70 | try: 71 | if cleaned_payload.startswith('__EXEC:'): 72 | cleaned_payload = cleaned_payload[7:] 73 | exec(cleaned_payload, user_globals) 74 | sys.stdout.write('Payload executed successfully: {}\n'.format(cleaned_payload.replace('\n', '__NEWLINE__'))) 75 | sys.stdout.flush() 76 | 77 | elif cleaned_payload.startswith('__EVAL:'): 78 | cleaned_payload = cleaned_payload[7:] 79 | sys.stdout.write(eval(cleaned_payload, user_globals)+'\n') 80 | sys.stdout.flush() 81 | 82 | else: 83 | raise Exception('Payload did not start with execution instruction __EXEC or __EVAL') 84 | 85 | 86 | except Exception as e: 87 | sys.stderr.write('{}\n'.format(e)) 88 | sys.stderr.flush() 89 | 90 | log_file.write(cleaned_payload+'\n') 91 | log_globals = {key: value for key,value in user_globals.iteritems() if key not in ('__builtins__', 'stringify', 'izip', 'starmap', 'starfilter', '_iter_repeat')} 92 | # log_file.write('current globals: {}\n'.format(log_globals)) 93 | log_file.flush() -------------------------------------------------------------------------------- /staged_src/main.js: -------------------------------------------------------------------------------- 1 | const electron = require('electron'); 2 | // Module to control application life. 3 | const app = electron.app; 4 | // Module to create native browser window. 5 | const BrowserWindow = electron.BrowserWindow; 6 | 7 | const path = require('path'); 8 | const url = require('url'); 9 | 10 | // Keep a global reference of the window object, if you don't, the window will 11 | // be closed automatically when the JavaScript object is garbage collected. 12 | let mainWindow; 13 | 14 | function createWindow() { 15 | // Create the browser window. 16 | mainWindow = new BrowserWindow({ width: 1900, height: 1000 }); 17 | 18 | // and load the index.html of the app. 19 | mainWindow.loadURL(url.format({ 20 | pathname: path.join(__dirname, 'index.html'), 21 | protocol: 'file:', 22 | slashes: true 23 | })); 24 | 25 | // Open the DevTools. 26 | mainWindow.webContents.openDevTools(); 27 | 28 | // Emitted when the window is closed. 29 | mainWindow.on('closed', function () { 30 | // Dereference the window object, usually you would store windows 31 | // in an array if your app supports multi windows, this is the time 32 | // when you should delete the corresponding element. 33 | mainWindow = null; 34 | }); 35 | } 36 | 37 | // This method will be called when Electron has finished 38 | // initialization and is ready to create browser windows. 39 | // Some APIs can only be used after this event occurs. 40 | app.on('ready', createWindow); 41 | 42 | // Quit when all windows are closed. 43 | app.on('window-all-closed', function () { 44 | // On OS X it is common for applications and their menu bar 45 | // to stay active until the user quits explicitly with Cmd + Q 46 | if (process.platform !== 'darwin') { 47 | app.quit(); 48 | } 49 | }); 50 | 51 | app.on('activate', function () { 52 | // On OS X it's common to re-create a window in the app when the 53 | // dock icon is clicked and there are no other windows open. 54 | if (mainWindow === null) { 55 | createWindow(); 56 | } 57 | }); 58 | 59 | app.on('will-quit', function () { 60 | // try to kill python process so it doesn't spin out of control 61 | var ps = require('ps-node'); 62 | 63 | ps.lookup({ 64 | command: 'python' 65 | }, function (err, resultList) { 66 | if (err) { 67 | throw new Error(err); 68 | } 69 | 70 | resultList.forEach(function (python_process) { 71 | if (python_process && python_process.arguments[0].endsWith('interpreter.py')) { 72 | ps.kill(python_process.pid); 73 | } 74 | }); 75 | }); 76 | }); -------------------------------------------------------------------------------- /staged_src/renderer.js: -------------------------------------------------------------------------------- 1 | // 2 | if (typeof window === 'undefined') { 3 | const Window = require('window'); 4 | window = new Window(); 5 | } 6 | navigator = window.navigator; 7 | document = window.document; 8 | 9 | const $ = require('jquery'); 10 | const _ = require('underscore'); 11 | const React = require('react'); 12 | const ReactDOM = require('react-dom'); 13 | const CodeMirror = require('codemirror'); 14 | require('codemirror/mode/python/python'); 15 | require('codemirror/mode/javascript/javascript'); 16 | 17 | var rows = 300; 18 | var columns = 30; 19 | var cell_width = 88; // including borders 20 | var cell_height = 19; // including borders 21 | module.exports.cell_height = cell_height; 22 | 23 | 24 | const visualizations = require('./visualizations'); 25 | const interpreter = require('./interpreter'); 26 | const Block = interpreter.Block; 27 | const Import = interpreter.Import; 28 | 29 | // @Cleanup: probably move to utils at some point 30 | function clamp(num, min, max) { 31 | if (num < min) { 32 | return min; 33 | } else if (num > max) { 34 | return max; 35 | } 36 | return num; 37 | } 38 | 39 | var ui_blocks = []; 40 | module.exports.ui_blocks = ui_blocks; 41 | 42 | class UIBlock { 43 | 44 | constructor() { 45 | this.should_auto_resize = true; 46 | this.width_in_columns = 1; 47 | 48 | this.name_height = 1; 49 | this.code_height = 1; 50 | this.filter_clause_height = 0; 51 | this.sort_clause_height = 0; 52 | this.output_height = 1; 53 | this.visualization = visualizations.DefaultViz; 54 | this.visualization_options_height = 0; 55 | } 56 | }; 57 | module.exports.UIBlock = UIBlock; 58 | 59 | class Move_Drag { 60 | 61 | is_dragging(x, y) { 62 | var dx = Math.abs(this.start_x - x); 63 | var dy = Math.abs(this.start_y - y); 64 | return Math.max(dx, dy) > 3; 65 | } 66 | } 67 | 68 | class Resize_Drag { 69 | constructor() { 70 | this.ui_block = create_ui_block(); 71 | this.x = 0; 72 | this.y = 0; 73 | } 74 | } 75 | 76 | class Resize_Code_Drag {} 77 | 78 | var resize_drag = null; 79 | var move_drag = null; 80 | var resize_code_drag = null; 81 | 82 | function initialize() { 83 | initialize_grid(); 84 | initialize_sidebar(); 85 | 86 | $('#new-import').on('click', function () { 87 | create_and_render_import(); 88 | }); 89 | } 90 | module.exports.initialize = initialize; 91 | 92 | function initialize_grid() { 93 | var canvas = document.querySelector('canvas#main') || document.createElement('canvas'); 94 | var height = rows * cell_height; 95 | var width = columns * cell_width; 96 | 97 | // $FlowFixMe 98 | canvas.width = width; 99 | // $FlowFixMe 100 | canvas.height = height; 101 | 102 | // $FlowFixMe 103 | var ctx = canvas.getContext('2d'); 104 | 105 | ctx.translate(0.5, 0.5); 106 | for (var row = 0; row < rows; ++row) { 107 | // draw rows horizontally 108 | ctx.beginPath(); 109 | ctx.strokeStyle = '#ddd'; 110 | ctx.lineWidth = 1; 111 | ctx.moveTo(0, row * cell_height); 112 | ctx.lineTo(width, row * cell_height); 113 | ctx.stroke(); 114 | ctx.closePath(); 115 | } 116 | 117 | for (var column = 0; column < columns; ++column) { 118 | ctx.beginPath(); 119 | ctx.strokeStyle = '#ddd'; 120 | ctx.lineWidth = 1; 121 | ctx.moveTo(column * cell_width, 0); 122 | ctx.lineTo(column * cell_width, height); 123 | ctx.stroke(); 124 | ctx.closePath(); 125 | } 126 | ctx.translate(-0.5, -0.5); 127 | 128 | $(canvas).on('click', function (evt) { 129 | var column = Math.floor((evt.offsetX - 2) / cell_width); 130 | var row = Math.floor((evt.offsetY - 2) / cell_height); 131 | 132 | var block = interpreter.create_block(null, '1+1'); 133 | create_and_render_block(block, row, column); 134 | }); 135 | 136 | $('body').on('mouseup', reset_dragging); 137 | 138 | $('body').on('mousemove', function (evt) { 139 | if (resize_drag) { 140 | var ui_block = resize_drag.ui_block; 141 | ui_block.should_auto_resize = false; 142 | 143 | var dx = evt.pageX - resize_drag.x; 144 | var dy = evt.pageY - resize_drag.y; 145 | 146 | var new_columns = Math.floor(dx / cell_width); 147 | if (dx % cell_width > cell_width / 3) { 148 | new_columns = Math.ceil(dx / cell_width); 149 | } 150 | ui_block.width_in_columns = clamp(resize_drag.original_width_in_columns + new_columns, 1, columns); 151 | 152 | var new_rows = Math.floor(dy / cell_height); 153 | if (dy % cell_height > cell_height / 3) { 154 | new_rows = Math.ceil(dy / cell_height); 155 | } 156 | var previous_output_height = ui_block.output_height; 157 | ui_block.output_height = clamp(resize_drag.original_output_height + new_rows, 1, rows); 158 | 159 | if (ui_block.output_height > previous_output_height && !ui_block.block.error) { 160 | render_visualization(ui_block, ui_block.visualization); 161 | } 162 | resize(ui_block); 163 | } else if (move_drag) { 164 | if (move_drag.is_dragging(evt.pageX, evt.pageY)) { 165 | var offset = $('#main').offset(); 166 | var x_wrt_grid = evt.pageX - offset.left + 1; 167 | var y_wrt_grid = evt.pageY - offset.top + 1; 168 | 169 | move_drag.ui_block.row = clamp(Math.floor(y_wrt_grid / cell_height), 0, rows); 170 | move_drag.ui_block.column = clamp(Math.floor(x_wrt_grid / cell_width), 0, columns); 171 | 172 | resize(move_drag.ui_block); 173 | } 174 | } else if (resize_code_drag) { 175 | var y_wrt_grid = evt.pageY - $('#main').offset().top + 1; 176 | var ui_block = resize_code_drag.ui_block; 177 | 178 | resize_code_drag.ui_block.code_height = clamp(Math.ceil((y_wrt_grid - (ui_block.row + ui_block.name_height) * cell_height) / cell_height) - 1, 1, rows); // @Cleanup should be rows-block height 179 | resize(resize_code_drag.ui_block); 180 | } 181 | }); 182 | } 183 | 184 | function initialize_sidebar() { 185 | var $expand_collapse_button = $('#sidebar #collapse'); 186 | $expand_collapse_button.on('click', function (evt) { 187 | if ($('#sidebar').width() > 15) { 188 | $('#sidebar').width(10); 189 | $(evt.target).text('+'); 190 | } else { 191 | $('#sidebar').width(500); 192 | $(evt.target).text('-'); 193 | } 194 | }); 195 | 196 | var $visualization_editor = $('
'); 197 | 198 | var code = `class CustomViz extends React.Component { 199 | constructor(props) { 200 | super(props); 201 | } 202 | flash() { 203 | this.refs.container.style.backgroundColor = 'yellow'; 204 | setTimeout(()=> this.refs.container.style.backgroundColor = 'transparent', 300); 205 | } 206 | componentDidUpdate(props) { 207 | this.flash(); 208 | } 209 | componentDidMount() { 210 | this.flash(); 211 | } 212 | render() { 213 | return React.createElement('div', {ref: 'container'}, this.props.block.output) 214 | } 215 | }`; 216 | 217 | var codemirror = CodeMirror($visualization_editor.get(0), { 218 | value: code, 219 | mode: 'javascript', 220 | tabSize: 2, 221 | scrollbarStyle: 'null', // just remove scrollbars for now for linux 222 | extraKeys: { 223 | 'Ctrl-Enter': function (instance) { 224 | var old_CustomViz = visualizations.CustomViz; 225 | try { 226 | 227 | var CustomViz = eval(instance.getValue()); 228 | $visualization_editor.css({ backgroundColor: 'white' }); 229 | } catch (e) { 230 | $visualization_editor.css({ backgroundColor: '#ffa9a9' }); 231 | return; 232 | } 233 | visualizations.CustomViz = CustomViz; 234 | ui_blocks.forEach(function (ui_block) { 235 | if (ui_block.visualization && ui_block.visualization === old_CustomViz) { 236 | ui_block.visualization = CustomViz; 237 | render_output(ui_block.block); 238 | } 239 | }); 240 | } 241 | } 242 | }); 243 | 244 | $visualization_editor.prepend('

Edit Visualization

'); 245 | 246 | $('#sidebar').append($visualization_editor); 247 | } 248 | 249 | function create_and_render_import() { 250 | var import_ = interpreter.create_import(''); 251 | 252 | var $input = $('').attr('class', 'import'); 253 | $input.on('change', function (evt) { 254 | interpreter.change_import_code(import_, evt.target.value); 255 | }); 256 | $('#imports').append($input); 257 | $input.focus(); 258 | } 259 | 260 | function reset_dragging(evt) { 261 | if (!resize_drag && !move_drag && !resize_code_drag) { 262 | return; 263 | } 264 | evt.preventDefault(); 265 | $('body').css('cursor', 'inherit'); 266 | $('input').css('cursor', 'inherit'); 267 | resize_drag = null; 268 | move_drag = null; 269 | resize_code_drag = null; 270 | } 271 | 272 | function create_ui_block() { 273 | var block = interpreter.create_block(null, '1+1'); 274 | return create_and_render_block(block, 0,0); 275 | } 276 | 277 | function create_and_render_block(block, row, column) { 278 | var ui_block = new UIBlock(); 279 | ui_block.row = row; 280 | ui_block.column = column; 281 | ui_block.block = block; 282 | ui_blocks.push(ui_block); 283 | 284 | var $block = $('
').attr('id', 'block-' + block.name).attr('class', 'block'); 285 | $block.css({ 286 | top: row * cell_height + 1, 287 | left: column * cell_width + 1, 288 | height: 3 * cell_height - 1, 289 | width: cell_width - 1 290 | }); 291 | 292 | // menu button 293 | var $menu_button = $('
').text('🔽').on('click', function () { 294 | var $current_menu = $block.find('.menu, .submenu'); 295 | if ($current_menu.length) { 296 | $current_menu.remove(); 297 | return; 298 | } 299 | 300 | var $menu = $('
    '); 301 | 302 | var $delete = $('
  • ').text('Delete (todo)').on('click', function () { 303 | delete_(ui_block); 304 | interpreter.delete_(block); 305 | }); 306 | $menu.append($delete); 307 | 308 | var $make_string = $('
  • ').html(block.is_string_concat ? 'Make string ✔' : 'Make string').on('click', function (evt) { 309 | var $make_string = $(evt.target); 310 | if (!block.is_string_concat) { 311 | block.is_string_concat = true; 312 | $block.find('.code .CodeMirror').addClass('is_string_concat'); 313 | } else { 314 | block.is_string_concat = false; 315 | $make_string.text('Make string'); 316 | $block.find('.code .CodeMirror').removeClass('is_string_concat'); 317 | } 318 | $block.find('.menu, .submenu').remove(); 319 | }); 320 | $menu.append($make_string); 321 | 322 | var text = block.filter_clause ? 'Remove Filter' : 'Add Filter'; 323 | var $filter = $('
  • ').text(text).on('click', function () { 324 | $block.find('.menu, .submenu').remove(); 325 | if (block.filter_clause) { 326 | interpreter.remove_filter_clause(block); 327 | 328 | $block.find('.filter_clause').hide(); 329 | ui_block.filter_clause_height = 0; 330 | resize(ui_block); 331 | 332 | return; 333 | } 334 | var cm = $block.find('.filter_clause').show().find('.CodeMirror').get(0).CodeMirror; 335 | cm.refresh(); 336 | cm.focus(); 337 | block.filter_clause = 'True'; 338 | ui_block.filter_clause_height = 1; 339 | 340 | resize(ui_block); 341 | }); 342 | $menu.append($filter); 343 | 344 | var text = block.sort_clause ? 'Remove Sort' : 'Add Sort (todo)'; 345 | var $sort = $('
  • ').text(text).on('click', function (evt) { 346 | $block.find('.menu, .submenu').remove(); 347 | if (block.sort_clause) { 348 | interpreter.remove_sort_clause(block); 349 | 350 | $block.find('.sort_clause').hide(); 351 | ui_block.sort_clause_height = 0; 352 | resize(ui_block); 353 | 354 | return; 355 | } 356 | var cm = $block.find('.sort_clause').show().find('.CodeMirror').get(0).CodeMirror; 357 | cm.refresh(); 358 | cm.focus(); 359 | block.sort_clause = block.name + '_'; 360 | ui_block.sort_clause_height = 1; 361 | 362 | resize(ui_block); 363 | }); 364 | $menu.append($sort); 365 | 366 | var $viz = $('
  • ').html('Visualization  ▶').on('mouseenter', function () { 367 | $block.find('.submenu').remove(); // remove old ones if they're still around 368 | 369 | var $submenu = $('
      ').css({ 370 | left: $menu.width() + 7, 371 | top: 30 372 | }); 373 | $block.append($submenu); 374 | 375 | _.each(visualizations, function (react_component, name) { 376 | var text = name; 377 | var $li = $('
    • ').html(name == ui_block.visualization.name ? '✔ ' + name : name).on('click', function () { 378 | $block.find('.menu, .submenu').remove(); 379 | ui_block.visualization = react_component; 380 | render_output(block); 381 | }); 382 | $submenu.append($li); 383 | }); 384 | }).on('mouseleave', function () { 385 | // $block.find('.submenu').remove(); 386 | }); 387 | $menu.append($viz); 388 | 389 | $block.prepend($menu); 390 | }); 391 | $block.append($menu_button); 392 | 393 | // name 394 | var $name = $('
      '); 395 | $name.append($('').val(block.name).attr('readOnly', true).on('change', function (evt) { 396 | var old_name = block.name; 397 | var new_name = interpreter.change_name(block, evt.target.value); 398 | 399 | var $input = $(evt.target); 400 | $input.blur(); // this could trigger the 'change' event if it's after the .val() call 401 | $input.val(new_name); // rewrite in case the name changed because of sanitization 402 | $input.attr('readOnly', true); 403 | 404 | $input.parents('.block').attr('id', 'block-' + new_name); 405 | }).on('mousedown', function (evt) { 406 | evt.preventDefault(); 407 | move_drag = new Move_Drag(); 408 | move_drag.ui_block = ui_block; 409 | move_drag.start_x = evt.pageX; 410 | move_drag.start_y = evt.pageY; 411 | $('body').css('cursor', 'move'); 412 | $(evt.target).css('cursor', 'move'); 413 | }).on('dblclick', function (evt) { 414 | evt.stopPropagation(); 415 | evt.preventDefault(); 416 | move_drag = null; 417 | $(evt.target).css('cursor', 'inherit'); 418 | 419 | // edit name 420 | var $target = $(evt.target); 421 | $target.removeAttr('readOnly'); 422 | $target.focus(); 423 | $target.select(); 424 | })); 425 | $block.append($name); 426 | 427 | function make_codemirror(element, code, ui_block_cell_name, update_func) { 428 | var codemirror = CodeMirror(element, { 429 | value: code, 430 | mode: 'python', 431 | autofocus: true, 432 | tabSize: 2, 433 | extraKeys: { 434 | 'Enter': function (instance) { 435 | var code = instance.getValue(); 436 | if (!_.includes(code, '\n')) { 437 | // if user presses enter when no newlines, run the code, otherwise put in newline 438 | update_func(block, code); 439 | } else { 440 | if (ui_block.should_auto_resize) { 441 | var _ui_block = ui_block; // stupid workaround: https://github.com/facebook/flow/issues/1730 442 | _ui_block[ui_block_cell_name] = _.filter(code, x => x == '\n').length + 2; 443 | resize(ui_block); 444 | } 445 | instance.replaceSelection('\n'); 446 | } 447 | }, 448 | 'Ctrl-Enter': function (instance) { 449 | var code = instance.getValue(); 450 | if (_.includes(code, '\n')) { 451 | // if user presses ctrl-enter when there are newlines, run the code 452 | update_func(block, code); 453 | } else { 454 | if (ui_block.should_auto_resize) { 455 | var _ui_block = ui_block; // stupid workaround: https://github.com/facebook/flow/issues/1730 456 | _ui_block[ui_block_cell_name] = _.filter(code, x => x == '\n').length + 2; 457 | resize(ui_block); 458 | } 459 | instance.replaceSelection('\n'); 460 | } 461 | }, 462 | 'Tab': function (instance) { 463 | var current_place = instance.getCursor(); 464 | var current_line = instance.getLine(current_place.line); 465 | if (current_place.ch == current_line.length && !current_line.match(/^\s*$/)) { 466 | var new_block = interpreter.create_block(null, '1+1'); 467 | create_and_render_block(new_block, ui_block.row, ui_block.column + ui_block.width_in_columns); 468 | } else { 469 | instance.replaceSelection(' '); // @Robustness: should use codemirror tab options to do this 470 | } 471 | } 472 | } 473 | }); 474 | codemirror.setSelection({ line: 0, ch: 0 }, { line: Infinity, ch: Infinity }); // highlight all code 475 | codemirror.on('change', function (instance) { 476 | // resize block automatically 477 | if (ui_block.should_auto_resize) { 478 | var code = instance.getValue(); 479 | var _ui_block = ui_block; // stupid workaround: https://github.com/facebook/flow/issues/1730 480 | _ui_block[ui_block_cell_name] = clamp(_.filter(code, x => x == '\n').length + 1, 1, 30); // limit pasting in long strings 481 | 482 | // make block width equal to the number of characters that will fit in a cell, 483 | var number_of_characters_that_will_fit_in_a_cell = 11.999; 484 | // make block's size fit the longest line in a code editor 485 | ui_block.width_in_columns = clamp(Math.ceil(_.last(_.sortBy(code.split('\n'), line => line.length)).length / number_of_characters_that_will_fit_in_a_cell), 1, 8); 486 | resize(ui_block); 487 | } 488 | 489 | // render references 490 | try { 491 | var marks = instance.getAllMarks(); 492 | marks.forEach(mark => mark.clear()); // destroy and recreate all codemirror marks 493 | 494 | var positions = interpreter.get_user_identifiers_with_positions(instance.getValue()); 495 | positions.forEach(position => { 496 | var element = $('').text(position.name).on('mouseenter', function (evt) { 497 | var $reference_block = $('#block-' + position.name); 498 | if (!$reference_block.length) { 499 | $reference_block = $('#block-' + position.name.slice(0, position.name.length - 1)); 500 | } 501 | $reference_block.addClass('flowsheets-highlighted'); 502 | }).on('mouseleave', function (evt) { 503 | var $reference_block = $('#block-' + position.name); 504 | if (!$reference_block.length) { 505 | $reference_block = $('#block-' + position.name.slice(0, position.name.length - 1)); 506 | } 507 | $reference_block.removeClass('flowsheets-highlighted'); 508 | }).get(0); 509 | 510 | instance.markText({ line: position.start_line, ch: position.start_ch }, { line: position.end_line, ch: position.end_ch }, { replacedWith: element }); 511 | }); 512 | } catch (e) { 513 | // almost certainly a python parse error in filbert from get_user_identifiers_with_positions 514 | } 515 | }); 516 | codemirror.on('blur', function (instance, evt) { 517 | instance.setSelection({ line: 0, ch: 0 }); 518 | 519 | // don't let UI display of code get out of sync with output 520 | var current_code = ui_block_cell_name == 'filter_clause_height' ? block.filter_clause : block.code; 521 | if (code !== instance.getValue()) { 522 | update_func(block, instance.getValue()); 523 | } 524 | }); 525 | codemirror.on('cursorActivity', function (instance) { 526 | var selection = instance.getSelection(); 527 | if (selection) { 528 | var $code = $(element); 529 | $code.find('.flowsheets-code-selection').remove(); 530 | 531 | $code.append($('
      ➡️
      ').on('mousedown', function (evt) { 532 | var new_block = interpreter.create_block(null, selection); 533 | create_and_render_block(new_block, ui_block.row, ui_block.column + ui_block.width_in_columns); 534 | 535 | instance.replaceSelection(new_block.name); 536 | update_func(block, instance.getValue()); 537 | })); 538 | } else { 539 | $(element).find('.flowsheets-code-selection').remove(); 540 | } 541 | }); 542 | 543 | return codemirror; 544 | }; 545 | 546 | // code 547 | var $code = $('
      '); 548 | var code_mirror = make_codemirror($code.get(0), block.code, 'code_height', interpreter.change_code); 549 | $block.append($code); 550 | 551 | // code resizer 552 | var $code_resizer = $('
      '); 553 | $code_resizer.on('mousedown', function (evt) { 554 | evt.preventDefault(); 555 | 556 | $('body').css('cursor', 'ns-resize'); 557 | ui_block.should_auto_resize = false; 558 | 559 | resize_code_drag = new Resize_Code_Drag(); 560 | resize_code_drag.start_row = ui_block.row + ui_block.code_height; 561 | resize_code_drag.ui_block = ui_block; 562 | }); 563 | $block.append($code_resizer); 564 | 565 | // filter clause 566 | var $filter_clause = $('
      ').hide(); 567 | var filter_codemirror = make_codemirror($filter_clause.get(0), 'True', 'filter_clause_height', interpreter.change_filter_clause); 568 | $block.append($filter_clause); 569 | 570 | // @TODO: need to add resizer UI for filter clause 571 | 572 | // sort clause 573 | var $sort_clause = $('
      ').hide(); 574 | var sort_codemirror = make_codemirror($sort_clause.get(0), block.name + '_', 'sort_clause_height', interpreter.change_sort_clause); 575 | $block.append($sort_clause); 576 | 577 | // output 578 | var $output = $('
      '); 579 | $block.append($output); 580 | 581 | var $visualization_options = $('
      '); 582 | $block.append($visualization_options); 583 | 584 | // resize handle 585 | var $resize = $('
      '); 586 | $resize.on('mousedown', function (evt) { 587 | evt.preventDefault(); 588 | 589 | resize_drag = new Resize_Drag(); 590 | resize_drag.x = evt.pageX; 591 | resize_drag.y = evt.pageY; 592 | resize_drag.ui_block = ui_block; 593 | resize_drag.original_width_in_columns = ui_block.width_in_columns; 594 | resize_drag.original_output_height = ui_block.output_height; 595 | 596 | $('body').css('cursor', 'nwse-resize'); 597 | }).on('mouseup', reset_dragging); 598 | $block.append($resize); 599 | 600 | $('#blocks').append($block); 601 | 602 | code_mirror.refresh(); // refresh in order to make text show up properly 603 | 604 | return ui_block; 605 | }; 606 | module.exports.create_and_render_block = create_and_render_block; 607 | 608 | function render_code(block) { 609 | var $code_input = $('#block-' + block.name).find('.code .CodeMirror'); 610 | $code_input.get(0).CodeMirror.setValue(block.code); 611 | fade_background_color($code_input, 1, 'rgba(220,220,220, '); 612 | } 613 | module.exports.render_code = render_code; 614 | 615 | function render_filter_clause(block, old_name) { 616 | var block_html_name = old_name ? old_name : block.name; 617 | var $filter_input = $('#block-' + block_html_name).find('.filter_clause .CodeMirror'); 618 | $filter_input.get(0).CodeMirror.setValue(block.filter_clause); 619 | fade_background_color($filter_input, 1, 'rgba(220,220,220, '); 620 | } 621 | module.exports.render_filter_clause = render_filter_clause; 622 | 623 | function render_error(block) { 624 | var $output = $('#block-' + block.name).find('.output input'); 625 | if (block.error) { 626 | $output.val(block.error); 627 | $output.css('background-color', '#f00'); 628 | } else { 629 | $output.css('background-color', 'inherit'); 630 | } 631 | } 632 | module.exports.render_error = render_error; 633 | 634 | function render_import_error(import_) { 635 | var index = interpreter.imports.indexOf(import_); 636 | if (import_.error) { 637 | $('#imports input').eq(index).css({ backgroundColor: 'red', color: 'white' }); 638 | } else { 639 | $('#imports input').eq(index).css({ backgroundColor: 'white', color: 'black' }); 640 | } 641 | } 642 | module.exports.render_import_error = render_import_error; 643 | 644 | function resize(ui_block) { 645 | var $block = $('#block-' + ui_block.block.name); 646 | 647 | $block.css({ 648 | top: ui_block.row * cell_height + 1, 649 | left: ui_block.column * cell_width + 1, 650 | width: ui_block.width_in_columns * cell_width - 1, 651 | height: cell_height * (ui_block.name_height + ui_block.code_height + ui_block.filter_clause_height + ui_block.sort_clause_height + ui_block.output_height + ui_block.visualization_options_height) - 1 652 | }); 653 | 654 | $block.find('.name input').width(cell_width * ui_block.width_in_columns - 7 /*padding*/); 655 | $block.find('.code').css('height', cell_height * ui_block.code_height - 1); 656 | $block.find('.filter_clause').css('height', cell_height * ui_block.filter_clause_height - 1); 657 | $block.find('.sort_clause').css('height', cell_height * ui_block.sort_clause_height - 1); 658 | $block.find('.output').css('height', cell_height * ui_block.output_height - 2); 659 | 660 | $block.find('.visualization_options').css('height', cell_height * ui_block.visualization_options_height - 1); 661 | if (ui_block.visualization_options_height == 0) { 662 | $block.find('.visualization_options').hide(); 663 | } else { 664 | $block.find('.visualization_options').show(); 665 | } 666 | } 667 | 668 | function render_output(block) { 669 | var ui_block = ui_blocks.filter(ui_block => ui_block.block === block)[0]; 670 | 671 | if (ui_block.should_auto_resize) { 672 | if (_.isArray(block.output) && _.isObject(block.output)) { 673 | ui_block.output_height = clamp(_.size(block.output), 1, 30); 674 | } else { 675 | ui_block.output_height = 1; 676 | } 677 | } 678 | 679 | var visualization = ui_block.visualization; 680 | 681 | if (visualization.options) { 682 | ui_block.visualization_options_height = 1; 683 | ui_block.visualization_options = ReactDOM.render(React.createElement(visualization.options, { 684 | block: block, 685 | ui_block: ui_block, 686 | render_visualization: render_visualization 687 | }), document.querySelector('#block-' + block.name + ' .visualization_options')); 688 | } else { 689 | ui_block.visualization_options_height = 0; 690 | ui_block.visualization_options = null; 691 | } 692 | 693 | render_visualization(ui_block, visualization); 694 | 695 | resize(ui_block); 696 | }; 697 | module.exports.render_output = render_output; 698 | function render_visualization(ui_block, visualization) { 699 | try { 700 | ReactDOM.render(React.createElement(visualization, { 701 | block: ui_block.block, 702 | ui_block: ui_block, 703 | blocks: interpreter.blocks, 704 | options: ui_block.visualization_options ? ui_block.visualization_options.state : null, 705 | options_component: ui_block.visualization_options 706 | }), document.querySelector('#block-' + ui_block.block.name + ' .output')); 707 | } catch (e) { 708 | ui_block.block.error = 'Error in visualization: ' + e; 709 | render_error(ui_block.block); 710 | } 711 | } 712 | 713 | function delete_(ui_block) { 714 | $('#block-' + ui_block.block.name).remove(); 715 | ui_blocks = _.reject(ui_blocks, ui_block_to_reject => ui_block_to_reject === ui_block); 716 | } 717 | 718 | function fade_background_color($element, alpha, color) { 719 | if (color[3] !== 'a') { 720 | throw 'Color needs to start with "rgba"'; 721 | } 722 | alpha -= .04; 723 | if (alpha < 0) { 724 | $element.css('background-color', 'transparent'); 725 | return; 726 | } 727 | var new_color = color.replace(' ', ` ${alpha})`); 728 | $element.css('background-color', new_color); 729 | setTimeout(fade_background_color, 1000 / 60, $element, alpha, color); 730 | } 731 | 732 | document.body.createTextRange = function() { 733 | return { 734 | setEnd: function(){}, 735 | setStart: function(){}, 736 | getBoundingClientRect: function(){ 737 | return {right: 0}; 738 | }, 739 | getClientRects: function(){ 740 | return { 741 | length: 0, 742 | left: 0, 743 | right: 0 744 | } 745 | } 746 | } 747 | } 748 | -------------------------------------------------------------------------------- /staged_src/style.less: -------------------------------------------------------------------------------- 1 | @cell_width: 88px; // including borders 2 | @cell_height: 19px; // including borders 3 | 4 | html, body { 5 | margin: 0; 6 | padding: 0; 7 | line-height: 1; 8 | } 9 | 10 | body { 11 | font: 14px/1 "Courier", monospace; 12 | color: black; 13 | margin: 10px; 14 | } 15 | 16 | #imports { 17 | display: inline-block; 18 | margin-bottom: 3px; 19 | } 20 | button#new-import { 21 | display: inline-block; 22 | vertical-align: top; 23 | } 24 | 25 | #blocks { 26 | position: relative; 27 | } 28 | .block { 29 | position: absolute; 30 | outline: 1px solid #999; 31 | 32 | &.flowsheets-highlighted { 33 | outline: 1.5px solid black; 34 | z-index: 1000; 35 | box-shadow: 0px 0px 13px rgba(0,0,0,.4); 36 | 37 | .name input { 38 | color: black; 39 | background-color: yellow; 40 | } 41 | .code { 42 | border-top: 1px solid #999; 43 | margin-top: -1px; 44 | } 45 | } 46 | 47 | .menu-button { 48 | opacity: 0; 49 | position: absolute; 50 | top: 5px; 51 | left: 4px; 52 | width: 14px; 53 | color: #777; 54 | font-size: 9px; 55 | cursor: default; 56 | } 57 | &:hover .menu-button { 58 | opacity: .6; 59 | } 60 | .menu-button:hover { 61 | opacity: 1; 62 | } 63 | 64 | .menu { 65 | z-index: 100; 66 | position: absolute; 67 | top: 16px; 68 | left: 4px; 69 | background-color: white; 70 | border: 1px solid #bbb; 71 | list-style: none; 72 | margin: 0; 73 | padding: 0; 74 | box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.24); 75 | 76 | 77 | } 78 | .menu li, .submenu li { 79 | padding: 6px 15px; 80 | cursor: default; 81 | font-family: "Helvetica Neue", Helvetica, sans-serif; 82 | } 83 | 84 | .menu li:hover, .submenu li:hover { 85 | background-color: #333; 86 | color: white; 87 | } 88 | 89 | .submenu { 90 | z-index: 100; 91 | background-color: white; 92 | border: 1px solid #bbb; 93 | position: absolute; 94 | padding: 0; 95 | list-style: none; 96 | box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.24); 97 | 98 | li { 99 | margin: 0; 100 | } 101 | } 102 | 103 | .name input { 104 | font-weight: bold; 105 | font-size: 14px; 106 | text-align: center; 107 | background-color: #000; 108 | color: white; 109 | } 110 | 111 | .name, .code, 112 | .filter_clause, 113 | .sort_clause, 114 | .output { 115 | height: @cell_height; 116 | overflow: auto; 117 | background-color: rgba(255,255,255,.6); 118 | 119 | // TODO: remove and put in default viz 120 | 121 | } 122 | .name input, 123 | .code input, 124 | .filter_clause input, 125 | .sort_clause input { 126 | height: @cell_height - 2px; 127 | 128 | display: block; 129 | width: 100% - 1%; 130 | border: 0; 131 | padding: 0 3px 2px 3px; 132 | } 133 | .output { 134 | overflow: hidden; 135 | 136 | & > * { 137 | height: 100%; 138 | overflow: auto; 139 | } 140 | 141 | 142 | // a fix for linux scrollbars, apparently 143 | // TODO: need to figure out why scrollbars are showing up when there's only a single-line item in the output 144 | & > *::-webkit-scrollbar { 145 | display: none; 146 | } 147 | 148 | /* 149 | &::-webkit-scrollbar { 150 | -webkit-appearance: none; 151 | width: 7px; 152 | } 153 | &::-webkit-scrollbar-thumb { 154 | border-radius: 4px; 155 | background-color: rgba(0,0,0,.5); 156 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 157 | } 158 | */ 159 | } 160 | 161 | 162 | .code, .filter_clause, .sort_clause { 163 | border-bottom: 1px solid #999; 164 | height: @cell_height - 1px; 165 | position: relative; 166 | 167 | .CodeMirror { 168 | &.is_string_concat { 169 | background-color: #ccc; 170 | font-style: italic; 171 | 172 | &:before { 173 | content: '”'; 174 | position: absolute; 175 | font-size: 40px; 176 | opacity: .25; 177 | font-family: Helvetica; 178 | font-weight: bold; 179 | top: -9px; 180 | right: 5px; 181 | } 182 | 183 | .flowsheets-reference { 184 | border: 1px solid #ddd; 185 | } 186 | } 187 | 188 | height: 100%; 189 | font-family: "Menlo", "Andale Mono", monospace; 190 | font-size: 12px; 191 | line-height: 1.3; 192 | background-color: white; 193 | 194 | .CodeMirror-scroll { 195 | // height: initial; 196 | } 197 | 198 | .flowsheets-reference { 199 | font-family: "Helvetica Neue", Helvetica, sans-serif; 200 | background-color: #000; 201 | color: white; 202 | font-weight: bold; 203 | padding: 0 3px; 204 | margin: 0 1px; 205 | border: 1px solid #ccc; 206 | cursor: default; 207 | 208 | &:hover { 209 | color: black; 210 | background-color: yellow; 211 | } 212 | } 213 | 214 | } 215 | 216 | .flowsheets-code-selection { 217 | z-index: 10; 218 | position: absolute; 219 | top: 0; 220 | right: 3px; 221 | line-height: 1.3; 222 | padding: 3px; 223 | 224 | opacity: .5; 225 | color: black; 226 | cursor: default; 227 | font-size: 10px; 228 | background-color: white; 229 | 230 | &:hover { 231 | opacity: 1; 232 | } 233 | } 234 | } 235 | 236 | 237 | .code-resizer, .visualization_options-resizer { 238 | position: absolute; 239 | z-index: 100; 240 | margin-top: -1.5px; 241 | height: 3px; 242 | width: 100%; 243 | //background-color: red; 244 | cursor: ns-resize; 245 | } 246 | 247 | 248 | .visualization_options { 249 | font-size: 11px; 250 | overflow: auto; 251 | font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif; 252 | background-color: #eee; 253 | line-height: 1.38; 254 | 255 | border-top: 1px solid #999; 256 | } 257 | 258 | .resize-handle { 259 | @size: 8px; 260 | // background-color: red; 261 | 262 | width: @size; 263 | height: @size; 264 | position: absolute; 265 | bottom: @size/-3; 266 | right: @size/-3; 267 | cursor: nwse-resize; 268 | } 269 | } 270 | 271 | #sidebar { 272 | width: 500px; 273 | position: fixed; 274 | top: 0; 275 | right: 0; 276 | height: 100%; 277 | border: 2px solid #ccc; 278 | background-color: white; 279 | box-shadow: -1px 0 13px rgba(0,0,0,.3); 280 | z-index: 100; 281 | 282 | h2 { 283 | font-family: Helvetica, Verdana, sans-serif; 284 | margin-left: 14px; 285 | border-bottom: 1px solid #ccc; 286 | padding-bottom: 5px; 287 | margin-bottom: 10px; 288 | } 289 | .CodeMirror { 290 | padding: 0 10px; 291 | background-color: transparent; 292 | height: 100%; 293 | } 294 | } 295 | 296 | /* 297 | 298 | === maybe how to fix codemirror styling? === 299 | 300 | .CodeMirror-lines { 301 | padding: 0; ? 302 | } 303 | 304 | .CodeMirror-line { 305 | padding: 0; ? 306 | } 307 | 308 | .block .code .CodeMirror { 309 | remove height 100%? 310 | } 311 | 312 | .scroll { 313 | padding-bottom: 0; 314 | height: initial?} 315 | 316 | */ -------------------------------------------------------------------------------- /staged_src/visualizations.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const _ = require('underscore'); 3 | const React = require('react'); 4 | const $ = require('jquery'); 5 | const diff = require('diff'); 6 | 7 | const interpreter = require('./interpreter'); 8 | const ui = require('./renderer'); 9 | const cell_height = ui.cell_height; 10 | 11 | function fade_background_color($element, alpha, color) { 12 | if (color[3] !== 'a') { 13 | throw 'Color needs to start with "rgba"'; 14 | } 15 | alpha -= .04; 16 | if (alpha < 0) { 17 | $element.css('background-color', 'transparent'); 18 | return; 19 | } 20 | var new_color = color.replace(' ', ` ${alpha})`); 21 | $element.css('background-color', new_color); 22 | setTimeout(fade_background_color, 1000 / 60, $element, alpha, color); 23 | } 24 | 25 | class DefaultViz extends React.Component { 26 | 27 | constructor(props) { 28 | super(props); 29 | this.scroll = _.throttle(this.scroll, 17).bind(this); 30 | 31 | this.state = { render_start: 0 }; 32 | this.should_flash = true; 33 | } 34 | 35 | componentDidMount() { 36 | this.flash_yellow(); 37 | } 38 | 39 | componentDidUpdate(prevProps, prevState) { 40 | if (this.should_flash) { 41 | this.flash_yellow(); 42 | } else { 43 | this.should_flash = true; 44 | } 45 | } 46 | 47 | flash_yellow() { 48 | var $inputs = $(this.refs.container).find('input'); 49 | if ($inputs.length == 0) { 50 | $inputs = $(this.refs.container).find('pre'); 51 | } 52 | fade_background_color($inputs, 1, 'rgba(255,255,0, '); 53 | } 54 | 55 | scroll(evt) { 56 | if (!_.isObject(this.props.block.output) || !_.isArray(this.props.block.output) || this.props.block.error) { 57 | return; 58 | } 59 | 60 | // scroll parent nodes 61 | this.props.block.depends_on.forEach(parent_block => { 62 | var $parent_block_output = $('#block-' + parent_block.name).find('.output > *'); 63 | if ($parent_block_output.scrollTop() != this.refs.scrollable.scrollTop) { 64 | $parent_block_output.scrollTop(this.refs.scrollable.scrollTop); 65 | } 66 | }); 67 | 68 | // scroll children nodes 69 | interpreter.blocks.forEach(test_block => { 70 | if (test_block.depends_on.includes(this.props.block)) { 71 | var $test_block_output = $('#block-' + test_block.name).find('.output > *'); 72 | if ($test_block_output.scrollTop() != this.refs.scrollable.scrollTop) { 73 | $test_block_output.scrollTop(this.refs.scrollable.scrollTop); 74 | } 75 | } 76 | }); 77 | 78 | this.should_flash = false; 79 | this.setState({ render_start: Math.floor(this.refs.scrollable.scrollTop / cell_height) }); 80 | } 81 | 82 | render() { 83 | var length = 1; 84 | 85 | var inputStyle = { 86 | height: cell_height - 2, 87 | display: 'block', 88 | width: '99%', 89 | border: 0, 90 | padding: '0 3px 2px 3px', 91 | backgroundColor: 'transparent' 92 | }; 93 | 94 | if (_.isArray(this.props.block.output) || _.isObject(this.props.block.output)) { 95 | length = _.size(this.props.block.output); 96 | var outputElement = []; // hack; 97 | 98 | outputElement.push(React.createElement('div', { key: 'scroll-buffer-start', style: { height: this.state.render_start * cell_height } })); 99 | 100 | var i = 0; 101 | _.each(this.props.block.output, (item, index, output) => { 102 | if (i < this.state.render_start || i > this.state.render_start + this.props.ui_block.output_height) { 103 | i += 1; 104 | return; 105 | } 106 | 107 | if (_.isArray(this.props.block.output)) { 108 | outputElement.push(React.createElement('input', { style: inputStyle, value: !_.isUndefined(item.repr) ? item.repr : item, key: `${index}-${item}`, readOnly: true })); 109 | } else { 110 | outputElement.push(React.createElement('input', { style: inputStyle, value: '' + JSON.stringify(index) + ': ' + JSON.stringify(item), readOnly: true })); 111 | } 112 | i += 1; 113 | }); 114 | 115 | outputElement.push(React.createElement('div', { 116 | key: 'scroll-buffer-end', 117 | style: { 118 | height: (length - (this.state.render_start + this.props.ui_block.output_height)) * cell_height 119 | } 120 | })); 121 | 122 | outputElement.push(React.createElement('div', { key: 'length', style: { 123 | position: 'absolute', 124 | right: 0, 125 | bottom: 0, 126 | fontSize: 9, 127 | padding: '2px', 128 | border: '1px solid #ddd', 129 | backgroundColor: '#eee', 130 | fontFamily: 'Clear Sans, Helvetica Neue, sans-serif', 131 | fontWeight: 'bold' 132 | } }, 'Length: ' + length)); 133 | } else if (_.isString(this.props.block.output)) { 134 | var outputElement = React.createElement('pre', { style: { width: '99%', height: '100%', border: 0, fontFamily: "Helvetica", padding: 3, margin: 0, backgroundColor: 'transparent' }, readOnly: true }, '"' + this.props.block.output + '"'); 135 | } else { 136 | var outputElement = React.createElement('input', { style: inputStyle, value: JSON.stringify(this.props.block.output), readOnly: true }); 137 | } 138 | return React.createElement('div', { ref: 'scrollable', onScroll: this.scroll }, React.createElement('div', { ref: 'container', style: { height: cell_height * length } }, outputElement)); 139 | } 140 | } 141 | module.exports.DefaultViz = DefaultViz; 142 | 143 | class RenderedHTMLViz extends React.Component { 144 | constructor(props) { 145 | super(props); 146 | } 147 | 148 | render() { 149 | var src = 'data:text/html;charset=utf-8,' + encodeURI(this.props.block.output); 150 | return React.createElement('iframe', { src: src, ref: 'iframe', frameBorder: 0, style: { width: '100%' } }); 151 | } 152 | } 153 | module.exports.RenderedHTMLViz = RenderedHTMLViz; 154 | 155 | class TextViz extends React.Component { 156 | constructor(props) { 157 | super(props); 158 | } 159 | 160 | render() { 161 | return React.createElement('div', { style: { margin: 0, lineHeight: 1.38 } }, this.props.block.output); 162 | } 163 | } 164 | module.exports.TextViz = TextViz; 165 | 166 | class TextDiffVizOptions extends React.Component { 167 | 168 | constructor(props) { 169 | super(props); 170 | 171 | var default_compare_against_block = _.find(this.props.block.depends_on, test_block => _.isString(test_block.output)); 172 | this.state = { 173 | compare_against_block_name: default_compare_against_block ? default_compare_against_block.name : '', 174 | show_additions: true, 175 | show_deletions: true 176 | }; 177 | this.change_compare_against = this.change_compare_against.bind(this); 178 | this.change_show_additions = this.change_show_additions.bind(this); 179 | this.change_show_deletions = this.change_show_deletions.bind(this); 180 | this.change_name = this.change_name.bind(this); 181 | } 182 | 183 | change_compare_against(evt) { 184 | // hack, should be Event type but EventTarget doesn't always have 'value' property 185 | this.setState({ compare_against_block_name: evt.target.value || '' }); 186 | } 187 | change_show_additions(evt) { 188 | this.setState({ show_additions: !this.state.show_additions }); 189 | } 190 | change_show_deletions(evt) { 191 | this.setState({ show_deletions: !this.state.show_deletions }); 192 | } 193 | componentDidUpdate() { 194 | this.props.render_visualization(this.props.ui_block, TextDiffViz); 195 | } 196 | change_name(old_name, new_name) { 197 | if (this.state.compare_against_block_name == old_name) { 198 | this.setState({ compare_against_block_name: new_name }); 199 | } 200 | } 201 | render() { 202 | var option_attributes = { style: { display: 'inline-block' } }; 203 | return React.createElement('div', null, [React.createElement('div', option_attributes, React.createElement('label', null, ' diff against: '), React.createElement('input', { value: this.state.compare_against_block_name, onChange: this.change_compare_against, size: this.state.compare_against_block_name.length || 4, key: 'compare_against' })), React.createElement('div', option_attributes, [React.createElement('input', { type: 'checkbox', checked: this.state.show_additions, onChange: this.change_show_additions, key: 'show_additions' }), React.createElement('label', null, 'show additions')]), React.createElement('div', option_attributes, [React.createElement('input', { type: 'checkbox', checked: this.state.show_deletions, onChange: this.change_show_deletions, key: 'show_deletions' }), React.createElement('label', null, 'show deletions')])]); 204 | } 205 | } 206 | class TextDiffViz extends React.Component { 207 | 208 | constructor(props) { 209 | super(props); 210 | } 211 | 212 | render() { 213 | var compare_against_block = _.find(this.props.blocks, test_block => test_block.name == this.props.options.compare_against_block_name); 214 | if (!compare_against_block) { 215 | throw 'Block with name "' + this.props.options.compare_against_block_name + '" not found'; 216 | } 217 | var changes = diff.diffChars(compare_against_block.output, this.props.block.output); 218 | return React.createElement('div', null, changes.map((part, i) => { 219 | return React.createElement('span', { 220 | style: { 221 | color: part.added && this.props.options.show_additions ? 'green' : part.removed && this.props.options.show_deletions ? 'red' : 'grey', 222 | fontWeight: part.added && this.props.options.show_additions ? 'bold' : 'normal', 223 | textDecoration: part.removed && this.props.options.show_deletions ? 'line-through' : 'none', 224 | // backgroundColor: part.added && this.props.options.show_additions ? '', 225 | display: part.added && !this.props.options.show_additions ? 'none' : part.removed && !this.props.options.show_deletions ? 'none' : 'inline' 226 | }, 227 | key: i 228 | }, part.value); 229 | })); 230 | } 231 | } 232 | TextDiffViz.options = TextDiffVizOptions; 233 | module.exports.TextDiffViz = TextDiffViz; 234 | 235 | class RawJSONViz extends React.Component { 236 | constructor(props) { 237 | super(props); 238 | } 239 | 240 | render() { 241 | return React.createElement('pre', { style: { margin: 0, lineHeight: 1.38 } }, JSON.stringify(this.props.block.output, null, ' ')); 242 | } 243 | } 244 | module.exports.RawJSONViz = RawJSONViz; 245 | 246 | class HTMLPickerVizOptions extends React.Component { 247 | 248 | constructor(props) { 249 | super(props); 250 | this.state = { 251 | selector: '', 252 | send_to_block_name: '' 253 | }; 254 | this.change_selector = this.change_selector.bind(this); 255 | this.new_block = this.new_block.bind(this); 256 | } 257 | componentDidUpdate() { 258 | this.props.render_visualization(this.props.ui_block, HTMLPickerViz); 259 | 260 | if (this.state.send_to_block_name) { 261 | var block = _.find(interpreter.blocks, block => block.name == this.state.send_to_block_name); 262 | interpreter.change_code(block, `'${this.state.selector}'`); 263 | ui.render_code(block); 264 | } 265 | } 266 | change_selector(evt) { 267 | var selector = evt.target.value; 268 | this.setState({ selector: selector }); 269 | } 270 | new_block(evt) { 271 | var block = interpreter.create_block('css_selector', `'${this.state.selector}'`); 272 | this.setState({ send_to_block_name: block.name }); 273 | ui.create_and_render_block(block, this.props.ui_block.row, this.props.ui_block.column + this.props.ui_block.width_in_columns); 274 | } 275 | change_name(old_name, new_name) { 276 | if (old_name === this.state.send_to_block_name) { 277 | this.setState({ send_to_block_name: new_name }); 278 | } 279 | } 280 | 281 | render() { 282 | return React.createElement('div', null, [React.createElement('label', null, 'Selector: '), React.createElement('input', { type: 'search', onChange: this.change_selector, value: this.state.selector }), this.state.send_to_block_name ? React.createElement('span', { style: { color: 'white', backgroundColor: 'black', fontWeight: 'bold', padding: '2px 4px', marginLeft: 10 } }, this.state.send_to_block_name) : React.createElement('button', { onClick: this.new_block }, '->')]); 283 | } 284 | } 285 | class HTMLPickerViz extends React.Component { 286 | 287 | constructor(props) { 288 | super(props); 289 | this.attach_picker_events = this.attach_picker_events.bind(this); 290 | this.highlight_selector = this.highlight_selector.bind(this); 291 | this.common_nodes = []; 292 | this.old_selector = ''; 293 | } 294 | componentDidMount() {} 295 | componentDidUpdate(old_props) { 296 | this.highlight_selector(this.props.options.selector); 297 | this.common_nodes = []; 298 | this.old_selector = ''; 299 | } 300 | 301 | highlight_selector(selector) { 302 | var clear_selector = '.flowsheets_selected'; 303 | if (this.old_selector) { 304 | clear_selector += ', ' + this.old_selector; 305 | } 306 | 307 | try { 308 | this.refs.iframe.contentWindow.$(clear_selector).removeClass('flowsheets_selected').css({ 309 | backgroundColor: 'inherit', 310 | boxShadow: 'none', 311 | outline: 'none' 312 | }); 313 | } catch (e) {} 314 | this.old_selector = selector; 315 | try { 316 | this.refs.iframe.contentWindow.$(selector).addClass('flowsheets_selected').css({ 317 | backgroundColor: 'yellow', 318 | boxShadow: '0 0 10px rgba(0,0,0,.4)', 319 | outline: '1px solid yellow' 320 | }); 321 | } catch (e) {} 322 | } 323 | 324 | attach_picker_events() { 325 | // first, make sure jquery is there 326 | var jquery = document.createElement('script'); 327 | jquery.innerText = fs.readFileSync('node_modules/jquery/dist/jquery.min.js').toString(); 328 | this.refs.iframe.contentWindow.document.body.appendChild(jquery); 329 | 330 | var nodes = []; 331 | 332 | var start_nodes = this.refs.iframe.contentWindow.document.querySelectorAll('body > *'); 333 | for (var i = 0; i < start_nodes.length; ++i) { 334 | nodes.push(start_nodes[i]); 335 | } 336 | 337 | var candidate_nodes = []; 338 | 339 | // Basically, get all nodes with at least one text node as a child as a good candidate for a user to choose 340 | // since users will probably only want to choose nodes with text in them. 341 | 342 | while (nodes.length > 0) { 343 | var node = nodes.pop(); 344 | if (node.hasChildNodes() && node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE' && node.tagName !== 'NOSCRIPT') { 345 | for (var i = 0; i < node.childNodes.length; ++i) { 346 | var child_node = node.childNodes[i]; 347 | // if a node has any children that are text, it's a candidate 348 | if (child_node.nodeType == child_node.TEXT_NODE && !child_node.textContent.match(/^\s+$/) || child_node.tagName === 'IMG') { 349 | candidate_nodes.push(node); 350 | } else { 351 | nodes.push(child_node); 352 | } 353 | } 354 | } 355 | } 356 | 357 | var classname = 'flowsheets_selected'; 358 | 359 | candidate_nodes.forEach(node => { 360 | $(node).on('mouseenter', evt => { 361 | var $t = $(evt.target); 362 | if ($t.hasClass(classname)) return; 363 | 364 | $t.css({ backgroundColor: 'yellow', boxShadow: '0 0 10px rgba(0,0,0,.4)' }); 365 | }).on('mouseleave', evt => { 366 | var $t = $(evt.target); 367 | if ($t.hasClass(classname)) return; 368 | $t.css({ backgroundColor: 'inherit', boxShadow: 'inherit', outline: 'none' }); 369 | }).off('mousedown mouseup click').on('click', evt => { 370 | evt.preventDefault(); 371 | evt.stopPropagation(); 372 | // make sure it's not already there 373 | for (var i = 0; i < this.common_nodes.length; ++i) { 374 | if (this.common_nodes[i] === evt.target) { 375 | return; 376 | } 377 | } 378 | 379 | this.common_nodes.push(evt.target); 380 | 381 | // find closest common ancestor 382 | var $closestAncestor = $(this.common_nodes[0]).parents(); 383 | this.common_nodes.forEach(node => { 384 | var $node = $(node); 385 | $closestAncestor = $closestAncestor.has($node); 386 | }); 387 | 388 | // make selector 389 | var selector = $closestAncestor.prop('tagName').toLowerCase(); 390 | if ($closestAncestor.attr('id')) { 391 | selector += '#' + $closestAncestor.attr('id'); 392 | } else if ($closestAncestor.attr('class')) { 393 | selector += '.' + $closestAncestor.attr('class').replace(/\s+$/, '').split(/\s+/).join('.'); 394 | } 395 | 396 | selector += ' '; 397 | 398 | selector += this.common_nodes[0].tagName.toLowerCase(); 399 | if (this.common_nodes[0].className) { 400 | selector += '.' + this.common_nodes[0].className.replace(/\s+$/, '').split(/\s+/).join('.'); 401 | } 402 | 403 | this.highlight_selector(selector); 404 | 405 | this.props.options_component.setState({ selector: selector }); 406 | var send_selector_to_block = _.find(this.props.blocks, block => block.name === this.props.options_component.state.send_to_block_name); 407 | if (send_selector_to_block) { 408 | interpreter.change_code(send_selector_to_block, `'${selector}'`); 409 | ui.render_code(send_selector_to_block); 410 | } 411 | }); 412 | }); 413 | } 414 | 415 | render() { 416 | var src = 'data:text/html;charset=utf-8,' + encodeURI(this.props.block.output); 417 | 418 | return React.createElement('iframe', { src: src, ref: 'iframe', onLoad: this.attach_picker_events, frameBorder: 0, style: { width: '100%' } }); 419 | } 420 | } 421 | HTMLPickerViz.options = HTMLPickerVizOptions; 422 | module.exports.HTMLPickerViz = HTMLPickerViz; 423 | 424 | class CustomViz extends React.Component { 425 | constructor(props) { 426 | super(props); 427 | } 428 | render() { 429 | return React.createElement('div', null, this.props.block.output); 430 | } 431 | } 432 | module.exports.CustomViz = CustomViz; --------------------------------------------------------------------------------