Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:02,250 --> 00:00:05,490 Let's now analyze what we get in this 2 2 00:00:05,490 --> 00:00:08,090 project folder we created. 3 3 00:00:08,090 --> 00:00:10,480 I opened it here in Visual Studio Code, 4 4 00:00:10,480 --> 00:00:14,090 and before we dive into the folders and files we got here, 5 5 00:00:14,090 --> 00:00:15,220 two things. 6 6 00:00:15,220 --> 00:00:17,860 First of all, the look of my IDE here. 7 7 00:00:17,860 --> 00:00:20,840 If you don't have the same one, and you want the same one, 8 8 00:00:20,840 --> 00:00:23,210 under File, Preferences, 9 9 00:00:23,210 --> 00:00:25,530 Color Theme, you can pick the color theme, 10 10 00:00:25,530 --> 00:00:28,820 and I'm using the Dark+ theme here. 11 11 00:00:28,820 --> 00:00:31,670 Now, in addition, you very likely have different folder 12 12 00:00:31,670 --> 00:00:33,010 and file icons. 13 13 00:00:33,010 --> 00:00:36,293 You get the same ones as I do if you go to View, Extensions, 14 14 00:00:37,780 --> 00:00:40,870 and you there search for Material Icon. 15 15 00:00:40,870 --> 00:00:44,790 Visual Studio Code has support for community extensions, 16 16 00:00:44,790 --> 00:00:46,590 and that is a visual extension, 17 17 00:00:46,590 --> 00:00:49,005 so not related to Power BI Visuals, 18 18 00:00:49,005 --> 00:00:52,100 but simply affecting how my IDE looks like, 19 19 00:00:52,100 --> 00:00:54,750 and I got this Material Icon theme installed. 20 20 00:00:54,750 --> 00:00:57,090 And the effect of this theme 21 21 00:00:57,090 --> 00:01:00,170 is simply that the folders and files have different icons. 22 22 00:01:00,170 --> 00:01:01,800 So, that's pure cosmetics, 23 23 00:01:01,800 --> 00:01:03,730 you don't need that, but if you want it, 24 24 00:01:03,730 --> 00:01:05,660 that's how you get this look. 25 25 00:01:05,660 --> 00:01:07,540 With that, let's analyze what we got here, 26 26 00:01:07,540 --> 00:01:09,140 and let's start at the top. 27 27 00:01:09,140 --> 00:01:13,280 The .vscode folder is a pure editor configuration folder. 28 28 00:01:13,280 --> 00:01:16,950 The two files it holds just configure my IDE here, 29 29 00:01:16,950 --> 00:01:19,340 and therefore if you are using a different IDE, 30 30 00:01:19,340 --> 00:01:21,290 for example, you don't even need them, 31 31 00:01:21,290 --> 00:01:24,683 you might not even have them, and you can fully ignore that. 32 32 00:01:25,560 --> 00:01:28,520 The assets folder holds a icon.png file, 33 33 00:01:28,520 --> 00:01:29,440 which is a image. 34 34 00:01:29,440 --> 00:01:33,680 And in general, if your visual would use more images, 35 35 00:01:33,680 --> 00:01:35,020 you would put them there, 36 36 00:01:35,020 --> 00:01:38,180 because from there you could use them in your code layer. 37 37 00:01:38,180 --> 00:01:40,410 Since your visual is, in the end, 38 38 00:01:40,410 --> 00:01:44,390 just a combination of HTML, CSS, and JavaScript, 39 39 00:01:44,390 --> 00:01:46,410 which are all web technologies, 40 40 00:01:46,410 --> 00:01:48,970 you can also embed and use images. 41 41 00:01:48,970 --> 00:01:52,350 Because in the end, your visual is just a mini-website 42 42 00:01:52,350 --> 00:01:55,280 hosted by Power BI's service, you would say, 43 43 00:01:55,280 --> 00:01:57,770 and therefore anything you can use on a website 44 44 00:01:57,770 --> 00:02:00,810 can be generally be also be used in your visual, 45 45 00:02:00,810 --> 00:02:02,593 and images are a part of that. 46 46 00:02:03,760 --> 00:02:05,840 In addition here, you would set up the icon 47 47 00:02:05,840 --> 00:02:08,200 your visual uses in the toolset 48 48 00:02:08,200 --> 00:02:10,780 when users want to use your visual, 49 49 00:02:10,780 --> 00:02:14,220 and that becomes important when we later package our visual, 50 50 00:02:14,220 --> 00:02:17,050 and I'll come back to that, well, later. 51 51 00:02:17,050 --> 00:02:20,970 The dist folder will later then hold our packaged up visual, 52 52 00:02:20,970 --> 00:02:23,187 which is ready to share with other users. 53 53 00:02:23,187 --> 00:02:24,560 Currently it's empty, 54 54 00:02:24,560 --> 00:02:26,490 because we're still in development mode, 55 55 00:02:26,490 --> 00:02:28,670 we're still working on the visual. 56 56 00:02:28,670 --> 00:02:32,870 The node_modules folder holds extra project dependencies 57 57 00:02:32,870 --> 00:02:34,440 which we have here. 58 58 00:02:34,440 --> 00:02:36,640 Our project here uses TypeScript, 59 59 00:02:36,640 --> 00:02:38,140 and when we write the code, 60 60 00:02:38,140 --> 00:02:40,060 we don't want to reinvent the wheel 61 61 00:02:40,060 --> 00:02:41,860 for everything we do, 62 62 00:02:41,860 --> 00:02:44,330 and we will use third-party libraries 63 63 00:02:44,330 --> 00:02:47,430 to make certain things easier for us as a developer. 64 64 00:02:47,430 --> 00:02:50,130 Those libraries are automatically managed 65 65 00:02:50,130 --> 00:02:52,910 and stored here in the node_modules folder, 66 66 00:02:52,910 --> 00:02:55,440 and therefore you shouldn't edit this folder, 67 67 00:02:55,440 --> 00:02:57,460 it will be managed for you. 68 68 00:02:57,460 --> 00:03:00,490 In here, for example, you find a bunch of folders 69 69 00:03:00,490 --> 00:03:02,910 that are related to d3, 70 70 00:03:02,910 --> 00:03:05,138 which is a package we'll later use to 71 71 00:03:05,138 --> 00:03:08,180 draw something onto the screen. 72 72 00:03:08,180 --> 00:03:11,680 Now, the src folder holds two .ts files, 73 73 00:03:11,680 --> 00:03:15,640 and .ts, of course, stands for TypeScript. 74 74 00:03:15,640 --> 00:03:18,530 These are the files that hold the actual code 75 75 00:03:18,530 --> 00:03:20,880 you're going to write, and you're going to work in, 76 76 00:03:20,880 --> 00:03:23,240 and these are the files we're going to edit 77 77 00:03:23,240 --> 00:03:24,610 throughout this module. 78 78 00:03:24,610 --> 00:03:28,000 I'll come back to those in more detail later therefore. 79 79 00:03:28,000 --> 00:03:31,590 The style folder holds the visual.less file. 80 80 00:03:31,590 --> 00:03:35,580 Now, styling is done with a language that's called Less, 81 81 00:03:35,580 --> 00:03:38,800 and Less is a bit like TypeScript for JavaScript, 82 82 00:03:38,800 --> 00:03:41,320 Less is an extension to CSS. 83 83 00:03:41,320 --> 00:03:45,740 And CSS is the official web styling language, you could say. 84 84 00:03:45,740 --> 00:03:48,970 You can also write regular CSS code in here if you want, 85 85 00:03:48,970 --> 00:03:51,610 but Less adds some extra features. 86 86 00:03:51,610 --> 00:03:54,730 And for example here, if I change yellow to red, 87 87 00:03:54,730 --> 00:03:58,720 and this pbiviz start process is still running, 88 88 00:03:58,720 --> 00:04:01,630 if we go back to our preview and we reload, 89 89 00:04:01,630 --> 00:04:03,963 you see now the background here is red. 90 90 00:04:05,330 --> 00:04:08,140 So, that's how these things are related. 91 91 00:04:08,140 --> 00:04:11,380 And then below that we got a bunch of configuration files. 92 92 00:04:11,380 --> 00:04:13,590 capabalities.json, for example, 93 93 00:04:13,590 --> 00:04:15,770 controls how Power BI's service 94 94 00:04:15,770 --> 00:04:17,890 is able to communicate with our visual. 95 95 00:04:17,890 --> 00:04:20,150 For example, what can be configured 96 96 00:04:20,150 --> 00:04:22,220 from in that Power BI service, 97 97 00:04:22,220 --> 00:04:26,390 which configuration options are exposed to the end-user. 98 98 00:04:26,390 --> 00:04:28,690 So, that's basically a technical document 99 99 00:04:28,690 --> 00:04:31,710 describing how our visual in code, 100 100 00:04:31,710 --> 00:04:35,833 and our visual in Power BI's service are able to interact. 101 101 00:04:36,710 --> 00:04:38,890 Now, in here we can actually delete something, 102 102 00:04:38,890 --> 00:04:41,240 and that's this objects node. 103 103 00:04:41,240 --> 00:04:43,900 You can fold it by hovering here on the left 104 104 00:04:43,900 --> 00:04:45,310 and clicking on that arrow, 105 105 00:04:45,310 --> 00:04:48,260 and that makes it easy to remove the entire objects node. 106 106 00:04:48,260 --> 00:04:51,010 We don't need it here, and I'll come back to it later, 107 107 00:04:51,010 --> 00:04:54,070 so delete it and save the file thereafter. 108 108 00:04:54,070 --> 00:04:56,760 package-lock.json and package.json 109 109 00:04:56,760 --> 00:04:59,410 are project management files. 110 110 00:04:59,410 --> 00:05:02,500 They manage the dependencies of our project, 111 111 00:05:02,500 --> 00:05:03,700 and a couple of other things, 112 112 00:05:03,700 --> 00:05:06,270 but the dependencies are the most important part. 113 113 00:05:06,270 --> 00:05:09,500 So basically, here we specify third-party packages 114 114 00:05:09,500 --> 00:05:13,210 our project uses, like for example d3, 115 115 00:05:13,210 --> 00:05:15,130 this visualization package, 116 116 00:05:15,130 --> 00:05:18,360 which we will use later to draw something onto the screen. 117 117 00:05:18,360 --> 00:05:20,470 Now, dependencies stored here 118 118 00:05:20,470 --> 00:05:23,830 are in the end the project's, and their dependencies, 119 119 00:05:23,830 --> 00:05:26,200 which are stored in node_modules. 120 120 00:05:26,200 --> 00:05:28,563 That's how this file gets managed in the end. 121 121 00:05:29,770 --> 00:05:30,860 If you would share 122 122 00:05:30,860 --> 00:05:33,380 your entire project with another developer, 123 123 00:05:33,380 --> 00:05:36,180 you could also delete the node_modules folder 124 124 00:05:36,180 --> 00:05:37,610 because it's quite a big folder, 125 125 00:05:37,610 --> 00:05:39,810 so to make it smaller you could delete it, 126 126 00:05:39,810 --> 00:05:42,670 and as long as the package.json file is there, 127 127 00:05:42,670 --> 00:05:46,020 it's easy to recreate this node_modules folder. 128 128 00:05:46,020 --> 00:05:48,950 All that would need to be done is that 129 129 00:05:48,950 --> 00:05:50,960 in your project folder, 130 130 00:05:50,960 --> 00:05:53,880 and that's why I'll temporarily quit pbiviz start, 131 131 00:05:53,880 --> 00:05:57,370 in your project folder you can run npm install, 132 132 00:05:57,370 --> 00:06:00,150 and that will look at the package.json file 133 133 00:06:00,150 --> 00:06:02,450 and install all those dependencies, 134 134 00:06:02,450 --> 00:06:06,130 and their dependencies, into your node_modules folder, 135 135 00:06:06,130 --> 00:06:08,893 and it would recreate that folder if it's missing, 136 136 00:06:10,130 --> 00:06:11,990 but that's just a side note. 137 137 00:06:11,990 --> 00:06:15,810 With that, I'm going to bring this pbiviz start process 138 138 00:06:15,810 --> 00:06:18,333 back up, so that we can continue developing. 139 139 00:06:19,520 --> 00:06:23,330 Now, the pbiviz.json file is in every configuration file 140 140 00:06:23,330 --> 00:06:24,550 for our visual. 141 141 00:06:24,550 --> 00:06:26,880 And at least for me here, it's quite unreadable, 142 142 00:06:26,880 --> 00:06:30,120 but we can right-click into it and choose Format Document, 143 143 00:06:30,120 --> 00:06:31,730 or use the shortcut, 144 144 00:06:31,730 --> 00:06:34,870 to auto format this code to be more readable. 145 145 00:06:34,870 --> 00:06:37,210 Now, here we can configure our visual, 146 146 00:06:37,210 --> 00:06:39,780 but whereas capabilities.json 147 147 00:06:39,780 --> 00:06:42,940 is basically a file that tells Power BI's service 148 148 00:06:42,940 --> 00:06:44,367 how to use our visual, 149 149 00:06:44,367 --> 00:06:49,280 pbiviz.json is a file that is meant for humans. 150 150 00:06:49,280 --> 00:06:50,280 Of course, not like this, 151 151 00:06:50,280 --> 00:06:52,110 but the information we store in there, 152 152 00:06:52,110 --> 00:06:55,100 like the description, or the displayName of our visual, 153 153 00:06:55,100 --> 00:06:58,930 that's all information that shows up in different places. 154 154 00:06:58,930 --> 00:07:01,170 For example, in Power BI's service, 155 155 00:07:01,170 --> 00:07:03,740 or if we package and share our visual 156 156 00:07:03,740 --> 00:07:06,260 in things like the AppSource market. 157 157 00:07:06,260 --> 00:07:09,490 So, the configuration here is basically meant for humans. 158 158 00:07:09,490 --> 00:07:11,500 Generally, the configuration here 159 159 00:07:11,500 --> 00:07:13,790 is meant for Power BI's service. 160 160 00:07:13,790 --> 00:07:16,260 Now, there are some items in pbiviz.json 161 161 00:07:16,260 --> 00:07:19,500 which are also meant our project setup 162 162 00:07:19,500 --> 00:07:22,030 and for the computer in the end, 163 163 00:07:22,030 --> 00:07:24,200 and that's, for example, assets, 164 164 00:07:24,200 --> 00:07:26,640 where we define which assets we're using. 165 165 00:07:26,640 --> 00:07:28,950 That's the style configuration here, 166 166 00:07:28,950 --> 00:07:32,680 where we basically make clear where our styles are defined, 167 167 00:07:32,680 --> 00:07:36,000 that it's in the visual.less file in the style folder. 168 168 00:07:36,000 --> 00:07:38,540 And if you would for example change the filename 169 169 00:07:38,540 --> 00:07:42,280 of visual.less, you would therefore need to update it here. 170 170 00:07:42,280 --> 00:07:44,180 But we can keep all the defaults. 171 171 00:07:44,180 --> 00:07:46,020 We don't need to add in anything here. 172 172 00:07:46,020 --> 00:07:49,320 I'll just save the file because I reformatted it. 173 173 00:07:49,320 --> 00:07:50,227 Now, the other three files here 174 174 00:07:50,227 --> 00:07:52,530 are there to configure TypeScript, 175 175 00:07:52,530 --> 00:07:54,540 that programming language we're using, 176 176 00:07:54,540 --> 00:07:56,500 and unless you really know what you're doing, 177 177 00:07:56,500 --> 00:07:57,900 you can therefore definitely stick 178 178 00:07:57,900 --> 00:07:59,533 to the defaults there as well. 179 179 00:08:00,370 --> 00:08:01,560 Now with that, let's go back 180 180 00:08:01,560 --> 00:08:03,580 to these TypeScript files up there. 181 181 00:08:03,580 --> 00:08:06,910 And we can actually delete the settings.ts file, 182 182 00:08:06,910 --> 00:08:08,270 we don't need it here. 183 183 00:08:08,270 --> 00:08:10,930 And then visual.ts, we can delete all 184 184 00:08:10,930 --> 00:08:13,150 that green text here at the beginning, 185 185 00:08:13,150 --> 00:08:15,230 that's a comment, which we don't need. 186 186 00:08:15,230 --> 00:08:17,990 And now let's see what we have in this file. 187 187 00:08:17,990 --> 00:08:20,350 In there, we got a bunch of imports. 188 188 00:08:20,350 --> 00:08:22,840 Imports are a language feature 189 189 00:08:22,840 --> 00:08:25,590 that ties different files together. 190 190 00:08:25,590 --> 00:08:28,220 They basically help the project know 191 191 00:08:28,220 --> 00:08:30,720 where certain features are coming from, 192 192 00:08:30,720 --> 00:08:33,400 and if you're using a certain feature in a file, 193 193 00:08:33,400 --> 00:08:36,160 you need to specify a import to tell, 194 194 00:08:36,160 --> 00:08:37,780 let's say the programming language, 195 195 00:08:37,780 --> 00:08:39,710 where to find that feature. 196 196 00:08:39,710 --> 00:08:40,860 And for example here, 197 197 00:08:40,860 --> 00:08:43,610 we had a import where we imported something 198 198 00:08:43,610 --> 00:08:45,840 from that file we just deleted. 199 199 00:08:45,840 --> 00:08:47,040 Since I deleted the file, 200 200 00:08:47,040 --> 00:08:48,923 I can also delete this import here. 201 201 00:08:51,070 --> 00:08:53,970 Below that, we have a so called class. 202 202 00:08:53,970 --> 00:08:56,040 A class is a language construct 203 203 00:08:56,040 --> 00:08:58,090 which basically is best described 204 204 00:08:58,090 --> 00:09:00,550 as a blueprint for an object. 205 205 00:09:00,550 --> 00:09:02,730 But that of course leads us to the next question, 206 206 00:09:02,730 --> 00:09:03,920 what's an object? 207 207 00:09:03,920 --> 00:09:06,980 And object is a data structure in programming, 208 208 00:09:06,980 --> 00:09:11,190 and in the end, our visual, in code to the computer, 209 209 00:09:11,190 --> 00:09:12,600 is such an object. 210 210 00:09:12,600 --> 00:09:16,660 Full of information, of commands, and of data. 211 211 00:09:16,660 --> 00:09:20,220 And Power BI's service, again, consumes our object. 212 212 00:09:20,220 --> 00:09:23,070 So, we're building, or we're defining an object here, 213 213 00:09:23,070 --> 00:09:25,940 and Power BI's service is then able to use it. 214 214 00:09:25,940 --> 00:09:28,710 Now, this class has some properties. 215 215 00:09:28,710 --> 00:09:31,950 These four things here are so-called properties, 216 216 00:09:31,950 --> 00:09:34,710 that's basically data that's stored in this object, 217 217 00:09:34,710 --> 00:09:36,850 data that we can use in our code, 218 218 00:09:36,850 --> 00:09:39,530 or data that Power BI's service might be using. 219 219 00:09:39,530 --> 00:09:42,820 Now, that's actually data we only use in our code here. 220 220 00:09:42,820 --> 00:09:45,430 And then we got two so-called methods, 221 221 00:09:45,430 --> 00:09:48,830 the constructor method and the update method. 222 222 00:09:48,830 --> 00:09:51,640 We actually got more, but let's focus on those two. 223 223 00:09:51,640 --> 00:09:55,160 Methods are basically commands that can be executed. 224 224 00:09:55,160 --> 00:09:58,710 So, that's code on demand, as I like to call it. 225 225 00:09:58,710 --> 00:10:02,160 And these two methods are required by Power BI's service 226 226 00:10:02,160 --> 00:10:04,200 to bring something onto the screen, 227 227 00:10:04,200 --> 00:10:07,140 and to update it whenever out data changes. 228 228 00:10:07,140 --> 00:10:10,300 To be precise, the constructor here 229 229 00:10:10,300 --> 00:10:13,890 has all the code that runs when the visual is loaded 230 230 00:10:13,890 --> 00:10:15,883 and constructed for the first time. 231 231 00:10:16,720 --> 00:10:18,780 The update method here, on the other hand, 232 232 00:10:18,780 --> 00:10:20,930 has the code that should execute 233 233 00:10:20,930 --> 00:10:24,053 whenever the data attached to our visual changes. 234 234 00:10:25,600 --> 00:10:29,260 So here for example, if I add and remove data, 235 235 00:10:29,260 --> 00:10:31,273 this triggers the update method. 236 236 00:10:33,050 --> 00:10:34,810 And the other methods down there 237 237 00:10:34,810 --> 00:10:39,180 are utility methods that were part of that default visual, 238 238 00:10:39,180 --> 00:10:41,060 which we don't need per se though, 239 239 00:10:41,060 --> 00:10:43,810 and which we therefore can just delete. 240 240 00:10:43,810 --> 00:10:46,250 Now, how does Power BI's service know 241 241 00:10:46,250 --> 00:10:48,390 that it should run the update method 242 242 00:10:48,390 --> 00:10:51,060 whenever our data changes though? 243 243 00:10:51,060 --> 00:10:53,200 We could have any method name after all here, 244 244 00:10:53,200 --> 00:10:57,650 it's our code, so I could have named this whatever. 245 245 00:10:57,650 --> 00:11:00,740 Well, actually now we're getting an error up here 246 246 00:11:00,740 --> 00:11:04,808 that our class Visual incorrectly implements the interface 247 247 00:11:04,808 --> 00:11:06,320 IVisual. 248 248 00:11:06,320 --> 00:11:07,710 That's this part here. 249 249 00:11:07,710 --> 00:11:10,380 This class implements something, 250 250 00:11:10,380 --> 00:11:12,700 it implements a so-called interface, 251 251 00:11:12,700 --> 00:11:15,530 and an interface basically is a contract 252 252 00:11:15,530 --> 00:11:19,580 that forces us to add certain features to this class. 253 253 00:11:19,580 --> 00:11:22,910 To be precise, this IVisual contract, 254 254 00:11:22,910 --> 00:11:25,590 which we signed by implementing this interface, 255 255 00:11:25,590 --> 00:11:29,020 forces us to have an update method. 256 256 00:11:29,020 --> 00:11:30,830 And that happens to ensure 257 257 00:11:30,830 --> 00:11:34,210 that Power BI's service is able to call an update method, 258 258 00:11:34,210 --> 00:11:37,220 because Power BI's service wants an update method. 259 259 00:11:37,220 --> 00:11:40,230 It only knows how to call a method named update 260 260 00:11:40,230 --> 00:11:41,910 when our data changed. 261 261 00:11:41,910 --> 00:11:45,250 So, in order to ensure that we have such a method 262 262 00:11:45,250 --> 00:11:47,640 and we don't, by accident for example, 263 263 00:11:47,640 --> 00:11:49,530 name this method differently, 264 264 00:11:49,530 --> 00:11:52,620 our visuals should implement this contract 265 265 00:11:52,620 --> 00:11:55,670 because this contract tells us that we need that method, 266 266 00:11:55,670 --> 00:11:57,910 and if we then should accidentally forget it 267 267 00:11:57,910 --> 00:12:01,820 or name it differently, we get an error which we can fix. 268 268 00:12:01,820 --> 00:12:05,580 So, that's simply a extra, you could say, security mechanism 269 269 00:12:05,580 --> 00:12:06,920 for us as a developer 270 270 00:12:06,920 --> 00:12:09,333 to make sure that we're writing proper code. 271 271 00:12:10,810 --> 00:12:12,090 That's the big picture. 272 272 00:12:12,090 --> 00:12:14,460 It will certainly all become a bit clearer 273 273 00:12:14,460 --> 00:12:17,700 as we write code, and as we develop our visual. 274 274 00:12:17,700 --> 00:12:19,900 For the moment, we can do more cleanup work. 275 275 00:12:19,900 --> 00:12:22,130 We can delete these four properties, 276 276 00:12:22,130 --> 00:12:23,650 and we can actually also delete 277 277 00:12:23,650 --> 00:12:25,730 all the code in the constructor, 278 278 00:12:25,730 --> 00:12:29,350 not the constructor itself though, just the code in there, 279 279 00:12:29,350 --> 00:12:31,600 and all the code in update. 280 280 00:12:31,600 --> 00:12:33,580 And now we can also delete all the imports 281 281 00:12:33,580 --> 00:12:35,440 which are now slightly grayed out, 282 282 00:12:35,440 --> 00:12:38,803 in my case the imports from line 10 to line 13. 283 283 00:12:40,250 --> 00:12:43,200 With that, this is a pretty clean and lean file, 284 284 00:12:43,200 --> 00:12:44,860 and we can now use that file 285 285 00:12:44,860 --> 00:12:48,330 to build our visual from the ground up. 286 286 00:12:48,330 --> 00:12:50,700 Of course, if you know reload here and Power BI's service, 287 287 00:12:50,700 --> 00:12:54,100 you won't see anything because now we deleted all the code, 288 288 00:12:54,100 --> 00:12:56,700 so what should be displayed here? 289 289 00:12:56,700 --> 00:12:58,640 But that's where we're going to pick up on, 290 290 00:12:58,640 --> 00:13:00,590 and that's where we will continue with.23949