 Hello everyone, my name is Onaral and I'm with my friend with Akash Star and I am a Fedora website team's member and also mind-shifting representative. Please Akash, introduce yourself. Sure, thank you. So I'm a websites and apps objective revamp lead, at least for now, and I'm also working in the Red Hat CPE since sometime. Okay, thank you. So today's we're going to talk about the Fedora graphics and what are we doing it in secretly with my friend with Akash and we just did something nice and hopefully everyone is going to be like it. First and first, what do we plan? Our plan is basically is we want to importing apps from Impra to recreate Fedora apps directly with the modern futures. So with that, we're going to have more visually appealing aspect of the website. So today's our Fedora apps looks like this right now and we want to make this much more beautiful and much more nicer. And in the first beginning, it was made by I believe Ralph and for a long time ago and he made an awesome job and he just create this for the apps charts and it's pretty much you can if you want to access anything from Fedora world, you can just click this link, which is Justin just hit it. And it is an amazing website to see what do we have in our infrastructure and our website as well. But as times passed, it is just a little bit become older and it needs a little bit of a revamp as well. So our plan is basically we want to avoid equity as much as possible and stick to native JavaScript. And also we want to obsolete this old JavaScript info with toolkit, which is the right now is the graphics has been generated by using that library. And it has been not maintaining over the last six years and which isn't a problem. And we want to of course implementing some sitting templates, but it seems to fitting that if we can just, you know, extend this ability and make it much more nicer, of course. And if you want to pay a visit, you can just share the scan the link or you can just click it over there in the chat as we shared and thanks to Justin for that. And let's let's move along and see what is going to happen in the next future in our graph stuff. So I'm going to pass the words to Akash so you can explain our ideas as well. Thanks. So our idea is to build upon the existing federal apps directory and to use the ideas that has been there for a while and build upon them to create something which looks way better is interactive and has great animations with itself. And we want to add more modern front end content. So for folks who are accessing it for mobile phones or tablet devices or wherever else they would be able to access it just fine. Also to add advanced interactions using elements which have been generated either from JSON documents or from SVG images. More about that in coming slides and some custom pop ups, click events and what not to make sure that it all feels like an application and not just like a simple website. And it's not just about apps directory, we want to create more charts like this for all the projects that we have inside our federal universe. Moving on to the next slide. Let's talk about the progress that we have been making so far. So our progress, yes Akash, we want to talk about our progress. What are we doing? So first things first, we have today, thank you to Marie for creating this amazing organization chart and we want to use this chart to give some life because this is an amazing chart. This is basically the entire federal organization and this is how we work in this federal basically if you just take a look at the chart and this is an amazing one and this has been created very recently in the last March 2021. So we can say it's pretty updated. So we're going to of course, going to give some life on that hopefully maybe and it's going to be an amazing as well. So what technology we used? Just for creating these new charts, we're just using some bootstrap and we find a new chart called Apache eChart and we just want to take a look into it and see what we can do and what is the ability can happen. And of course, we don't want to use jQuery but since we're just getting into it and we just want to warm up the idea and we're trying to implement it also we are also testing as well because we're also exploring this new idea. It is also new for us to creating charts. And also of course, we did it with the love of of course with my friend. This was an amazing work with Akash. I have to say thank you to him right now in front of everyone because he helped me a lot and as well and also we did a lot of teamwork. It was an amazing work to see that come to life today and also represent and present it to everyone here in the chat and in federal community and also in everyone else. So let's go to the next one and picking the coordinates but this one is going to my friend. So Akash, please can you explain to us what you're going to do with these coordinates? Sure thing. So we're creating charts using the Apache eCharts. There is a specific graph library that we make use of but in order to make sure that we do it by ourselves and we have the tailor fitting minor precision to details to where exactly our elements would lie and how would they be connected with each other. We had to go into the details about where the colors what the colors would be what the angles would be and where the coordinates are going to lie. So these graphs can load up from JSON documents with a custom schema where you tell what that element is about where is it going to be with the reference positions and other attributes as well. Then you it kind of sticks to the technicality of JavaScript. I cannot expect a designed person to understand which kind of acts like a barrier for a person who wants to design stuff but they don't want to get into the technical details of it but it also opens up the possibilities of finer adjustments and you can pinpoint your location on a graph. So be it zooming or zoom out it's kind of going to stay the same and collaboration can be challenging and the technical nature is still a thing. Now on the next slide we'll explain how we go ahead and solve this over to you. Yeah of course of course and one quick question just come up to us is it bound the HTML IDs? That's the beautiful part. It doesn't. We're just using our JSON coordinates and also our next thing I'm going to explain to you is going to be much more amazing and we just want to lower the barrier from this technicality between design team as well and let's see how it's going to be. We just want to make some interactive SVGs. How do we want to do that? Well a design member can make the chart anything it could be of course and we want to give some life of that and as you can see in the picture we try to do some little bit of a scenic peek and we want to show the bigger picture later on and we just want to need label on the SVGs on the groups we want to make it alive and we want to also make look as it is so people can open that and this can also interact with it. So thanks to Marie as we speak before she made this amazing chart for us already and me as a technical guy as well I can give this chart as a give some life yes I'm this is going to be a little bit people may remember that giving a life stuff but it's going to be another joke we're going to not talk about it and also going to give much more greater flexibility and opportunity because that will be an amazing and of course what we want we want to collaboration easier for everyone because they a design member or non-technical person so we can just draw an SVG for us and we can just try to make it compatible for our charts automatically so we don't have to even do so much work it's lowering our job flow you know our workflow because we don't need to do so much stuff we just load the SVG as it is and it's going to be interacted already what we do is only we just need to do some little bit of a configuration and it's going to be easier for a developer and easier for a design member as well or if they want to do something much more custom and a little bit of a different we of course have another round from Jason Way to creating a chart entirely from Jason to pointing A to B location and trying to do this ankles and all the coordinates where it is necessary and I remember that Akash I think he's going to say that I think he worked a lot of mathematical calculation on this one of course it's going to be amazing as well so let's move on to the next step so in our going to demo we're going to show you what the what the heck did we did and what is our result what is our final situation we're going to have it I think first is going to my friend Akash is going to show his charts and I'm going next I'm going to show my charts all righty so I'm going to ask you to stop sharing your screen so I can share mine first and there we go let me know what's the screen is visible it is visible to me immediately sure thanks so this is some kind of an alpha or pre alpha or something which comes way before pre alpha if you ask me version of how we want to implement things but it is representative of how things would be like down the line of course if you don't like how it looks like feel free to join us and would be very happy to include the changes that you suggest so talking about coordinates oh my god I had to literally place it in the origin then move 50 units top of it and then you know contact the angles in a way that they seem fit well of course you can zoom in and the way they work is in a uniform scaling manner and there is a lot of interaction with it as well we are not designed folks and something in a design point of view would definitely help us to a greater extent and that is something that on our output explain but to this point what we can do is we can relate an element with another one it doesn't have to be a circle and it doesn't have to have a single color I might even you should go ahead side notice as you can see everything this could be a circular but we find the trick to change the circular objects into the different object as well with the using still the j-segment and we were definitely happy to explore this more ideas as well please Akash sure thanks so as we see this chart for team we can definitely go ahead and replace these with I don't know stars with images of people that these are talking about and with description that they have the possibilities for going creative with this is almost endless and just because that we are loading these up from a json dictionary we can potentially add the changes in real time and you know have them loaded up real quick yeah just f5 i'm done yeah so that's pretty much about how we would like to design using json it's kind of a difficult way but now oneralk would explain how he would you know make an sveg come alive as if it were a frankenstein sorry about that go ahead oneralk yeah I don't want to use that word but I think it's going to be a stick over there all right all right no problem no problem let me share my screen okay let me share my screen quickly and see let me show you my surprise as well and of course we have to do a little bit of a thing first okay so let me share my screen and this is gonna come alive it's gonna come alive so let me switch and as you can see we are in the organizational chart in the in the same manner so as you can see it looks like a normal sveg right like nothing is happening it's just there beautifully and then we want to make some interaction can we do it of course we can do it so let us move my mouse a little bit and if I move my mouse as you can see I can also do the same interaction as we did on the on the other json ones we did before so we can see that we just give some life to all these graphics and svegs to alive so after a little a lot of research and technical difficulties we had it before we figure out how to make gives give these svegs alive and we can make them interaction and clickable and also pop up the whatever is necessary we can change the color we can do whatever we want we can zoom in because everything is possible and thanks to our library we find out and the knowledge we have not right now we can just give more opportunities as you can see when I click on it it's also show the names and the titles and labels it just for like of course exemplary purposes to show everyone they can of course improve this idea and make it better and some of them doesn't have the clickability because I didn't implement it deliberately to say that because we want to just show you how easy it is as well I would like to do it as well so first things first I would like to explain once we load the sveg we can just do basically something very easy so let's just focus on the addition so as you can see addition doesn't have any option it cannot be clickable right now we want to give some life on this so I don't want to rebuild my JavaScript I don't want to change anything on on the on the html stuff and we just want to change this one make a live how do we do that it's actually fairly easy all I have to do is I just give some attribute uh which is on the svg and let me also share my screen again on the different one so that I can show that how is it done as well let me go to my svg chat all right so I think everyone can see that I am on the inkscape it's just a good old inkscape everybody's probably know about it sorry it's visible the screen is visible yeah thank you so much so let us zoom in a little bit and let's just say so when I click for the council I can see you can everybody can see that we have a name and this name is our magic so when we give a name into the box we want to give some life we can just click on this let's just say I want to click this object of course it could be needs to be ungrouped because sometimes the speech is uh well okay now I click it so let me add a new value as well and I'm going to say additions or let us say that or for a fun sake additions for next let's just have some fun it doesn't matter we can give any any value but just for the demo purposes let's just give a nicer name so my job is done now I am just stop sharing my screen for a little bit I save the svg let me copy it the proper positive proper folder quickly as I'm just copying the svg into the next level html page I made it let me do that make sure it's also saved as well it's saved and copying all right so let's open up my page again the beauty of this approach is the fact that the design team can be as wild and as creative as they can there is nothing holding them back in the engineering point of view all they need to do is identify the elements in the svg distinctively and we can automatically pick that up and you know we can create elements which are interactive on the web page something he doesn't know enough she might just break it for a little right now come on anyway I have dropped a link to the GitHub repository that folks can take a look into we can move on with the presentation you know yeah yeah sure sure yeah oh just one tiny moment before I have I just want to make sure I didn't make a mistake and it doesn't work yeah we can move on coming to the questions in the meanwhile will it work in links if links is the text only browser if I'm getting it correctly unfortunately it won't because we need a browser which has which runs shower script and yeah well links I don't think it runs shower script so it won't and yeah talking about how you can get involved in this thing next slide please yeah so the way you can contribute would obviously be to first have an historical context about what we have been doing and how the foundation has been built up the documentation checking out the documentation page would definitely be one of the first steps we have weekly meetings on every Tuesday so feel free to join us there we'll be adding the links to them in the next slide and then you can introduce yourselves to our telegram and IRC channel we're always active over there so feel free to join us and if it's the first time of you folks contributing in Fedora then I would definitely suggest you to follow the join workflow as that can help you to expand your perspectives to a greater amount of teams or sub projects that you can definitely be a part of talking about the repository well that's right there impression as we like to call it if the name doesn't sound good we definitely go and change this down the line who knows and this is how you can contact us we're on matrix as well as on liberal chat and both of these chat rooms are being bound together so join any one of them and you should be just fine and then we have a documentation for our community revamp in the link and that's the mailing list that you definitely want to keep posted yeah thank you feel free to ask your questions we still have a solid seven to eight more minutes before we can definitely go on to some other exciting talks and the polls are still active so feel free to answer them as you go on I was able I would like to solve the last result I would like to show you right now since we have already finished it as I said I changed the edition I edit some words and look up I changed it maybe something was doesn't like me but let me just show you my screen again to show the result we didn't forget you ever you didn't forget everyone so as I said I just edit edition wasn't working before now we can see it works it's also now we can now allow also fest go to and we can just do more and more as well so the only thing that was required was not to be touched in a JavaScript or HTML or CSS side of things but to edit the SVG add a specific name to an element so that it is distinctively recognized and lo and behold it becomes interactive and this can not be done with just the graphs it can be an image with certain elements inside of it that's the beauty of this library and the more we go on into the documentation the more we'd know about it but frankly documentation is something that we like to avoid more of a video stuff more of a watching anime and crying our eyes or kind of stuff but surely feel free to join us well full documentation aspect sometimes it could be sometimes sometimes it could be a challenging I mean it was a little bit for us as well but we will manage to handle that but as I said loading an SVG is and trying to do something more about it it's definitely interesting to us and I hope it will be interesting to everyone in here and wants to hop in and try to try it out all right so there's another question is there any layout algorithm in JS layout algorithm is something that each art is using in order to make sure that they position their graph that link between the elements so that is something that is you know abstracted by the library that we're using so all we need to know is the fact that we're using that specific library and depending upon the approach in which we want to make this happen either it's a JSON I mean if you are very specific about where the thing should be or the SVG if you want to you know go all out into imaginative designs of SVG that approaches can be a bit different see you're on Justin thanks for being here and for correcting the dots just for adding to that is we all need we just need to know the node IDs of the JSON in the JSON file or you can add it in your JavaScript file as well basically we need to know the ID of the node it could be a number it could be a name sorry string it could be anything so if you just say I would like to connect A to B what I have to do is basically in the proper node let's just say connection section let's just say I don't remember the exact name for now we're just going to say this A is needs to be connected to B so the chart is going to be A to B so the color of the between on the lines could be could be is going to be basically the first one is getting into it but we also think about it as well we can change that color into the something in and entirely custom shape and thickness and curve in this we do try to discover a lot of stuff and into it and it's definitely possible and it's definitely tested all right so before we wrap this up let me go through the poll results there are a lot of folks who have voted that they are already a part of the website's an objective event feels really good about it and the folks who are not they're very very willing to join and the folks who are not planning to join maybe they will in some years or some months who knows they feel like that yeah this is some awesome stuff that they would need to be a part of so why not let's keep that door open and there are folks who are really really interested to contribute to photographs it's partly our fault we did not have a negative response and that is how we get to know that well one thing is for sure we're definitely going to get a lot of issues and pull requests hopefully and a lot of ideas probably needs to be in the place and there is a lot of work to do I mean we understand that but we just would like to show you the new opportunities new possibilities because we are having a lot of websites and we would like to give some love to our main center section of the federal apps it's totally important it was there for a long time and it needs to be revamped now we have organizational chart we would like to give some life on turn which is was the idea but the first idea definitely come up thanks to Ralph being in the in the past he created amazing apps website and with this idea we did a lot of stuff as well thank you everyone yep thank you so much for being here