Display Previews of Assets

It is often useful to get a list of assets from a job so that they can be displayed as previews.

There is a useful function to do this:

let job_code = "JOB00123";

let server = TACTIC.get()

// Get the asset codes for the assets in a job
let expression = "@GET(workflow/job_asset['job_code','" + job_code + "'].code)";
let asset_codes = server.eval(expression);
let asset_codes_str = asset_codes.join("|")


// provide the filter to only find snapshots for the assets in this job
let filters = [
    ['search_code', 'in', asset_codes_str],
    ['is_latest', "true"]
];
let kwargs = {
    "filters" : filters,
    "include_web_paths_dict" : "true",
};

let snapshots = server.query_snapshots(kwargs);

The "query_snapshots" method will return a list of "snapshots". The filter ensures that only assets belong to the specified jobs is returned. The "is_latest" attribute will find only the latest snapshots for each asset.

Snapshots

Snapshots are where TACTIC's Digital Asset Management system stores files. Snapshots always have a parent sObject (in this case "workflow/asset" sObjects). Each snapshot is a particular version of a particlar context of the parent sObject. Every time a new file is checked into an asset, a new snapshot is generated with a new version.

Usually an snapshot will reference a list of file objects, however, the "query_snapshots" functions allow you to retrieve the file paths without having to make multiple calls to the server.

With image files, there will be a icon version of the file which s small and can be used to display previews, typically on a list of assets on the user interface.

let web_paths = [];
snapshots.forEach( snapshot => {
    let web_paths_dict = snapshot.__web_paths_dict__;
    let path = web_paths_dict.icon;
    web_paths.push(path);
} );
console.log(web_paths)

The results of this example is a list of web paths that can be used as the src attribute for an image tag in a tiled preview view.

For the Python example, please see below.

    from pyasm.search import Search

    job_code = "JOB00123"
    search = Search("workflow/job_asset")
    search.add_filter("job_code", job_code)
    assets = search.get_sobjects()

    asset_codes = [x.get_code() for x in assets]

    search2 = Search("sthpw/snapshot")
    search2.add_filters("search_code", asset_codes)
    search2.add_filter("is_latest", True)
    snapshots = search2.get_sobjects()

    for snapshot in snapshots:
        version = snapshot.get("version")
        search_code = snapshot.get("search_code")

        web_path = snapshot.get_web_path_by_type("web")
        main_path = snapshot.get_web_path_by_type("main")
        icon_path = snapshot.get_web_path_by_type("icon")

Displaying job assets and snapshots in React

We currently need to make 2 calls to retrieve all the job assets, and their associated files (snapshots in TACTIC data structure). We will first search job_asset using keywords filter. After getting the job_asset objects, we use the function, query_snapshots, to retrieve the files. See the example below:

    get_asset_info = async () => {
        let search_text = this.state.search_text // search text from the form

        // First, let's retrieve assets using the keywords search.
        let search_type = "workflow/job_asset"
        let filters = [
            ['keywords', 'contains', search_text]
        ]
        let kwargs = {
            search_type: search_type,
            filters: filters,
        };
        let ticket = await get_ticket()
        let sobjects = await call_tactic("query", kwargs)

        // nothing found
        if (sobjects.length <= 0) {
            this.setState({assets: []})  // set the state variable.
            return;
        }

        // We will retrieve snapshots (files) for the assets. We are going to use
        // query_snapshots function to get the relevant files that are web-accessible.
        const asset_codes = sobjects.map(element => element.code);

        let asset_codes_str = asset_codes.join("|")

        let project_code = 'api_test'
        let asset_codes_filter = [
            ['search_code', 'in', asset_codes_str], ['is_latest', 'true'], ['project_code', project_code]
        ]

        // include_web_paths_dict gives us the web-accessible paths for the files.
        kwargs = {
            include_paths_dict: true,
            include_web_paths_dict: true,
            filters: asset_codes_filter,
            order_bys: "search_code",
        }

        let snapshots = await call_tactic("query_snapshots", kwargs)
        console.log(snapshots)

        // we will process the assets and snapshots to be returned or set
        // to the state variable.
        let obj = {}
        sobjects.forEach(function (a) {
            obj[a.code] = a;
        });

        console.log(obj)

        let res = snapshots.map(function (a) {
            return {
                code: obj[a.search_code].code,
                name: obj[a.search_code].name,
                status: obj[a.search_code].status,
                snapshot: a.__web_paths_dict__
            };
        });
        console.log(res)

        this.setState({assets: res}) // set the state variable.
        return;
    }

Displaying the results in React:

<div className="asset-list">
    {
        this.state.assets.map( (asset, index) => (
            <div key="{asset.code}">
            Asset Code: {asset.code} <br/>
            Name: {asset.name} <br/>
            Status: {asset.status} <br/>
            File:<br/>
            <a href={get_server_url() + asset.snapshot.main[0]} target="_blank">
                <img src={get_server_url() + asset.snapshot.web[0]}/>
            </a>
            <hr/>
            </div>
        ))
    }
</div>