Okay, we're live Hello, everybody. Welcome to this month's Wikimedia tech talk ouch. I have an awi using O O UI without pain Our presenter today is more L shot lender senior software engineer on the contributors team I'm your host Sarah. I'm a technical writer and developer advocacy We will have a YouTube stream which is noted here and Afterwards the talk is going to be about 45 minutes long And then afterwards we'll have a Q&A period you can ask questions on the YouTube stream You can also ask questions through IRC through the Wikimedia office channel I will put this slide up again at the very end so that folks will be able to see that And as always this tech talks are open for anyone in the technical contributor community at Wikimedia so if you have questions if you would like to Submit a talk yourself or a topic for top talk. Please check out this link. That's here at the bottom and Without further ado.  All right. I'm sorry. We're dealing with a Small issue All right. All right. I'm gonna start with a Different microphone. All right. So hello everybody. I hope you can see this and welcome to Ouch, I haven't are we using OUI without pain? I'm hoping that at the end of this lecture not only will you be using OUI without pain But you're gonna love it and everybody is going to love using OUI. So that's my plan I will be doing something that many presenters fear doing and so do I a little bit and I will use a live demo So I'm hoping that everybody will you know be patient with that and nothing will crash But as we all know when you use live demo things happen So we're gonna do in this lecture We're gonna cover a little bit very quickly.  And then we're gonna go over basic usage some pitfalls advanced usage and resources and the focus of this lecture is going to be hands-on Demos so hopefully that'll help out So without further ado What is OUI? Let's talk a little bit about the history So before visual editor Everything was PHP Thank you. Everything was PHP and We had JavaScript as augment right like we use jQuery UI we use rather JavaScript it's all you know was augmenting Things that were the no JS experience and for the most part we can media used to work on one big UI Product at a time like we didn't do a lot of Products at once with it pretty much every year one big product at a time Which allowed us a little bit? Thank you a little bit to adjust our strategies every time right like we used one big Product and then we learned from it. We knew the next big product All right Okay, and we changed a little bit the way that we you know each time works But then the first rich client application came in visual editor that really was a full-blown JavaScript application no longer something that just augment stuff and that required us to go in and and look at solutions because the current solution jQuery UI the raw JavaScript were not sufficient So we looked into existing library libraries at the time. Remember this is around 2011 2012 and We found that the libraries that existed back then Either didn't have insufficient didn't didn't have sufficient browser compatibility. You guys might remember IE 6 We used to support it very long time While everybody else didn't but it wasn't just IE 6 like we have browsers that we support that other companies consider You know out of out of industry for a while and we needed to support those and One other big problem was that a lot of those libraries had barely any support for internationalization and for us to add It in would be a huge chunk of work So it was very clear that we needed a very pretty much a custom solution for visual editor And that's where you know the thinking about that UI library Started but it began being inside visual editor, but then there's started to be a little bit more demand for more in JavaScript based products and We started working on more than one big thing at a time and it would be can begin To be very clear that if we get this new visual editor UI this new thing that we put a lot of time and effort to to make it Generic and it's very powerful if we get it out and let other other products use it we will gain a lot of UX and You know text-tag things so it supports internationalization supports older browsers it goes by object oriented principles We want to make sure it unifies the UX principles across new interactive products It's one place to make design decisions So when designers decide that something you know no longer is valid and we need to changes There's one place to do that and all of the products using it gain from it And of course we get code consistency And any updates to the system all of our products will you know gain from it so? It was decided that this is the direction we want to go in and around 2013 is also when the front-end standards group Started to form and started to talk about this with the technical committee And there was very much an internal consensus that You know we need to get a better UX for our users, and this is you know a good way to achieve that so from 2013 onwards we started using OUI for new products and We were starting to talk about which is just an ongoing projects to also Get the older products like you know special pages and stuff like that to be updated into OUI This project is ongoing although. It's almost done. It's getting getting close to being to being pretty complete. So that's cool So the next step that was the little ever history. Let's talk about the base principles of OUI I will run a little bit on this one, but the notes are available, and I will answer questions later But this is kind of like where OUI is coming from this is the base principles that OUI is based on For better and worse so the first thing we want to make sure is abstraction a lot of times Especially back then the data that you would use for JavaScript would be on the DOM element So you'd have data attributes you'd play around with them you'd have like another you know DOM element that stores your attributes and that caused a lot of You know a lot of problems especially when we know that in our stack we have gadgets and we can have multiple gadgets on a single you know DOM element or a single you know product and putting everything in the in the You know trusting the DOM element to store our data is not very Sustainable on top of that because we want to make sure that we support things that are not very trivial So for example older browsers making some polyfills You know making sure that things all the attributes are being read properly between browser all that kind of stuff We wanted to make sure that we have These components is widgets that do that work for you. So you can say I want an input and Whether ie reads that input attributes differently than Mike than Firefox We would deal with that you just get an input and you put it in there and you're done So the abstraction layer was very very important and then in the abstraction layer We have widgets and then the widget has a dollar element that is the representation of the DOM The jQuery representation of the DOM that you actually put in the in the DOM So you have kind of like these abstraction layer that's very important So things like for example set title you might think that it's really you know If you have a button and you say set actually a button is set label If you have a link and you have set title so title is just a title attribute, right? Well, not necessarily because if you have an access key you want to make sure that you're retaining it and if you have You know accessibility concerns are a couple of things that we sometimes do to add to it And you as the implement as a user of OUI You don't need to go and do a lot of research to make sure that a screen reader reads it properly Or that you know what kind of title do I need to use for different kind of elements? You just use set title and the system does it for you in cross Bowser and Multiple ways and the same thing with set label And things like that you can give it string or internationalization or a jQuery object And we kind of deal with you know what it means to add the actual DOM The second thing is componentization, which is a hard word to say and I can't believe I just managed to say it Which basically comes with the abstraction right the idea is that we want to make sure that things are components We call them widgets everything is kind of like self-contained as much as possible and That way you can take it's kind of like a Lego, right? You have like this widget this widget this widget you want to create something else You just include them in and this is a big principle of OUI for better and worse because for better It means that it's very easy for you to build a very very quick interface From scratch very quickly you just take I need like you know three inputs a button boom. I'm done the less good which is something that we're dealing with and we're trying to solve right now is that that means that the Structure of the DOM can be a little complicated because everything is nested So we are aware of that and we're trying to you know mitigate the CSS factors of that and stuff like that But it is very powerful When we are looking at things like we want to make sure that our gadget users Can create these kind of things without a lot of trouble like they they can just come in and say I just need a button Well, here you go. Boom. You don't need to do anything else, right? And it manages this the state for you the events. It's synchronizing all of its internal widgets It does all the calculation for you if you want to add if you have a button And you want to add an icon all this Consideration of whether or not we're moving the label and how much and you know Sometimes padding and margins are different in you know firefox and chrome which can happen all these things are done for you We have a lot of that kind of like you know calculation code So that was kind of the point of making it very very straightforward The other principle is event driven, I think I'm a number four right now Event driven the entire library is based on events And this is just an approach that we took that You know, there's there's multiple ways to do especially nowadays. I think the bigger thing now is Going with state All right with Redux and all of that Whatever exists OUI goes with events That means that we can also do things like simplify the events for you So this kind of relates to also the abstraction Think about an input widget and if you want to make sure that when someone types something in You want to respond to a change event? Well change event is not just a change event that is in the DOM a change event can be a copy paste It can be you know, I just added a letter in it can be I marked Something and dragged it over which can happen. So it could be a whole bunch of things. We do that calculation for you We translate those events from the DOM into Cleaner events from the widget where you can take the self-sustained widget and say, okay, just listen to change I kind of don't care what you do in the background. I just know that when it changed I'll listen to it and that's how it works. And then when you create your own Interface and we will look at this in a minute But when you create your own interface or your own widget, you can trust kind of to say I want a button listen to click whether that click is in the DOM a click a mouse down or a touch because some cases cover other browsers or whatever is Irrelevant for the fact that you'll get a button that will respond any time a user made a click Intent right so that that is kind of like you know the event idea also Something that sometimes is missed and is very important It's not just the idea that widgets emit events a lot of widgets are also Managing their own starting and stopping event listeners, which is very very important when you have a lot of other Kind of considerations going on in your in your page So just a very quick example when you have a pop-up a lot of times We you know OUI would internally you know turn the events listener on when the pop-up is toggled on And then you can listen to whatever is inside it But when you turn it off it will turn off all the events so that we don't get you know This noise event when the pop-up is unneeded when the internal stuff, right? So we do all of that stuff for you know the user you don't really need when you implement all you I don't need to think about that at all. You just use it out of the box and Of course something that's very important for us And only recently seemed to have started to be a little important to other people is supporting no JS experience We have a php stack so it was important to us to work with that stack and OUI does that we have OUI widgets And we have something called infuse The OUI widgets also work with our html form So you can add a widget to the html form and most of our special pages actually auto-infuse so you don't really need to do anything and This is just a really simple way for us to say you know Here's the interface for no JS experience. Here are it looks the same It has the consistent behavior And then I want to make sure that also those widgets behave the same way that they need to behave in JavaScript and I just infuse them in and OUI takes over and OUI will know how to take the same name the same configuration options and create that JavaScript widget that can that will be then in the DOM and will be dynamic and And Lastly, of course internationalization and accessibility in fact recently. I think we are completely compatible with the accessibility standard party that was awesome and It and is one of those things that you know the foundation and the movement really really cares about way beyond a lot of other places So obviously we wanted to make sure that the entire library Gives gives that to users basically for free like you don't need to even think about it You create a widget or a gadget or a product for the most part You don't need to think about left to right right to left whatever you create it and the system will automatically know for you how to adjust itself and for example, I have a little you know the screenshot is a pop-up button widget and We didn't need to specify anything. It's a button. It's a you know default button pop-up widget So in left to right it goes towards the left and in right to left automatically for you You didn't need to do anything it will go towards the right and even our Configuration option so if you do want to kind of configure it and you want to control where it goes The wording of the configuration option already kind of are set up for you to understand that it will automatically support Right to left and stuff like that and the same goes with a lot of other language concepts So this was a very very very big deal for us to make sure that this library is doing and That a lot of other widget libraries didn't do and and that was very important and again with the thinking is that We have a lot of developers that want to do quick things that are might not be you know Super aware or experts in all of those things whether it is events or internationalization or whatever And we wanted to make sure that they can take those buttons take those widgets takes whatever create a really powerful interface with that But also fits, you know the standards of the foundation in terms of what we want to give people in terms of internationalization. So All right, so we no further ado that was a little bit of an explanation So we went over what is OUI we went over the history and we went over you know, what is the principles that it's based off of and Now we can kind of delve into basic usage, which is introducing a little bit of the widget. So I created a little demo and as Befitting live demos. I hope it won't crash But I created a Little two widgets. We're gonna look into one and then another I will leave it up online so that after the lecture if you want to take a look at it and play around with it You can absolutely feel free But that let's take a look and this is kind of an introduction so the first one Here is my basic widget. We're gonna go over it in a minute But just for this demo, I took over a special blank page So I'm just gonna turn that on and turn on sorry the console All right, but before we go and look at that all I did Okay after loading OUI modules and after verifying that I only do that for a special black page You know very quickly just so that I can demo after I do that. All I did was You know in the content of that page. I attached to widgets So I just started Initialized a button widget with a label OUI button widget and then I initialized a text input widget with a placeholder OUI text input widget and I Appended both of those to the content area of that page So remember we talked about the widget the componentization. So the widget itself is widget button but what I attached to the DOM is the dot element of that and I write this here so that people won't completely kill me for polluting our global variables Which you should not do but for this demo purpose And is only I am exposing it in the global variables just so that we can talk to it a little bit in the console So I know I shouldn't be doing that Don't don't Don't yell at me too much. It is a gadget that I use for this Anyways, okay, so as you can see I have the button widget with the label button widget It is clickable and I have an input a lot an input great So I have two widgets and I can see here that if I go to OUI demo I have button and I have text input Cool. Well, what I can do with this is for example, let's take our button Right and let's do it change its label. So let's set the label to click me and as you can see I Kind of practice this before so it somewhat completes my code. Click me. Yay. It changed to click me Do I need to make it larger? Let me oops Here, let me make this a little larger. All right Click me. Yay All right, what else can I do? Well? We can also listen to events. So if I do all your right demo button I'm gonna listen to on click And I'm gonna tell it when I click I want to see some alert telling me I was clicked Whoops and now of course. I need to make sure that I close all my brackets in a live demo All right. I'm here and then please work Yay It's working. All right. So it listens to events. Okay. Well What can we do well first of all because I'm gonna keep on playing with it The first thing I'm gonna do just so that they don't forget is turn off that event because we're gonna listen to it again In a minute, and I don't want to create a stack of events, but now let's see what can we do with the? Label well, I have the text label text input. Sorry with the input not the label First of all I can get its value which oops get its value Which is nothing right now. Well, okay, how about I set its value? Okay set value to Foo because that's what we usually set it to there we go. It's full And I can do really cool stuff like you know what I want everything So I'm gonna do a set validation and validation is a function that take whatever you give the input and Returns whether it's valid or not. So I'm gonna do something super simple like it's only valid if I type good And let's see. Well, I click here first of all foo you can see it's red. It's invalid If I start saying good Boom, it's valid There. Yeah. Okay. So things are working What else I have like a little cheat sheet. Oh, I can change the flag So a button has a flags and the flags doesn't kind of dictate what its meaning is which also means what it looks like so if I take the button and I say set flags oops Yes, set flags And I can give it an object and I can say right primary true and Progressive true Boom it is now primary progressive Another thing I can do is I want that input that I just did and W. Oh, you want a demo Text input How about we set an icon on it search? Maybe it's a search Thing and this if you take a look at that input you can see that not only is the icon on but the where you type moved And this is what I was kind of talking about before about abstracting things for you So you didn't need to add the icon and then figure out where it goes and then maybe in zooming level It changes we did that for you. You just add the icon. It's in there You can change the icon in the middle. I can do whatever you want. We set that up for you And now let me do something I'm going to tempt my luck Let's create something nice here. Okay, so I'm creating a counter and I'm going to create another widget and I'm going to use an Oh, you I tag multi-select widget tag multi-select widget is This widget that allows you to add things with little little pills, right? And I'm going to have it allow arbitrary so I can add whatever I want in there Otherwise that widget takes values from existing values So I'm going to allow it to add like whatever we want. All right, so I did that. Okay. I have a widget in memory now Well, the next phase would be to include it in the DOM so content text I think append and Then it's not the widget. Remember, I append the element. The element is a representation of the widget So I append the widget boom. I have something here and it looks like it's just an input But that's because that's the you know initial state of that widget if I start going with One two, you know the widget works so it's here and that's great. Okay. Well next let's do something nice How about we go to the button And we say that on click we want to Have the widget that I just created add a tag With a number on it counter I hope I closed all my thing. Okay All right, so on click Right, you can see it here on click. I'm going to call the widget I created to add a tag With that counter now the point of this demo is to show that widgets can also listen to other widgets right like we need to them to communicate with one another sometimes I can get that reference in and There we go. I can create a bunch of lovely tags I don't know how useful that is but it does work So this is kind of you know a demo of how base widgets, you know work work and you can find those bit Those widgets if you go to doc.wikimedia.org and then you have a section about o ui and you have demos in the java script You can also change it to the php demos But in this demos you can kind of see all the base um Widgets that we offer with kind of like, you know some of the Sorry some of the configuration options So you can have like, you know the button. I was talking about flags. You have the button primary and progressive What happens if it's destructive primary and destructive? We can kind of see like what what they mean you can play around with them Towards the bottom there are a little bit more complex widgets, but there's still widgets that come out of the box from o ui so you can see The widget that I was using the tag. How about I look for a tag multi select widget Is here and you can play around with it And there's like a menu version of it and stuff like that So you can play around see what you need Play around with different configuration options and then figure out what you want to use But these are all out of the box widgets from o ui I'm sorry all right, so um you can um I will go back to this page later because we have other things that we offer with this You could I want to show code, but um we're going to fix it up But what you could do in this by the way, which is very very very very powerful I created the gadget to be able to kind of play around with it But you can actually play around with it in the demo So I basically there's a tiny little uh Arrow here that says toggle console you can open that under any of those Widgets and then the reference to the widget you're looking at is widget, right? So if I say here widget set label foo Whoops It changes so you can also play around with that in the demos, which is super powerful So you don't have to create this uh, you know Gadget for yourself in order to be able to play around All right, so that was basic widgets Now let's see about custom widgets So we kind of showed I showed, you know, how we have two widgets and Then three widgets and they talk to one another And um, how can we you know, how can we make sure that they uh, uh are Uh linked and all that kind of stuff Well, sometimes you will need a widget that doesn't exist yet and you can create your own And that could also mean something that you embed later in a pop-up or you can You know use maybe multiple times in your interface depending on where the user clicks it Or even just to make sure that you are componentizing and abstracting your own Work so I created another example and again all of this will remain online that you can examine but I created another example in this link And this one is a little bit I don't know. I wouldn't say it's complex, but it's a little bit more elaborate. So in here. I'm just I'm creating um a Custom widget and I'm going to show you before I'm going to the code. I'm just going to show you that it's here I'm going to make it a little bigger Can I make it a little bigger? Hello? Yes.  This is my class that will be my new widget and it extends The base widget so it just extends widget. Okay, oh you I widget and Um, we call the parent. That's what we always do We set up the config and then really I'm starting to build it So I have the pieces here as title widget, which is what you saw. It's kind of like what is blah blah blah my question I have a notice widget So the notice widget comes to be when if I open this and I give for example No answer and it says give me something give me anything that is kind of a notice, right? But it's it's hidden sometimes it's hidden when it has nothing But I still need to give it a room in the DOM So I create it a notice widget and then I have the input and I have the button So I basically just created those widgets I added classes to them so that we could style them later, but they are straightforward widgets The button has a label the input has a placeholder And then the other widgets I didn't initialize them with the value because it depends the value comes from You know the config and how do we do that? Well, we attach it first to the DOM So this time we don't attach it to the DOM of the page. We attach it to the DOM of the element. So every time you extend OUI widget you have a this dot element And you can append to it and that will be you know the constraint of your widget and then you append to it Title notice in order right title element notice element and then input and button Please ignore the CSS here. It's just because this is a Gadget and I did not want to start messing around with you know including CSS files So this is just to make sure that doesn't completely look bad And then we want to connect to events. Well, I want to do something when I click the button So I connect the button to its click event and I tell it to call this method But also the input you you might click enter on it. Well the input Abstracted for me the action enter. So I just listen to that and call the same Method and then I just initialize it. So I basically set up this Widget with the option of giving me a question and a series of answers So I'm setting it up in the beginning And then of course I'm setting up all my methods. So this is what will answer the event on button click So very very briefly again, you can take a deeper look at this later if you want to but very briefly if I have nothing I will tell the user or give me something. Give me anything When you do it, please remember internationalization. This is just for a demo If I'm checking if the answer is valid if it's valid. I'm setting it as valid I'm the notice will say correct. The button will be disabled and I'm going to emit A success event with the answer I was given If it's not valid Then I'm going to say wrong try again And I'm going to meet failure and either way I'm going to erase the value of the input All right, so this is what happens when I either click the button or press enter And then this is my way of checking if the answer is valid. It's just We're assuming that the user gave us an array of answers And then we're checking whether it's in the array Setting the notice. This is another way to kind of like show how you abstract things set notice will not just be Setting the label. We want to set the label. We want to toggle it to be visible And maybe I want a class to say, you know what my my widget has this state now that it has a notice Because maybe I want the css to also Have conditional stuff on it so You can do that and then set new question I'm getting question getting answers and I'm just setting things in I'm saying, okay. Here's my answer options I'm going to change my title widget to have the label of the answer and then I'm going to reset stuff here and emit reset So this is the way that it kind of works. So let's let's go up and check So it's asking me to give me anything. So if I say I don't know. Well, that's not a valid answer So I'm wrong try again. And if you notice my background became red We're going to touch on why that happened in a second. I'll show you And then if I say object oriented javascript. Well, that's correct. I get Correct. So the widget changed itself and then I get An alert and my background changed but in the code that I showed you there was no alerts There was no background change the results only an event Which is my next step to show So after I did all of that and I defined my widget now I needed to Append it somewhere. So I'm Starting it up and I'm starting it out with some question. What does o ui stand for and some answers So object oriented javascript or in object oriented j s right both of those will be valid and then I just took a Simple pop up button widget give it a label and a title And then in its pop up I said in the content area of the pop up I put my widget right remember my widget element because that is the DOM And I gave it a padding And then the pop up which is what I want to kind of like include was included in the actual DOM Not the best location, but you know it's a demo. So But here's here's the second thing that I was doing So this is kind of like you know this allowed me to look at it in the DOM and play around with it and have it included in the pop Up But the reason why things worked with you know the background here is actually this this is the events Right, so I have my personal widget my personalized widget my custom widget That I'm saying on success now the whoever's doing this space They don't necessarily care what it means like how the widget works to define what success means They just say I have this Question widgets that I want to know if it's successful or not Right, so on success you change the body codeler and you put an alert on fail You do something else and on reset you reset the color This allows you to Do things in abstract way and answer kind of widgets in you know separate your code in a logical way Like you have how do things are defined as success? How do I validate stuff that's inside that widget itself sustained other people may be able to use it But even if not I can use it in my code with a very clear separation Where either I you know anything else you know in this case just my general Initialization listens to that but it could be another widget that listens to that it could be You know a gadget that listens anything like that so This kind of shows the separation of stuff and I've exposed Let's see I've exposed that widget again, oops Did I call it? I'm sorry. I'm w It was a it was very bad at exposing things into the global But I expose it so that we can call it in the Console so if I have it here, it's correct and I say all right. Well I'm w tada da Set new question Yeah, I already tested it out. Uh, how are you today? And I'm going to accept awesome and great and Okay, so I'm calling this from outside the widget From the console in this case awesome and great. Boom. It reset itself Right because that's what I told it to do. I abstracted things out. It just reset it for me Let's see what happens if I say meh Nope, you're wrong. You do not feel meh Give me another answer. All right. Well, great Yay That was correct. Great. Good answer Alrighty So we kind of went over this a little quickly. I'm hope that it was sufficiently Kind of explained I will have time for questions So we can go back into that But that is basically custom widgets So this is you making a lego making kind of like, you know, your own widget by using other widgets and connecting them together And we have a lot of those examples also in some of the code and we have a tutorial for that in the OUI tutorials now So you can also follow that All right, so in this case, um, exactly I have a question widget it emits success or fail Um, and then Uh, the pop-up widget or anything else can just listen to that Not really mind what the widget is doing whether fixing things for itself and just answer that All right, are you guys ready? I am getting into advanced usage. This wasn't advanced. No, I'm just kidding This was pretty advanced usage. But what I'm going to get into is a little bit more logical Um, uh advanced usage because of things that we kind of see what people try to use. Uh, OUI with really complex products So I'm going to give an example of a complex product, which is the recent changes filters So the recent changes filters, one of the things that happened is this is all OUI And there are custom widgets in there, of course But there are also you might recognize some of the base widgets. So the tag multi select widget Is a base widget. It was just adjusted a little bit. There are button widgets there There are pop-up widgets. So everything is kind of, you know, based on existing widgets You know that we we kind of toggle But the main thing about it is that everything has to listen to everything else So, um, I don't know how many of you actually like use this on a regular basis But the saved filters is kind of like this menu where you can store a set of filters for you So the save filters kind of like listens to this button to save the current filter But also it can the button listens to it because it needs to know should I appear or not because if I am displaying right now An existing self filter Saved filter I shouldn't appear so it needs to know the state of that and then the pills the tags Need to know the state of what happens to the You know the the pop-up right and the pop-up needs to know what happened to the tags And we have a switcher of namespaces and tags Well, the input needs to know what's going on because it adds a prefix for you But also the pop-up needs everything just needs to know what everything else is doing And one of the things that I see sometimes in some of the products is that People then try to implement everything inside the widgets so Which is not a bad idea and I did that in the demos when you're talking about a relatively small project Kind of like a relatively self-contained small widget that you might want to reuse or something that has like its own Intendance relatively small just like you saw the question widget But with something as big as this that needs to really know like everything needs to know the state You want you might want to consider using a model Which is what we did for recent changes filters So we have a controller and a model and then we You know, we make sure that the widgets Call the action on the controller. We have everything normalized the controller will change the model And all the widgets just listen to one single model and the model emits a change event And then the widgets just say oh it changed I'll adjust myself And you end up having one single source of truth instead of all widgets kind of Oh, no, I forgot that this widget needs like the other four widgets to listen to and you need to like Start delivering all widgets to one another now. You just give the controller and model to everything And you have a very organized thing. So we just don't need to know about the other widgets They are very self-contained. It simplifies your code. It makes your life a lot easier when you need to go back and fix bugs Trust me Because that happens All right, so this is kind of you know, just a shift in thinking and this is this is something that We're kind of planning to check into maybe using that in o ui base In some of our advanced widgets as well to give you more powerful stuff All right, we're getting close to Close to the end here So here are some resources that you can use and you should be you know Again, this will be Shared and you can Bookmark all of this. So first of all, we are going towards the road for version one Right now we are 0.32 32 33 1.32 Sorry, I lost I I'm having a Signals here 1.32 0.32. Thank you. Okay. Anyways, we are I'm uh, I can't read the signs signs signs apparently Anyways, we are going towards the road for for version one And there's a ticket for that if you have anything to contribute if you think that there's something needs to happen Before we go to version one. We really really need your input um And we could really use You know a help on that and more eyes Well, there's the fabricator board. So if you have anything you run into from either of course If there's bugs if there's something that you you know, you're using a widget and you think that it shouldn't be doing that Um, please submit a ticket But also if you want to see more things in o ui if you're missing something if you're saying, you know I am missing a widget or this widget is good, but it's missing this functionality. This is really useful for us Um, because then we can come in and say, okay, there's a very clear functionality that we need to go Rather than try to make sure that everything is generic enough without having a very clear, um, you know use case So, um, if you have those please please tag uh tasked with o ui tag Uh, and then we have the documentation. So we have the demos that I kind of showed um Briefly, but you can go in there and there's I think all of the uh base widgets are there With various combinations of configuration And then we have the code documentation. We actually put a lot of effort into the code documentation. It's a really really good General documentation that has a lot of examples in it So we have the php one and the javascript one and fairly recently this year Tutorials were added in and we're thinking of expanding those as well. So right now we have two tutorials. Um About using uh making a to-do list The you know the first tutorial is basically using uh base OUI widgets and the second one is extending them uh and going through it step by step And you're very much encouraged to use those and again if you have any ideas or any comments About more tutorials or something to do with the current tutorials Please let us know you can tag fabricator tickets with o ui or you can go to wikimedia editing In irc where we lurk and wait for OUI ideas and bugs and with that thank you And um, let's see if there are any questions Hi, everybody. This is um, sarah as well. Uh, just to let you know that I am also lurking Uh and waiting on irc and on The youtube stream, we do have a few questions from the irc Channel moriel, would you like me to ask those or do you have ones in the room? No, go ahead. Okay so Uh, and if I miss a um question, please feel free to go ahead and ping me on this irc channel. I'll I'll look for it so we have a question for For you moriel. What are some of the best cleanest examples of o ui usage in? I think that's in product that we should consider exemplary. Ah That's an interesting question. So, um I can probably find I mean off the top of my head. It's a little uh hard I need to just take a look again because one of the things that happened to all software engineers is that even when you think Something is clean Within three to four months you realize that you made a lot of mistakes You wish you didn't and then it's no longer clean So I can give you a couple of products that I think we did well for its time But if you want me to find really a good example right now if something very clean, I'll make to take a look at it So I will say that I will say off the top of my head I will say rc filters is pretty is pretty good example We took a lot of effort into separating all the logic That does mean that in some cases we um on purpose shut down some of the widget events because we wanted the the um Model to do that But overall I would say it's a it's a good example for the OUI can do it's a You know very clean I wouldn't say it's very simple though Like it is a very kind of like a a rather complex product So I don't know if I would say as beginners it would be very easy to read it But maybe go over it a little bit. There's definitely, you know, especially with the MVC kind of plan Other products, um, I'm going to need to take a look. I'll I'll get back to people Oh, notifications. I'm sorry, which? Okay Okay, I'll repeat the question because you do not have a mic although I have a mic here So fokker points out that content translation to from a user perspective is very good on how to use OUI From a UX perspective is very good And then we also have notifications Both the pop-up I would say and the page are maybe good examples We also have a lot of separation of concerns there and and kind of like individual Widgets And I will just need to take a look and see about other maybe maybe simpler Products, but these are the ones that come to mind. Incidentally, they're the ones that are so worked on So that might be why they're coming to mind, but yes That answers the question a little bit One of the things that we can do to you after The talk is over is we do document the talks on Page on media wiki and we can put links to Some of these things there. Yeah to support this talk after sure So we have another question. I or see we actually have a few or a couple Um, the the next question is does ooui My screen just moved does ooui have dependencies on the media wiki ecosystem or is it easy easy to use elsewhere You can use it elsewhere. I have I have a project that uses as well and we have Actually in community tech. We have a project that uses it elsewhere Um, I would say that it depends what you need to do right like ooui was very specific Answer to our use cases To the level of internationalization that we need to the level of the fact that we have Gadget people that write gadgets and stuff like that It might not be the answer to everything that you need in your private project And it is not competing against You know these kind of libraries on the flip side. It does give you a lot of You know power in terms of an existing widget You don't need to think about boom inside the DOM and if you do want to use it ooui is a composer package Um and an npm package and you can include it in your project And it's fairly easy and you just um, you know you add it in and there are documentation about that In fact in the tutorial the tutorial assumes that you are outside of media wiki So the tutorial kind of like guides you through You know your own demo page that's just blank html so you can kind of go over that and see what what is required And also just as a note folks have been adding links to the irc chat So if people are looking for those they can check in the irc chat and I will also put those on the The page for this talk afterward awesome For our next question, uh, it's related. It's um, how many products currently use ooui And how many don't book could Oh, I actually am not sure about that. I know that there is so all new products Um, should be using ooui now. I mean a lot of the uh, The recent efforts to make sure that it's uh, especially with the accessibility now and everything like that And we have done a very very big project to convert a lot of the existing things And I think we're almost done with that. How many of them folk are do you have any idea? microphone, please Yeah, um first of um, what are what products are we talking about? Are we talking about wikimedia foundation? products or products in the wild We have it in use in basically all major products besides mobile front end and mobile front end has done some work in on the preferences pages and comes now with advanced mobile contributions um, and uh I think um We don't have a we don't have a discrete number But this is something that we gonna put on our uh documentation as well because um, it gives a better um insight on how successful it is used in the wild actually Yeah, so I can't pinpoint it to 12 13 14 or 23, but um, it is a lot Okay, as well. All right. We couldn't add that as a follow-up as well Okay, it looks like I don't have any other questions on irc. Uh, I don't see any on the On the youtube stream either, but we might want to give one extra minute for that And if there are questions in the room, uh, people feel free to ask I'm just really excited that my demo widgets didn't have bugs in them. I don't know. I mean This is like I think, uh, you know miraculous A live demo Any questions in the room? I do have a question on the youtube stream I think it's a question. It just says any thoughts on web web components on ooui web components So I don't know if that's really a question or just a kind of some comments Can you repeat the question? Any thoughts on ooui web components? Voker the planner of ooui. Well, um, so this has been this has been a topic that has been floating around for um, several years currently we are Not having concrete plans in this direction just because we had a lot to do with bringing the current library to all the products and Again, it's a resources thing first and foremost web components on the other hand were Got a little bit hyped and then I saw some technical obstacles in the standards development But we are following the um, we are following what's out there and following the development And we will pick this up as soon as we see the viable as a useful addition How to encapsulate the ooui and just provide a more simple api There has been some work by people like Bartosch to bring um things like m w ooui button to the core but Again, this is a longer discussion that we are inviting you whoever brought the question up to join and Discuss with us Yeah, and you can see a lot of those questions on the board on the ooui board We have a couple of tickets that are a little bit longer term ooui does have resourcing Very very low resourcing right now. So a lot of us that support ooui core do it kind of outside of the regular job that we're doing And voker is a hundred percent on it But you know there's there's resource constraints So we do have to kind of prioritize kind of things and this is where You know you the listeners and participants can help us because if we know that there's a need That will really really help us out prioritize And know that you know because there's a lot of things that we want to do with the library There's a lot of things that we need to do with the library that bring it back You know a little bit forward from 2011 to here Although there's a lot of things that are modern, but still there are things that you know we want to change And knowing which one is the next thing Would would kind of also depend on use cases and ideas and people who want to participate. So please Um use the board use the IRC chat Do you want to talk about the front end? Group if anyone wanted to Yeah, I was uh I wanted to add Thank you for you and bringing up the roto ui 1.0. This is our biggest priority right now and additionally there is also a group within the vikimedia foundation from the developer standards group where we discuss Things like standardizing our Efforts standardizing and sharing our efforts across the foundation Where oh ui plays a big part So if you're interested, um, please hit me up falker at vikimedia.org and i'm gonna invite you for this group All right Was that the last question or uh, yeah, the last question came from the youtube stream So, uh, if there's a clarifying question, um, I just want to leave it open for a little bit so that uh The person who asked is able to ask And then um I don't so that that might be a good good uh good time because I forgot to mention this and we will probably Put it up in the uh in the documentation of the talk But you can reach me as muipu on IRC for any questions that you have and um wikimedia edit wikimedia dash editing, um On IRC is where we lurk and talk o ui So even if you have follow-up questions and you want to know more and stuff like that This is a good place to kind of be You know asking those questions and getting me and other people to answer Also, just a quick note, um, because I did type the person's name wrong in the youtube chat I'm juggling between a ton of different windows. So I might make some typos when I'm chatting with people um So just so you know, I I'm sorry if I mess up your name Yeah, it looks like uh, we're good. So thank you very much


