acivitillo / giotto Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 1.0 2.6 MB

HTML 0.03% JavaScript 0.14% CSS 98.21% Python 1.62%

giotto's People

Contributors

Stargazers

Watchers

Forkers

malinaa96

giotto's Issues

Create an exemplary app

We will start with application for viewing and managing jobs.

Add filters to the Table component

Create Transformer class

We want to have a class to pull and transform data which will be later used by a component.

The structure of the app will be like this

## transformers
tranformers here
## components
components fetching from above transformers
## templates
page
frames

The transformer will look more or less like this

class Transformer:
    data: Any
   
    @classmethod
    def from_api(cls, route: str):
        data = urllib3.get(route, params=name... etc.).content
        return cls(data=data)
        
    def transform(self):
        # some default transformation
        pass


class UserTransformer(Transformer):
    
    def transform_1(self):
        data = deepcopy(self.data[0])
        return data

    def transform_2(self):
        data = deepcopy(self.data[1])
        return data

data = UserTransformer.from_api(...)
table_1 = Table(**data.transform_1())
table_2 = Table(**data.transform_2())

use dominate svg tag and refactor icons

I just found out dominate has a svg tag: https://github.com/acivitillo/giotto

We can use this and refactor the svg icons.

Create Site class

This class will create FastApi app with mounted giotto static files. Users will be adding their apps with add_view method

site = Site()
site.add_view(TestAppLayout())
site.add_view(FiltersFrame())

HTML tables can be used to send data in bulk back to the server for sql bulk loads via json. Here below is the prototype stimulus controller to turn a table into a json and post it to an api endpoint.

//https://j.hn/html-table-to-json/
import { Controller } from "stimulus"

export default class extends Controller {
    run() {
        var headers = [];
        var data = {}; // first row needs to be headers var headers = [];
        const table = document.getElementById("tablename")
        for (var i = 0; i < table.rows[0].cells.length; i++) {
            headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
        };
        // go through cells text_item
        for (var i = 1; i < table.rows.length; i++) {
            var tableRow = table.rows[i]; var rowData = {};
            for (var j = 0; j < tableRow.cells.length; j++) {
                for (var node of tableRow.cells[j].childNodes) {
                    if (node.nodeType == 1) {
                        if (node.innerHTML == "") {
                            switch (node.name) {
                                case "check":
                                    var value = node.checked
                                    break;
                                case "input_text":
                                    var value = node.value
                                    break;
                            };
                        } else {
                            var value = node.innerHTML
                        };
                    }
                };
                if (!(headers[j] in data)) {
                    data[headers[j]] = [];
                }
                data[headers[j]].push(value);
            }
        }
        const json = JSON.stringify({ item: data })
        fetch('/submit', {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: json
        });
        console.log(json);
        return data;
    };
}

search with autocomplete

We need an input search element (Search()?) with autocomplete, the controller prototype is this:

import { Controller } from "stimulus"

export default class extends Controller {
    static get targets() {
        return ["dropdownItem", "userinput", "ddContent"]
    };
    initialize() {
        this.dropdownItemTargets.forEach((element, index) => {
            element.classList.add("is-hidden");
        });
        this.content.classList.add("is-hidden");
    };
    clear() {
        if (this.input == null) {
            this.content.classList.add("is-hidden")
        }
    };
    search() {
        if (this.input == "") {
            this.content.classList.add("is-hidden");
            this.dropdownItemTargets.forEach((element, index) => {
                element.classList.add("is-hidden");
            });
        } else {
            this.content.classList.remove("is-hidden");
            this.dropdownItemTargets.forEach((element, index) => {
                if (element.innerText.includes(this.input)) {
                    element.classList.remove("is-hidden");
                } else {
                    element.classList.add("is-hidden");
                };
            });
        }
    };

    set(event) {
        event.preventDefault()
        const value = event.target.dataset.value;
        const href = event.target.dataset.href
        this.input = value;
        this.content.classList.add("is-hidden");

        const url = `${window.location.pathname}?job_name=${value}`;
        Turbo.clearCache();
        Turbo.visit(url);
    };

    get content() {
        return this.ddContentTarget
    }

    get items() {
        return this.itemTarget.value
    };

    get input() {
        return this.userinputTarget.value
    };

    set input(value) {
        return this.userinputTarget.value = value
    };
};

App functions with special characters in the parameters are failing

Right now special characters in URL queries are not replaced and for example '+' is treated as a space which causes differences in parameters values and errors as a result.

https://docs.python.org/3/library/urllib.parse.html#url-quoting

Thanks @pattrycja96 for finding this bug.

Add table pagination

Add a barchart component

It will be used in scheduling dashboard in the scheduler app.
I would start with a bar chart for Job Runs, similar to the one below in Flow Runs (but we can use another figure to represent them as I think this radius pie-chart or whatever it is can be hard to reproduce).

Probably harder version: