mosra / m.css

A no-nonsense, no-JavaScript CSS framework, site and documentation theme for content-oriented websites
https://mcss.mosra.cz
Other
406 stars 92 forks source link

Missing link to Namespaces, Classes, and Files? #183

Closed tsung-wei-huang closed 3 years ago

tsung-wei-huang commented 3 years ago

Hi, I tried using m.css to regenerate my doxygen to your format but the output doesn't seem to have correct links for Namespaces, Classes, and Files on the navbar. When I click on Classes, it shows nothing.

Screen Shot 2020-11-04 at 1 00 36 PM

I created a Doxygen-mcss with the following content:

@INCLUDE                = Doxyfile
GENERATE_HTML           = NO
GENERATE_XML            = YES
XML_PROGRAMLISTING      = NO

and use the command based on your tutorial: ./doxygen.py path/to/this/Doxyfile-mcss

My Doxygen is 1.8.14

Also, when I click on a link at the Pages, the subitems don't seem to align correctly:

Screen Shot 2020-11-04 at 1 05 00 PM

mosra commented 3 years ago

Hi, thanks for your interest in this project!

The namespaces/classes/files list is empty in case there's no explicit documentation for these. This is because the Doxygen XML output includes absolutely everything and there's no other reliable way to know what's wanted and what not. Please check the relevant section in the docs to see what you can do to fix that.

I cloned the project and did just a minimal change to document the top-level directory, file and namespace:

diff --git a/taskflow/taskflow.hpp b/taskflow/taskflow.hpp
index 784a5719..b77189ba 100644
--- a/taskflow/taskflow.hpp
+++ b/taskflow/taskflow.hpp
@@ -4,8 +4,13 @@
 #include "core/algorithm/for_each.hpp"
 #include "core/algorithm/reduce.hpp"

+/** @dir taskflow
+@brief Root taskflow include dir
+*/
+
 /**
 @file taskflow/taskflow.hpp
+@brief Main taskflow include file
 */

 // TF_VERSION % 100 is the patch level
@@ -19,6 +24,9 @@
 #define TF_MINOR_VERSION TF_VERSION/100%1000
 #define TF_PATCH_VERSION TF_VERSION%100

