infographic summarizing machine-readability check results

gastil commented 5 years ago

Several checks relate to machine-readability of data, whether code generated from the eml can successfully load the data. Often a human can still use the data even when those checks fail (warn status). Should portal offer a one-glance summary infographic to indicate to users if a dataset is auto-workflow-ready? Or "Programmatically Readable" (@mobb 's term).

Example: maybe the pastaProg buttons would grey-out if there are relevant warns.

Or, a visual summary of the checker report could decorate the left margin of the portal landing page, one row of color for each check, blue, green, or orange (no red since those do not upload). See whiteboard sketch below. (Although that might be all checks, not just machine readability related checks.) Note to @mobb this graphic could be generated from the checker report xml to an svg graphic.

mobb commented 5 years ago

maybe like this, @gastil Screen Shot 2019-08-03 at 3 47 07 PM

mobb commented 5 years ago

any javascript-geniuses in the room? please write something to show the report messages on rollover

twhiteaker commented 5 years ago

Sounds fun. Can you post the SVG code and the messages that should appear on rollover?

This SVG tooltip article illustrates the two primary approaches. If the messages are short and simple (i.e., no fancy HTML rendering needed), then you can add a title child element to each SVG element. No JavaScript required, but you'll probably want to use lighter colors so that the black default title text that browsers will use is legible, or add some CSS rules for the tooltip (I haven't checked browser compatibility for that). This post shows an example of CSS rules for tooltips.

If a more glamorous presentation is needed, then JavaScript comes into play.

twhiteaker commented 5 years ago

Hmmm, maybe you can't style the title-based tooltip. But it is a simple solution and doesn't require JS or CSS!

<svg width="400" height="220">
  <rect x="10" y="5" width="300" height="100" style="fill:blue">
    <title>I'm an important message for blue</title>
  </rect>
  <rect x="10" y="110" width="300" height="100" style="fill:green">
    <title>I'm an important message for green</title>
  </rect>
</svg>

If you want more control over the display, but wanted to avoid JavaScript for some reason, you could use divs instead of SVG. The example below may not render well depending on the length of the message, but it does illustrate the div+CSS approach.

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  width: 100px;
  height: 25px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}
</style>
<body>

<div class="tooltip blue">
  <span class="tooltiptext">An important message for blue</span>
</div>

<div class="tooltip green">
  <span class="tooltiptext">An important message for green</span>
</div>

</body>
</html>

mobb commented 5 years ago

Thanks! I will give it a whirl when I can. #love-a-nonJS-solution. also, would need to talk to devs about how it fits into a dataset display. In the meantime, here is the xsl for anyone who wants to play around. It needs a bit of clean-up still.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:qr="eml://ecoinformatics.org/qualityReport"
    xmlns="http://www.w3.org/2000/svg"
    exclude-result-prefixes="xs" version="1.0">
    <xsl:output method="xml"/>

    <!--  Goal: for each check, a horizontal bar, eg.
    <rect x="0" y="0" width="100" height="5" style="fill:yellow"></rect> -->
    <!-- x and y are placement relative to top left corner. -->

    <!-- so logic is 
        set some vars: bar-width, bar-height, init x and y, 
        set a counter (num checks in report)

        svg width =  width
        svg height = num_checks * bar-height         

        for each check,
        create a <rect
        x = init_x 
        y = init_y * bar-height * count
        width = bar-width
        height = bar-height
        style set by a case statement: valid fill:green, warn fill:orange, info fill:blue
        -->

    <xsl:variable name="img_w"/>
    <xsl:variable name="img_h"/>
    <xsl:variable name="bar_w">50</xsl:variable>
    <xsl:variable name="bar_h">10</xsl:variable>
    <xsl:variable name="check_count"/> <!-- param, later -->
    <xsl:variable name="x_init">0</xsl:variable>
    <xsl:variable name="y_init">0</xsl:variable>
    <xsl:variable name="y_loc"/> <!-- param later -->

    <!-- xpaths:
    /qr:qualityReport/qr:datasetReport[1]/qr:qualityCheck[1]/qr:status[1]
   /qr:qualityReport/qr:entityReport[1]/qr:qualityCheck[1]/qr:status[1]
    -->

    <xsl:template match="qr:qualityReport">
        <!-- count up the checks. value sets size of the image, y-location of each bar -->

        <xsl:param name="check_count">
            <xsl:value-of select="count(//qr:qualityCheck)"/>
        </xsl:param>
        <xsl:variable name="img_total_height">
            <xsl:value-of select="($check_count + 1) * $bar_h"/>
        </xsl:variable>

        <!-- start an svg for the entire report -->
        <xsl:element name="svg">
            <xsl:attribute name="width"><xsl:value-of select="$bar_w"/></xsl:attribute>
            <xsl:attribute name="height"><xsl:value-of select="$img_total_height"/></xsl:attribute>

            <!--  bar for each  check -->   

            <xsl:for-each select="//qr:qualityCheck">
                <!-- all the checks are in one node set, so position is a counter -->
                <xsl:variable name="check_position">
                    <xsl:value-of select="position()"/>
                </xsl:variable>

                <xsl:variable name="color">
                    <xsl:choose>
                        <xsl:when test="qr:status = 'valid'">
                            <xsl:text>green</xsl:text>
                        </xsl:when>
                        <xsl:when test="qr:status = 'warn'">
                            <xsl:text>orange</xsl:text>
                        </xsl:when>
                        <xsl:when test="qr:status = 'info'">
                            <xsl:text>blue</xsl:text>
                        </xsl:when>
                        <xsl:otherwise>none</xsl:otherwise>
                    </xsl:choose>
                </xsl:variable>

                <xsl:element name="rect">
                    <xsl:attribute name="x">
                        <xsl:value-of select="$x_init"/>
                    </xsl:attribute>
                    <xsl:attribute name="y">
                        <xsl:value-of select="$check_position * $bar_h"/>
                    </xsl:attribute>
                    <xsl:attribute name="width">
                        <xsl:value-of select="$bar_w"/>
                    </xsl:attribute>
                    <xsl:attribute name="height">
                        <xsl:value-of select="$bar_h"/>
                    </xsl:attribute>
                    <xsl:attribute name="style">
                        <xsl:text>stroke:black; stroke-width:1; fill:</xsl:text>
                        <xsl:value-of select="$color"/>
                    </xsl:attribute>
                </xsl:element>
            </xsl:for-each>
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

mobb commented 5 years ago

for the trial, i adapted a hello_world:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>report SVG</title>
    </head>
    <body>
        <h1>Here is a report as SVG</h1>
        <embed  src="report.svg"></embed>
        <p>and html goes here.</p>
    </body>
</html>

mobb commented 5 years ago

another suggestion: show fraction of possible checks run - using only xsl, it will be crude. count up the unique checks in the report (uniq check names). report as a fraction of total possible checks, also uniq names (variable fixed at start. today = ~52 I think)

mobb commented 4 years ago

Try this: add the <title> element as suggested above. Display the warns by default to the side. display the infos on rollover.

EDIorg / ECC

infographic summarizing machine-readability check results #26