okay today we are going to demonstrate the use of energy harvesting a condition when you use NFC to power up not only the NFC device itself but also another microcontroller where the NFC device is dynamic tag is connected to. In this case I have the NFC L4A1 a coupled to the nuclear board L476 nuclear board SEM32. Notice that I no longer have the SD link section but the SD link section will consume all the energy so I remove it so that I would not consume all power that way. So now we will run the SD25 DV application the SD25 NFC tab it's located on Android the Google Play so when I put it on there you notice that the LED is blinking rapidly it means that a program the firmware at this point is blinking the LED back and forth. So what we want to do we want to be able to change the LED pattern by downloading a different firmware that does just that. Okay so you might notice that there is a piece of I have put down a piece of rubber here because normally when I download the firmware it takes some time because we're transferring it around 53 kbps we're transferring around you know some case a hundred k bytes and that can take you know in order of 40 15 seconds so we are going to put a little rubber wheel here Lego rubber wheel so that we can have some stable spot so we can really do something with it. So now go to this menu and you scroll down do you go to firmware update you select firmware file so you see select a firmware to form memory my files so we choose select firmware 1 we do start the transfer password for firmware 2 firmware 1 is 712345672 now the transfer is starting make sure that you don't break the transfer when the transfer has been started so if you basically move the phone away from the antenna and disrupt the transfer then that would basically cause a disruption. Transfer is okay so if I put in our so if I put it in RF feel again and just simply power this thing up you notice the LED is now blinking very slowly and how it works is that there are two banks in the SM32L476 so what we did we through the mailbox feature of the C25db we copy the firmware onto bank bank 2 because it was running bank 1 then we do a switch bank and now it's running from bank so the fact of the architecture the SM32 make it really easy when you have dual bank architectures because you know in many cases when you have situation a default firmware need to be executed if something happened it appears from you can do that on the fly but in this case we actually use it to to change to change the firmware of the SM32 thank you