+/**
+@brief The taskflow namespace
+*/
 namespace tf {

 /**

and the class list at least now looks like this. I see some of the headers already have the @file doc, so it's just @brief missing :)

image

For the "misaligned list" issue, it's because the theme by default indents first line of each paragraph (if you browse the generated pages with more prose, you'll see that clearer). There are two options -- either convert the paragraph to a list (which you can then make unstyled again using a CSS class):

image

Or (because this aspect of the theme is apparently very controversial), you can patch the CSS here to not do an indent and then regenerate the compiled styles as described here:

  --paragraph-indent: 0;

Oh, and I saw you're using Graphviz diagrams throughout the docs -- m.css has builtin support for those and it can embed their SVG in a way that matches the page style. I made a few changes, mainly using @dotfile instead of @image, telling Doxygen to use a font that matches the theme and used builtin m.css style classes instead of hardcoded colors. (Relevant docs.) This is the result:

image

diff --git a/doxygen/Doxyfile b/doxygen/Doxyfile
index f0a5d014..06e718a2 100644
--- a/doxygen/Doxyfile
+++ b/doxygen/Doxyfile
@@ -2290,14 +2290,14 @@ DOT_NUM_THREADS        = 0
 # The default value is: Helvetica.
 # This tag requires that the tag HAVE_DOT is set to YES.

-DOT_FONTNAME           = Helvetica
+DOT_FONTNAME           = Source Sans Pro

 # The DOT_FONTSIZE tag can be used to set the size (in points) of the font of
 # dot graphs.
 # Minimum value: 4, maximum value: 24, default value: 10.
 # This tag requires that the tag HAVE_DOT is set to YES.

-DOT_FONTSIZE           = 10
+DOT_FONTSIZE           = 16

 # By default doxygen will tell dot to use the default font as specified with
 # DOT_FONTNAME. If you specify a different font using DOT_FONTNAME you can set
@@ -2455,7 +2455,7 @@ DOT_PATH               =
 # command).
 # This tag requires that the tag HAVE_DOT is set to YES.

-DOTFILE_DIRS           =
+DOTFILE_DIRS           = ./

 # The MSCFILE_DIRS tag can be used to specify one or more directories that
 # contain msc files that are included in the documentation (see the \mscfile
diff --git a/doxygen/cookbook/Chapter4.dox b/doxygen/cookbook/Chapter4.dox
index bca375cd..068d630e 100644
--- a/doxygen/cookbook/Chapter4.dox
+++ b/doxygen/cookbook/Chapter4.dox
@@ -31,7 +31,7 @@ The index is defined with respect to the order of its successo
r construction.
 16: executor.run(taskflow).wait();
 @endcode

-@image html images/conditional-tasking-1.svg width=45%
+@dotfile images/conditional-tasking-1.dot

 The example above implements a simple yet commonly used feedback loop through
 a condition task (line 7-10) that returns
@@ -83,7 +83,7 @@ Debrief:
 @li Line 30 creates a condition task that goes to G and H on return 0 and 1, re
spectively
 @li Line 31 creates a condition task that loops back to itself on return 0, and
 proceeds to L on return 1

-@image html images/conditional-tasking-2.svg width=100%
+@dotfile images/conditional-tasking-2.dot

 You can use condition tasks to create cycles as long as the graph does not intr
oduce task race during execution. However, cycles are not allowed in non-conditi
on tasks.

diff --git a/doxygen/images/conditional-tasking-1.dot b/doxygen/images/condition
al-tasking-1.dot
index 32e761ec..ca0515f1 100644
--- a/doxygen/images/conditional-tasking-1.dot
+++ b/doxygen/images/conditional-tasking-1.dot
@@ -1,6 +1,6 @@
 digraph Taskflow {
   rankdir="LR"
-  cond[label="cond"  shape=diamond color=black fillcolor=aquamarine style=fille
d];
+  cond[label="cond"  shape=diamond class="m-success" style=filled];
   init->cond;
   cond->cond[style=dashed label="0"];
   cond->stop[style=dashed label="1"];

Not sure how/if this fits into your pipeline, just so you're aware this exists. It also doesn't work well for dot files containing subgraph, if you'd want to use this feature, I'd need to look into fixing that. Shouldn't be hard tho.

tsung-wei-huang commented 3 years ago

@mosra thanks for your response. It works - and I really like your project. I have many dot files that contain hierarchical subgraphs and it doesn't seem m.css can generate it correctly. A flat graph is ok but a nested subgraph like the following won't work:

// subflow-join.dot
digraph Taskflow {
subgraph cluster_p0x7ffee9781810 {
label="Taskflow";
p0x7f9866c01820[label="A" ];
p0x7f9866c01820 -> p0x7f9866c01b70;
p0x7f9866c01820 -> p0x7f9866c01930;
p0x7f9866c01930[label="C" ];
p0x7f9866c01930 -> p0x7f9866c01a40;
p0x7f9866c01a40[label="D" ];
p0x7f9866c01b70[label="B" ];
p0x7f9866c01b70 -> p0x7f9866c01a40;
subgraph cluster_p0x7f9866c01b70 {
label="Subflow: B";
color=blue
p0x7f9866d01880[label="B1" ];
p0x7f9866d01880 -> p0x7f9866d01ac0;
p0x7f9866d019a0[label="B2" ];
p0x7f9866d019a0 -> p0x7f9866d01ac0;
p0x7f9866d01ac0[label="B3" ];
p0x7f9866d01ac0 -> p0x7f9866c01b70;
}
}
}

Screen Shot 2020-11-07 at 4 33 51 PM

The top graph is generated by plain svg using @image html images/subflow_join.svg width=35% and the bottom one is @dotfile images/subflow-join.dot

Any idea to fix this?

mosra commented 3 years ago

Yeah... that's what I mentioned above :wink:

It also doesn't work well for dot files containing subgraph, if you'd want to use this feature, I'd need to look into fixing that. Shouldn't be hard tho.

The m.dot plugin that's doing all this work is basically a glorified bag of regexp's, so I need to add some more to handle this as well. I'll try tomorrow if I get time, but I'm quite busy these days this year so in case it turns out to be more complex than I expected, it might take a few weeks until I find time again.

tsung-wei-huang commented 3 years ago

@mosra thank you very much. This is be very helpful for my taskflow project - :) Please keep me posted.

mosra commented 3 years ago

Here you go -- 42d4a9a48f31f5df6e246c948403b54b50574a2a. Let me know if there are still some unhandled features.

I played a bit with one of the graphs on the front page and this is what I got:

image

I made this to additionally use the "inflate" feature to make it reach outside of the text bounds and use bigger screen space (it'd be also possible to put it into a scrollable element instead of reducing its size to fit the width). Unfortunately Doxygen's HTML markup capabilities are rather lacking, so this has to be hacked through @parblock (which is the only usable command that results in its contents wrapped in an additional <div>) and m.css-specific extensions that allow to add CSS classes to elements. This is the full patch leading to the above image -- note you can apply the coloring classes to both edges/nodes as well as the subgraphs:

diff --git a/doxygen/Doxyfile b/doxygen/Doxyfile
index f0a5d014..1e3bc23f 100644
--- a/doxygen/Doxyfile
+++ b/doxygen/Doxyfile
@@ -277,7 +277,12 @@ ALIASES                = \
   "ShowcasePresentation=<a href=\"https://taskflow.github.io/showcase/index.html\">showcase presentation</a>"\
   "IssueTracker=<a href=\"https://github.com/taskflow/taskflow/issues\">issue tracker</a>"\
   "PullRequest=<a href=\"https://github.com/taskflow/taskflow/pulls\">pull request</a>"\
-  "twhuang=<a href=\"https://tsung-wei-huang.github.io/\">Dr. Tsung-Wei Huang</a>"
+  "twhuang=<a href=\"https://tsung-wei-huang.github.io/\">Dr. Tsung-Wei Huang</a>" \
+  "m_class{1}=@xmlonly<mcss:class xmlns:mcss=\"http://mcss.mosra.cz/doxygen/\" mcss:class=\"\1\" />@endxmlonly"

 # This tag can be used to specify a number of word-keyword mappings (TCL only).
 # A mapping has the form "name=value". For example adding "class=itcl::class"
diff --git a/doxygen/QuickStart.dox b/doxygen/QuickStart.dox
index 93f4617d..25b82bc0 100644
--- a/doxygen/QuickStart.dox
+++ b/doxygen/QuickStart.dox
@@ -55,7 +55,13 @@ with existing task programming frameworks.
 composition of modular and reusable blocks that are easier to optimize
 at an individual scope.

-@image html images/framework.svg width=100%
+@m_class{m-container-inflate}
+
+@parblock
+
+@dotfile images/framework.dot
+
+@endparblock

 @section HeterogeneousTasking Concurrent CPU-GPU Tasking

diff --git a/doxygen/images/framework.dot b/doxygen/images/framework.dot
index f06ef8c0..b5c806f6 100644
--- a/doxygen/images/framework.dot
+++ b/doxygen/images/framework.dot
@@ -1,9 +1,9 @@
 digraph Taskflow {
 subgraph cluster_p0x7ffee0bae020 {
 label="Taskflow: F4";
-p0x7f9ec5801238[shape=box3d, color=blue, label="module3 [Taskflow: F3]"];
+p0x7f9ec5801238[shape=box3d, class="m-primary", label="module3 [Taskflow: F3]"];
 p0x7f9ec5801238->p0x7f9ec5801338;
-p0x7f9ec5801338[shape=box3d, color=blue, label="module2 [Taskflow: F2]"];
+p0x7f9ec5801338[shape=box3d, class="m-primary", label="module2 [Taskflow: F2]"];
 }
 subgraph cluster_p0x7ffee0badd80 {
 label="Taskflow: F2";
@@ -12,11 +12,12 @@ p0x7f9ec5800a38 -> p0x7f9ec5801038;
 p0x7f9ec5801138[label="f2B" ];
 p0x7f9ec5801138 -> p0x7f9ec5801038;
 p0x7f9ec5801038[label="f2C" ];
-p0x7f9ec5800f38[shape=box3d, color=blue, label="module1 [Taskflow: F1]"];
+p0x7f9ec5800f38[shape=box3d, class="m-primary", label="module1 [Taskflow: F1]"];
 p0x7f9ec5800f38->p0x7f9ec5801038;
 }
 subgraph cluster_p0x7ffee0badce0 {
 label="Taskflow: F1";
+class="m-success"
 p0xa[label="f1A" ];
 p0xb[label="f1B" ];
 p0xc[label="f1C" ];
@@ -25,7 +26,7 @@ p0xd[label="f1D" ];
 }
 subgraph cluster_p0x7ffee0bade20 {
 label="Taskflow: F3";
-p0x7f9ec5800e38[shape=box3d, color=blue, label="module2 [Taskflow: F2]"];
+p0x7f9ec5800e38[shape=box3d, class="m-primary", label="module2 [Taskflow: F2]"];
 p0x7f9ec5800d38[label="f3A" ];
 }
 }
tsung-wei-huang commented 3 years ago

@mosra excellent! Thank you very much. I have migrated my Taskflow doc to m.css. I am not using the embedded class feature (e.g., class="m-primary") because my graph is programmatically generated. This commit solved my problem. Thanks!

mosra commented 3 years ago

Yeah I know, that would need to be done in a preprocessing step (for example replacing all color=blue with class="m-primary" and such). If you'd use the Python-based conf.py on top of Doxyfile, you could implement such processing there.