Hi everyone, I'm Anne. I'm working at the University of Oslo and together we'll go through the Galaxy 101 for everyone tutorial from the Galaxy training. So where can we find this Galaxy training is in the training galaxyproject.org and introduction to Galaxy analysis and Galaxy 101 for everyone. So all the training material look the same, you will always have at the top this panel with the question, the scientific question we want to answer. And here this is what are the differences between the iris species and I will explain you later on what what it is about. And the objectives of the lesson so we'll familiarize ourselves with the basics of Galaxy we learn how to import data from external sources. How to tag datasets, how to run tools, how to use histories, Galaxy histories, how to create a workflow and share work. So this tutorial takes about one hour and a half and we'll go through step by step. Here you can see all the different Galaxy instances you can use for running this tutorial. If you left click, you can see most of them can run this basic Galaxy 101 for everyone tutorial. I will be using the use galaxy.org the main instance. So if I go here, one of the first step will be to register and to log in. But let's see, look at the interface first. Here you have the left panel, which is a tool panel with all the different tools Galaxy tools will be using a few of them. This is the main panel where everything will go on mostly when you run tools and when you inspect datasets, and by default you end up in the landing page with news and information about the Galaxy project and the Galaxy instance. And on the right panel you have the history panel, which is here empty. We need to log in. So we need to register. If you haven't registered yet, I will click on this login and register. If you don't have an account yet, you need to register. Put your email address password and the public name. Once you will once create you click on the create button you will get email confirmation it can take a few hours. And then you will be able to log in. So I have already an account so I will look in this galaxy instance. And there is no differences between what we had before and what we have now, except at the top here if I click on user, I can see I'm logged in. And this is what we want. And actually now I can close the panel for this tutorial because what we will be using is this very nice feature here if I click. I actually get the training, Galaxy training website with all the different training. And I can click on introduction to Galaxy analysis. And again find this Galaxy 101 for everyone. So nice, because we have these two panel here. I have this Galaxy 101 for everyone. And if I click on this external panel, I go back to my Galaxy instance. So let's have a look again to the Galaxy 101 tutorial. You have some introduction and background so we'll be using Iris flower data set. You can get some more information looking reading the paper Fisher paper from 1936 and some more information on the wiki page here if I look at it. Tabular data set and each row will contain one flower. And we have a flower with different characteristics. They are all Iris flowers, but depending on the size of the lens. Petal lens or simple lens or with it will be a different species of Iris and this is what we will try to analyze in this tutorial. We can read for more if you want to. So we have login and register and we have looked through this different panel with the tools main and history. And now we will create a history and this is really good practice when we start an analysis in Galaxy. It's really a good practice to start with a clean history and have only the data set and all the analysis results of the tools. You have used for this analysis because we'll see later when we'll create a workflow from the history it will be much easier. It will only contain your the steps of your analysis. So we'll do this part where we'll create a new history and we'll name the history Galaxy 101 for everyone. I'm going to click here to get back to my Galaxy instance and you see this plus button here. So it's loading and to change the name I click on the name life clip and I change I passed Galaxy Galaxy 101 for everyone. So to be effective you need to click on enter. If you don't, it will not rename your history. So we have renamed the history. Let's go back here. Next step is to upload the Iris data set. So you see this little button here copy. I will click on it and it will copy this line into your. You can go here in the upload data and past and fetch data and you can pass it and you can start and close. It takes a bit of time sometimes you need to refresh. So when it's gray, it means is your task is cute. And now you see it has changed from gray to orange. And it means it's running and you can see because it's spinning here. And once this is done, it will turn to green if the task is successful and red if it fails so now it's green. So you can see we have the data set and the next step will be to rename the data set. So this is what we explain here in the next step. So we have uploaded data set. And now we are renaming the data set to Iris. So we also check the data type, make sure this is CSV for comma separated value. If not, we'll change the data type to make sure it is well handled as a CSV file, and we'll add a tag, which is Iris tag and to make sure the tag is propagated to all the different data sets using this data set as an input for instance, an input to a tool. You want the output of the tools to have this the same tag. So we use this hash in front of it. I will show you just right now. So now we need to rename the data set, mostly because you see this very long name with an address, a web address is not very convenient. And in addition, some Galaxy tools do not work when we have this complex name. So I change the name here and I click on save. Then it will change it. I will check the format. So the format is CSV and it is correct. You can change here in the data types. And you could eventually change to the right type and click on change data type if this is not correct. So here this is CSV. So we are all set. Last step is to add a tag. So to add a tag, I can edit data set tags. And then I can add a tag here. And remember I said we need to use this hash tag and iris and I enter. It will take a bit of time to be effective. And now I have it. It's refreshing. So we have the iris tag here, right name and I all set. So now I can start my analysis. So we'll do some pre-processing on the data set. We'll convert the data set from a CSV file to a tabular. So why do we do that? Because many tools in Galaxy use, they use tabular format instead of CSV. So this is much more convenient to always convert your CSV file to a tab, separated value. So for this, we'll go to the convert panel when we click on the edit button and we'll convert from CSV to tabular. And again, we will rename the data set. Always good practice to rename the data set to have meaningful name. This is much easier to go through your history. And we'll answer to the question, how many header lines does our file have? How many headers do we have? Let's go back here. So what we need to do first, convert from CSV to tabular, rename the data set and then answer the question. I click here, edit attributes. So I will convert tab and here convert from CSV to tabular. I click on convert. And you see, and now I get a new data set. So every time we do a process or an analysis on a data set, we run a tool, we get a new data set in the history. Now, so I will wait and I will rename the data set to have a much more meaningful name. And I will rename data set to Iris tabular and I click on save. Now I have a new data set, Iris tabular, and you see the tag Iris has been propagated from this data set to this one, because this data set has used this data set for the analysis. It's just a conversion here. Can we answer to the question, how many header lines do we have in this data set? I will click on the I here, which is view data, depending on the size of the data set. It can take more or less time. Yeah. And now I can see all the different values with a sepal and sepal with better lines better with and the species here on the last column. So we have only one header, which is a colon name of each of each column. Let's go back to the next step. Now we'll do some real analysis. It's time to run a first tool. And what we will do is we will remove the header because many of the different tools we want to use would not be able to run with this header. And we know we have one header line. So to find the tool you can use this search bar here and type the name of a tool and to search it. When you are running a tutorial, this is a very nice feature you can click here and you will get access directly to the tool. So we'll run this tool, which is remove beginning with the following parameter. So we'll remove the first line because we want to remove the header. We will select the iris tabular. Now we are running with iris tabular data set, and we'll click on execute. So, and the next step will be to rename from the result of the tool to iris clean. So let's do that we'll click here. And remove beginning. Yes, so we'll remove the first line. We'll take the iris tabular. Yes. And we can click on execute. If you want to get a notification, you can select here. Yes, and then you will get a notification when the tool, your tool has run and finished, which is very useful if tool is, is quite long. So here, I click on it, it will run. It's running already. And remember, I will rename the data set here. I can check it. I will I can see there is no header anymore, and I rename it to iris clean. And I save. Yeah. And again, you see this tag iris has been propagated because it used originally a data set having this tag as an input to this remove beginning. So let's go back here. I rename the data set and can we answer to this question. So which tags are present on the resulting data set and how many sample lines does or data set contain. So I have already answered to this first question, which is the number of tags you have. And we have always this iris tag because we have put this hash sign in front of it when we first added the tag here so it's always propagated. Let's see how many lines do we have here it is written we have 150 lines so this is very handy. So you, you can also see some of the line here. So we have already answered to the questions here. Let's go to the analysis part. And in the analysis part we want to answer to the question what does the data set contain. So how many different species are in the data set for this. Remove. So we will select the column and cut by colon and we'll look at the colon five so why colon five so I look here 12345. So this is where we have the name of the species and remember we want at the end to have a workflow so we want to automate all the different steps. So we need to look at this colon. And we see that sometimes this, the name is changing for seed from setosa to versicolor and Virginia, which has a different names of the species so we want to select this colon. And we want to have a unique values to avoid the repetition many times of the different species. So how do we do that. We will first use a tool which is cut. So to cut the column from the table and take the column five. We'll say that we have a tabular data set is still tabular even if now we have no header. And we will rename the resulting data set to Iris species column. I copy here for the name. And then the second tools we will be using because we will have only the fifth column so the older different names will make a will use a new tool which is unique to get only the different values unique values on this column. Let's do that first I get cut. And here, I will get C five. It's a stabulator and I start from the risk. And remember, we need to rename the data set to Iris species. colon. I can make it faster by copying again. It's running. Can inspect it. And I can see. I have only the last colon. Let's rename it, but with good practice to Iris species colon. And I say, again, I see the tag has been propagated. And the next step is to have unique values in this data set, because we have a repetition. Many times of each different species. So if I go back here I will use this tool, which is unique. And I will get as an input this Iris species colon, which is a result of the previous tool. And then I will execute this tool and rename the output to Iris species. So then I will try to answer to the question how many different species are in the data set. And what are the different Iris species. Let's click on this unique tool. Yes. Species. I click on execute. So it's great. It's cute. And I can rename the data set with good practice. You remember to Iris species because this is what this data set contain. Yes. Again, I have this Iris tag, which is very nice. I click on the eye. I can see. So we can now answer how many different species are in the data set. We have three species, which are the three lines. And the species are set other particular and Virginia. So we have answered to the question. Here. And you can always check with the solution you see here. You can expand the solution. So what what we could also do is use different tools. And this is very classical in galaxy. There is so many different tools that most of the time. One question can be answered with different tools. So here, for instance, instead of using this cut and unique tool, we could have uses grouping data set tool. Which is a group data set by column and aggregate. So here, for instance, if we want to use this group data, you can use this group data. And if you group the data, where you will group the data. By colon five. And you will not take the Irish species. You will take the Irish clean data set. And you will get the colon five. And you click on the execute. So it's a different way to have the same answer to our question. But it's running now. And I will rename data set. Once this is finished. It's finished now. Can edit attributes. And I will call it Iris species group. So if I put the eye, you see I get exactly the same kind of output as before with only one tool. So I can answer to this same question, but I use the different tool, which is a group tool. Very useful tool. So the next question we will ask is how many samples by species are in the data set. So now we know we have three different species in our data set, but we want to know how many we have pair category. So again, we will have to look at this colon five. But instead of selecting unique values, we will have to count how many we have on each category. So the group tool, if you remember the tool we just use, it's quite useful and we'll use the same tool, but we look at it a bit more closely and see if we can get some more option to gather and count the number of species. So let's do that. We'll go back to the training material here. Go here, how many samples by species are in the data set. And we'll use this group tool. So the same tool. So we can rerun actually the same tool as before. And we'll use a new operation, which is insert operation and we'll use type count and on colon one. So we mostly want to count the number of us we have for each category. Otherwise the rest will be the same colon five for selecting and we count this. Let's go back here. So for rerunning, we can take the last tool and click here. We run this job again. Very handy. You have exactly the same parameters, some input data set as before, but we'll insert an operation here, which is not the mean, but which is a count and we execute. And we'll see if we can answer to the question, how many samples per species are in the data set. So now it's gray. We'll run. It's running. And as usual, we will rename the data set. Once this is finished, we name data set. And we will rename the data set for instance to Iris samples per species group. Again, save and click on save to save it. I can look now to my data set. And what do I see? I see that for each category, I have a number and this number is actually the number of sample per species. So we can answer to the question we had and we can say we have 50 sample per species, which is what we have. If we look at the tutorial and you can always check the solution. So we indeed have 50 sample per category. So the next question we would like to ask is to see if we can differentiate the different Iris species. So we know we have three species. We know we have 50 sample per species. And now we would like to see if the information we have in the data set is sufficient to distinguish three different types of Iris flower. So if we look at the Iris flower, let's look at the figure here. We know we have three different kind of flowers, Iris flower, versicolor, Virginica and Cetosa. And we have some information in the data set. We have the petal lands, petal reeds and the sepal lands and sepal reeds. And with this, can we distinguish between these different categories? So just to make sure we know what we are talking about. The petal is this one. So this small interior one. And we have the lands and reeds and the same for the sepal. We have the lands, the lands and the reeds here. So here this is not so obvious from the picture. And it's very hard for us to distinguish the three different species, but let's see if using this information, we can get some info on the different species and distinguish. What we will use is a very, very useful tool, which is a tool called data mesh. And it gives us some descriptive statistics and a summary about the data set. It's very, very useful. And we will use it with the different operation. We'll perform different operation on this data set. So we'll always group with column five, because this is a different species. And we want to do an analysis per species. We'll use as an input the iris tabular. It will have a header. Yeah. We'll print the header line. We'll sort the input. Yes. So to have all the different categories together. And then we'll make some operation. We'll make the mean standard deviation for each of the different columns. C1, C2, C3 and C4, which if we look back into the iris tabular data set, this is here. This one, if you remember, C1, C2, C3 and C4 are the different characteristics, the length of the sepal and the width, and the petal length and petal width. Let's do that. So we could do this data mesh and we select, make sure you select the right data set and we want to select this iris tabular. So we want to group by field. So the field is five. So here we don't put the C5. We put only a number in this field. Does the input file has a header? Yes, it has a header. And we want to print the header at the end. So it will be easier to distinguish the different values. We want to sort the input. And we don't want to print all the fields. Ignore the data. In your case when grouping is this is not relevant for us because these are only numbers. So we can add different operations. Let's say for the first operation instead of the count, we'll do the average, the mean value. And we'll do it on the column one. Yes. And we can insert a second operation again on column one, instead of the mean value, we can have the sample standard deviation. I don't see it. So you can start writing. Yeah, sample standard deviation again on column one. And we'll repeat this operation, but on the different columns. C2, C3 and C4. So I will add the same. But here make sure you select C2. This is mean value. I will insert again. And this is the sample standard deviation. And make sure you use the right column C2, column two. Again, I insert a new operation on the column three. Yeah, sorry. And this is the mean value. And the sample standard deviation on column three. And finally, the two last operation mean value on column four. And the sample standard deviation on column four. And then I execute. And again, I will rename the data set. So it is running. Okay. So again, don't forget to rename your data set. Always very good practice to rename. And we'll rename the data set. To Iris Samari. So Mary. And statistics. And I click on save. Now we can click on the view. Data button. And we have all the different statistics. So the question is, can we differentiate the different Iris flower species? So you can. You can pause the video if you want and take a closer look to have. And try to answer to the question. So here, if we look at the set us up vertical or and Virginia. From the results. We have the main balance and this is the standard deviation. This is the main sepal with and the standard deviation. And the same for the petal. So if I look at this colon. This is very close from each other. Same for the standard deviation. Even though the C2 that has a smaller standard deviation. For the sepal. Here we have a few differences, but this is not very significant. Standard deviation are very similar. But here this is quite interesting. Actually, if we look at the first. Species, the set us up. The mean petal lens is much smaller compared to a vertical or and Virginia. That's the colon for standard deviation. Nothing very significant. And the petal. This is also quite smaller compared to the two other species. So, I mean, what. We can see. Other iris. This petal lens. Here. It is quite significant. The difference between this. Species with. Oops. Which is set other and the vertical or and Virginia. So what we can say is we can distinguish quite easily. See to the species from the two other. But at least from looking at the values here. It's much harder to say anything about vertical or Virginia. It's not so easy to distinguish the two species. So that next, what we will do is we will visualize this different feature into a two dimensional scatter plot. So maybe we'll see a bit more what is going on. And we'll see if we can distinguish this. Three different data sets. So let's go back here. And this is what we have done. So can we differentiate the different flowers and you can read the solution, but this is more or less what I have told you that we can differentiate the iris data from the two others, but not differentiate the iris vertical or from the iris Virginia. So let's make a scatterplot and we'll make a scatterplot, which we see here. And we'll take the iris clean data set as an input. So if you remember, iris clean doesn't have any header. And we'll plot the colon one. So remember the colon one. If we go back here. Let's take the clean. This one, the iris tabular because we have the name of the column. So we have the lens and the width for the sepal and the lens and width for the petal. So what we will plot is as an axis will plot the sepal lens and vertical will plot on the y axis will plot the sepal width. So let's do that. We'll always give some title here for the plot. And we'll also give some label sepal lens and sepal width. And we'll also in the advance option, we can choose the size of the points to make it a bit larger and easier to visualize. So we'll put all the data set all the different groups. So we'll group them by the same different species. And which is the colon five, and we'll put all the different them in the same on the same plot. And the output will be PDF. Okay, so let's do that. Click here input. Make sure you take the right and we take the iris clean. It doesn't you need to have no header. Instead of colon eight, we'll take the colon one. And the colon two as why we'll put a title, which is a sepal lens as a function of sepal with because we are using the two first column. We'll give a title for the Y. And it's nice to make a proper plot sepal lens. Sepal width. And we'll click on the advance option. So you see this option. They are collapsed by default. So you have an eye and it's crossed to say it's not visible. But if you click left click, it will expand and you see all the different options you can use. And here we'll have point only. Yes. And we will use data point option. So instead of the default user defined point option. And we put the size here and we'll change from one to two to make it a bit larger. We don't change the transparency. Another thing we'll do is to plot some multiple groups. Yes. And we'll put them on one plot. To have all the different groups and we need to specify the column to differentiate the different groups. And we know this is colon five. This is where we have the category. Colour schemes to differentiate your group. We'll choose a predefined set to predefined color. You can test a different scheme if you want to. Let's choose the default. Change the default for the output. Instead of BNG, we'll choose PDF. And I click on execute. Once this is running, we'll have two output obviously. I'll probably add one. Check this is PDF. Yes. So I have my plot here. And if I look carefully. So what does this scatter plot tell us about iris spaces. So here we again we see this is a very different. This set of art is always very different from the two other species and the iris versicolor and virginica. As we said, and as we have observed before, it's very hard to distinguish the two species. We can rerun the same tool again, but instead of using the sepal lens and with, we can do the same plot, but with a petal lens and petal with. So using the, the other two other columns. Let's do that. I will rerun. So remember to rerun and click on this. And we don't want to have one and two. We have one to have three and four. And instead of sepal, this is petal lens and here I need to change. This is a petal lens as a function of the petal risk. And this is on the X axis. We have petal lens on the Y axis. Petal with option. Advanced option will not change the advanced option. I think we can do the same. And we can rerun. So this is quite easy to rerun. Yeah, already run. Let's view. Oops. It didn't work for some reason. Yeah. Click again. It took a bit of time to load. Now I have it. And again, it was very easy to distinguish the set other species from the two other one. And still not so easy to distinguish. We always have this, some points where we are not sure if this is a versicolor or Viginica. So still a bit better actually to differentiate between the two species, but for some sample, the petal lens versus which is still insufficient for all this data here. Well, this one is always super easy to distinguish. So we have done quite extensive analysis of this data set. We would probably need more tools or different tools to distinguish the three species, but we have already a fairly good idea of the different species of this Iris flower data set. So we have finished our analysis. And now the next step as we will see here is to convert the analysis we have in the history into a workflow. So why? Because we will apply the same analysis, but on a different data set, a completely different data set, which is one of the most powerful feature of Galaxy to create a workflow out of history of the different steps you have done. And we use it again. So fully reproducible with the same data set and with a different data set. So we'll first save extract the workflow, save it, make sure we have only the different steps we want to have in the workflow, give a name and then apply it on a different data set. So let's do that first. I will extract. So I will make sure first I check. Oops, it's a bit slow. I will check first. We have only the steps I want to keep in the workflow. So I extract workflow. I can check again here and you can tick or un-tick one step. The first step which is upload of a file is treated as an input data set, which is what we want because we will apply the same analysis, but on a different data set.  So for instance, here we will call it explore ring, high risk data set with statistics and scatter plots, which is what we have done. And then finally we create workflow. So all the workflows, all your workflow will be available when you click here on workflow. And the latest one is always the one you have at the top. So here, for instance, exploring Iris data set with statistics and scatter plot. You can run it directly, but we first will edit. You see, if you click on the small triangle, you have different menu here, a menu with different option and we'll first click on edit. We go to the workflow editor. It shows all the different steps of your workflow. If you click on one task, the detail of the task of the tool is available on the right hand side here. And in particular, what we can do is, for instance, remove all the intermediate files created and only keep the results of the analysis. So for instance, here this is a result we want to keep, which is, it will return the different categories. This is also different results. There is no other task, but this one is not. So we can remove the intermediate file by unticking the task, the box here. And you can do the same for all the different intermediate state. You do not want to keep the file. So it will reduce the file you can see in your history. So it's cleaner and it's easier to get to view the result from your workflow. One of the things you can do is when you click on a task, if you see the out file here is the name of the output. It's not very meaningful, but you can give a better name for your history by clicking here on the configure output. So it's hidden by default. You can click and it will expand. And you have this renamed data set. So here, for instance, we can call it categories or unique categories. We can do the same for every single output. So here this is the same categories, but from the group. But we can also call it categories, categories from group. So if we want to distinguish, this is what we will see in the history. But this one is the number of samples so we can hear. This is sample pair categories. And for the scatterplot, you can give some names of each of the plots. Figure one, for instance, and this is the PNG file. And make sure you have two. So we have two outputs. Now can we name the data set figure one PDF. And we'll do the same for the second plot. So figure took took took here. We name data set figure two dot PNG. And the same for figure two. PDF. Okay, so now we are more or less ready. So let's see what kind of data set we can use. So here we will use an existing data set, which we have, which is a diamond data set. So instead of analyzing flowers, we can use the same data set. So here you see at the top save workflow. Very important. Don't want to lose all your changes. It looks perfect. So now we can click on the analyze data again. And we are ready to apply the same workflow, but on a different data set. So instead of analyzing flowers, we'll analyze diamonds, but we'll do very similar analysis here. So we'll upload a new data set. So we'll create a new history. So if you remember, I said at the very beginning, every time you do a new analysis, it's a good practice to create a new history. So we'll create a new history and we'll call it diamond analysis and we'll upload the data set. And then we'll rename the data set as we always do to remove all the different prefix here from the website, from the nodu. And we'll add a tag and we'll use this hash sign to make sure it is propagated when we will on the workflow. We have to copy here.  And I will explain before I run it this data set itself. So let's do that. Let's create a new history. Create a new history. Oops, sorry. Change the name, diamond. Analyze this. I'm going to enter upload and paste on fetch. I will paste the address and I will start. And I wait. Yeah, now it's green. Remember what we have to do. I will first rename. I will call it diamonds. I click on save. Check the data type. This is CSV. Perfect. And I can have a look at the data set itself. Get an idea of content. Very similar to the previous data set. We have one, two, three, four, five colon. And this is the header. The name of the colon. The first colon is the car. So this is proportional to the weight of the diamond. The second one is the price. I guess this is in US dollar. And then we have the different categories for color and clarity. And this is here the cut. So different cuts. This is ideal premium good or very good. I think there are a few categories. And this is what we want to know how many category categories we have. And if there are any links between this, for instance, the weight and the price. And for instance, the clarity of the cut. Let's go back here to the training. So the diamond data set is very well known for the GG plot to package. It's developed by Hadley and week. We can. So it's very much use data set. And this is a quite simple data set here. Simpler than the original data set. It only shows the five columns because we want to reuse the same workflow. For this new data set. And so we have only the four characteristics. We have Kate kept the Kara cut color and clarity, which is what we call the foresee. So the car refers to the weight of the diamond. And this when it's measured on the scale and the cut refers to the quality of the cut. And take a different grades. And this is what we will see later. And we have different colors. The color, so it's like the tint of the diamond from color less. So white to yellow. And there is a later scale ranging from D to Z and D is the best and Z is the worst. So if we look at here, you will understand more. So this is this color from D to Z here. And of course, in galaxy instead of letters, we have replaced by number starting from one to the numbers here. And we did the same for the clarity. So the clarity is the describe the amount and location of naturally occurring inclusions found in in all diamonds. This has a scale of 11 grades ranging from flawless. So this is the best ideal situation to I3, which is like level three. This is the worst quality. And this is what we can see here. This is from this flawless to here. This is level three. And again, we have put numbers rather than categories here in in the data sets. So if we look at the data set here, the color and clarity will, they both are numbers integer. Okay, let's go back here and then know what we want to do is to run the workflow on this diamond data set. And we will run it exactly in the same way. But for the plots, we'll always plot with the two first columns. So the car and the price and the color will not be taken into account. Because we know this is not the most interesting but the car so the weight of the diamond and the price. And it's interesting to see if this is related for instance to the clarity and to the cut. So let's do that. The workflow is, he's here. If you remember, I will take the last one, which is this exploring Irish data set with statistics and scatterplots and this time I want to run it. So we click on run. And make sure the input data set is the right one. Yes, this is this one. I will expand the workflow because I want to customize. And in particular I want to customize the plots, because we said we always want to plot the same. We always want to put the diamond price as a function of the car of the way. So this is the two first column. Yeah, but the first plot with with the cut as a factor and the second plot with clarity as a factor. So let's find the plots first one. We have a scatterplot here. So we want to colon one and colon two. Yes, the plot of the title. I will customize because this is definitely not simple lens diamond price as a function of Kara. So as a function of the weight. With clarity and always with cut as a factor. So let's first change the label. So the label X will be the weight of the diamond, which is a car. We said this is proportional and the Y level will be the price time and price. So the price. And we can say this is in US dollars. This is in useful information. And because we want to take the factor. This is the cut list. Let's check. Yes. So we are using the latest colon, which is 12345. So this is the cut. So this is correct for this one. So now we can close this one and we'll take the second plot. And we'll change it because we still want to keep the same two columns. And we'll do again. But this time this is the diamond price as a function. But this time we'll take the clarity as a factor. So we again have the same. This is the weight. Diamond. This is a carrot. This is proportional and the Y level is the price in US dollars. Advanced option. You click here to expand. And we want to make sure we take the right column. So this time we don't take the last one, but we take the clarity. So we change it from five to four. Yes. And that's it. So we have everything we can expand here. And we can run the workflow. So you can see all the different steps. They will start running. Yeah, so it starts to launch to launch some jobs. Let's look at the questions we want to answer. So we are here. We are running the workflow on different data. We have done this. And what we want to answer is how many cut category are there in the diamond data set, how many samples are there in each cut category. And so if you remember, the output will be categories and the sample per category. And we'll see if we can notice anything about the relationship between the price and the carrot and based on the plot showing price versus carrot with clarity as a factor. Do you think clarity account for some of the variants in price and why. Okay, so let's wait for the analysis to be done. So this is nice. Everything is running. So we have unique categories we can already to answer the first question. How many categories do we have one, two, three, four, five. So we have five categories. And these categories are fair, good, ideal, premium and very good. So how many sample do we have per cut or per category. So we have this category from groups. And is it this one. Yeah, I forgot to rename, obviously. So we have for the fair category 1610. And for the very good category, we have 12,082 samples. So we have very uneven number of sample per category, quite a lot of ideal actually. So now, let's go back based on the plot. So let's have a look. What do you notice? Do you notice any relationship between the price and the character. So if we look at, for instance, this data mesh. So if we look at the price. This is also statistics, statistics here. We cannot really differentiate much, I think. Let's look at the figure. So if we look at the figure one, for instance. So this is the weight and the price. So there is obviously a link between the price and the weight. If the price more or less increases quite, I mean, it's not fully linear, but there is a trend to have higher price if this is a larger diamond. If the weight is higher. Now let's look at the other plots figure two. Which is as a factor, the karate to the different clarity. So if you remember, clarity is here. This is a flawless so it's very good diamond and this one is a three, which is lowest category. So do we see anything here. So what can we see. So far, we see this vertical stripe already. It's quite clear on this on these plots. If we take one weight, for instance, let's take this value here for one car. We can see there is a link between the price and and the clarity. So for if you have a flawless diamond, which is like this, this one here. It's much higher price than S3 or this I S3 clarity, which many of them for the same weight will be here so much cheaper. So there is obviously a link between the two. So the clarity we can see that the clarity explains quite a lot. The price. This is quite linked. So okay now we have to analyze this new data set. So one of the most important feature and this is really the last step here is to share the work to share the process both the history and both the workflow. And this is one of the most important feature of Galaxy, which you do at the end. So we can share the history. And for this. Let's do this. If I want to show my history, I will go here and the history action and you can see the share and publish. This is default. This is not. This is private history. So I'm the only one to be able to see the history and the data. I can make the history accessible. So I can make the history publicly available in the published history, or I can choose to share to share with a user so only with a single galaxy user, which can be useful. So if you have a colleague and you want to share the results or here, not do it. And you want to share the results of your analysis or your history. But this is like preliminary preliminary results and this is not something you can really publish. So if you make your history public. I can share here share public and I make history accessible. I can give the URL here and anyone can access this. And I can also take here, make history public available in the published history. And I click on it, you will see all the different history. The history is everyone has shared. It takes a bit of time because it's quite big. So the default setting for the history and for the data set can be different from one instance to another. So for some galaxy instance, you will have to specifically make each data set public. Be aware and check when you share your history. Okay, here this is all the different latest published history. So I can see mine here, which is quite useful and you can also if there is one user sharing the history with you, you will see it in the here and the history shared with me. So here I have no history shared to no one has shared a history with me. And I think that's it for this tutorial to summarize what we have done so we have learned the basic of galaxy, the basics of galaxy. And now we know how to keep all the different records of all the steps of the analysis. We can reuse the same steps, but with a different data set, which is very powerful. We can import data from external sources, you have seen we have important data from Zenodo, but we can also import data set from different external resources. We can easily share the results so and you can choose how you share your results if you want to share with everyone if you want to publish your history, or if you only want to share with one colleague or your group for instance. And that's it. Don't forget to give some feedback on the training. And I would like to thank you for your attention. And if you have any question, please ask in the Slack channel. Thank you.